One thing I forgot to mention is that where you have:
Code:
imagearray: [
["Photos/06_sm.jpg", "Photos/066.jpg", "_new", ""],
["Photos/05_sm.jpg", "Photos/055.jpg", "_new", ""],
["Photos/04_sm.jpg", "Photos/044.jpg", "_new", ""],
["Photos/033_sm.jpg", "Photos/033.jpg", "_new", ""],
["Photos/02_sm.jpg", "Photos/022.jpg", "_new", ""],
["Photos/01_sm.jpg", "Photos/011.jpg", "_new", ""],
],
That last comma (red) inside the imagearray doesn't belong there. It will cause the script to break in IE 8 and less. Remove it.
OK. Remember to back up what you have, just in case. Try this variation, copy it over the existing on page call. The tags in the head remain the same:
Code:
<script type="text/javascript">
var vacationtext=[
"Команда Chill Out Event стала победителем регаты Ocean Medi Cup 2011",
"Гала показ мехового дома NAFA",
"Инаугурация губернатора Тульской области",
"Форум Селигер 2011",
"Празднование 35 летия центра образования 109 в Крокус Сите Холле",
"Организация визита вице-президента США Джозефа Байдена"
]
$(window).load(function(){simpleGallery.window = true;}); // create reference, is window loaded?
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of gallery DIV container,
dimensions: [260, 205], //width/height of gallery in pixels. Should reflect dimensions of the images exactly!
imagearray: [
["Photos/06_sm.jpg", "Photos/06.jpg", "_new", ""],
["Photos/05_sm.jpg", "Photos/05.jpg", "_new", ""],
["Photos/04_sm.jpg", "Photos/04.jpg", "_new", ""],
["Photos/03_sm.jpg", "Photos/03.jpg", "_new", ""],
["Photos/02_sm.jpg", "Photos/02.jpg", "_new", ""],
["Photos/01_sm.jpg", "Photos/01.jpg", "_new", ""]
],
autoplay: [false, 3500, 3], //[auto play: delay slides in millisec, cycles before stopping]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 800, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
var gal = this, s = gal.setting, $n = $(s.navbuttons), $p = $n.eq(1), il = s.imagearray.length,
$fbdiv = $('<div></div>').css({display: 'none'}).appendTo($('body')), $fblinks, $fbnav;
$.each(s.imagearray, function(i){
if(simpleGallery.window){ // preload larger images
$(new Image()).attr('src', this[1]);
} else {
var src = this[1];
$(window).load(function(){$(new Image()).attr('src', src);});
}
$fbdiv.append($('<a href="' + this[1] + '" title="изображение ' + (i + 1) + ' из ' + il +
'\u00a0 \u00a0 \u2013 \u00a0 \u00a0' + vacationtext[i] + '" rel="gallery"></a>')); // create proxy links
});
$fblinks = $fbdiv.find('a').fancybox({ // bind fancybox to the proxy links
margin: 100,
cyclic: true,
titlePosition: 'inside',
onComplete: function(){
gal.showhidenavpanel('hide');
$(document).unbind('keydown.fb');
$fbnav = $('#fancybox-left, #fancybox-right').unbind('click.fbsg').bind('click.fbsg', function(){
$n.eq(this.id === 'fancybox-left'? 0 : 2).click();
});
},
onCleanUp : function(){$fbnav.unbind('click.fbsg');}
});
s.$wrapperdiv.find('.gallerylayer a').live('click', function(e){
e.preventDefault();
if (!s.ispaused) {$p.click();} // if gallery playing, pause it by simulating a click on the pause button
$fblinks.eq(s.curimage).click(); // activate fancybox
});
$('#fancybox-content img').live('mouseenter', function(){this.title = '';});
},
onslide:function(curslide, i){ //event that fires after each slide is shown
document.getElementById("myvacation").innerHTML=vacationtext[i]
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})
</script>
That's it for that one.
OR Here's another variation. Don't try to do both on the same page - this one requires styles added to the head as shown:
Code:
<link href="style.css" rel="stylesheet" type="text/css">
<link href="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css">
<style type="text/css">
#fancybox-left, #fancybox-right {
top: 0px;
visibility: hidden;
}
#fancybox-left-ico, #fancybox-right-ico {
margin-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
And this on page call:
Code:
<script type="text/javascript">
var vacationtext=[
"Команда Chill Out Event стала победителем регаты Ocean Medi Cup 2011",
"Гала показ мехового дома NAFA",
"Инаугурация губернатора Тульской области",
"Форум Селигер 2011",
"Празднование 35 летия центра образования 109 в Крокус Сите Холле",
"Организация визита вице-президента США Джозефа Байдена"
]
$(window).load(function(){simpleGallery.window = true;}); // create reference, is window loaded?
var mygallery=new simpleGallery({
wrapperid: "simplegallery1", //ID of gallery DIV container,
dimensions: [260, 205], //width/height of gallery in pixels. Should reflect dimensions of the images exactly!
imagearray: [
["Photos/06_sm.jpg", "Photos/06.jpg", "_new", ""],
["Photos/05_sm.jpg", "Photos/05.jpg", "_new", ""],
["Photos/04_sm.jpg", "Photos/04.jpg", "_new", ""],
["Photos/03_sm.jpg", "Photos/03.jpg", "_new", ""],
["Photos/02_sm.jpg", "Photos/02.jpg", "_new", ""],
["Photos/01_sm.jpg", "Photos/01.jpg", "_new", ""]
],
autoplay: [false, 3500, 3], //[auto play: delay slides in millisec, cycles before stopping]
persist: false, //remember last viewed slide and recall within same session?
fadeduration: 800, //transition duration (milliseconds)
oninit:function(){ //event that fires when gallery has initialized/ ready to run
//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
var gal = this, s = gal.setting, $n = $(s.navbuttons), $p = $n.eq(1), il = s.imagearray.length,
$fbdiv = $('<div></div>').css({display: 'none'}).appendTo($('body')), $fblinks, $fbnav;
$.each(s.imagearray, function(i){
if(simpleGallery.window){ // preload larger images
$(new Image()).attr('src', this[1]);
} else {
var src = this[1];
$(window).load(function(){$(new Image()).attr('src', src);});
}
$fbdiv.append($('<a href="' + this[1] + '" title="изображение ' + (i + 1) + ' из ' + il +
'\u00a0 \u00a0 \u2013 \u00a0 \u00a0' + vacationtext[i] + '" rel="gallery"></a>')); // create proxy links
});
$fblinks = $fbdiv.find('a').fancybox({ // bind fancybox to the proxy links
margin: 100,
cyclic: true,
titlePosition: 'inside',
titleFormat: function(title, currentArray, currentIndex, currentOpts) {
var newclose = $('#fancybox-close').css({visibility: 'hidden'}).clone(true).attr('title', 'Закрой');
return $('<span id="fancybox-title-inside" style="display: block; text-align: left; position: relative;">' +
'<span style="display: block; margin-right: 40px;">' +
(title.length? title : '') + '<\/span><\/span>').prepend(newclose.css({visibility: 'visible',
right: 0, top: '50%', marginTop: -15}).fadeIn('slow', function(){this.style.display = 'block';
$('#fancybox-left, #fancybox-right').css({visibility: 'visible', height : $('#fancybox-content').innerHeight()})
.attr('title', 'Предыдущий').eq(1).attr('title', 'Следующая');
$('#fancybox-content img').attr('title', '');}) );
},
onComplete: function(){
gal.showhidenavpanel('hide');
$(document).unbind('keydown.fb');
$fbnav = $('#fancybox-left, #fancybox-right').unbind('click.fbsg').bind('click.fbsg', function(){
$n.eq(this.id === 'fancybox-left'? 0 : 2).click();
});
},
onCleanUp : function(){$fbnav.unbind('click.fbsg');}
});
s.$wrapperdiv.find('.gallerylayer a').live('click', function(e){
e.preventDefault();
if (!s.ispaused) {$p.click();} // if gallery playing, pause it by simulating a click on the pause button
$fblinks.eq(s.curimage).click(); // activate fancybox
});
},
onslide:function(curslide, i){ //event that fires after each slide is shown
document.getElementById("myvacation").innerHTML=vacationtext[i]
//Keyword "this": references current gallery instance
//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
}
})
</script>
How to add "Lightbox" to "Simple Controls Gallery" links?
Reply With Quote
Originally Posted by CJ Romix
Bookmarks