Hi,
I am using PhotoShuffler on my website for a slideshow. But, on my page, I want to have 2 slide shows going. But I can’t seem to get it to work - I duplicated the JS code, and added the number “2” next to all the variables in the second file, to try and make it different, but it still will only fade one slide show, no both at the same time
Any suggestions?
Hi Wolken,
Any idea how to modify this so that I can make each image in the shuffle have a link to a different url?
wolken, you rock!
window.onload = function()
{
var divId1 = "photodiv";
var imgId1="photoimg";
var imgArray1= new Array(
"http://static.flickr.com/53/149047107_78ebdaf8bc.jpg?v=0",
"http://static.flickr.com/48/149048049_3523869ba4.jpg?v=0",
"http://static.flickr.com/56/149047438_fabcf2f7ce.jpg?v=0"
);
var object1 = new shuffler(divId1,imgId1,imgArray1,5);
object1.photoShufflerLaunch();
var divId2 = "photodiv2";
var imgId2 ="photoimg2";
var imgArray2= new Array(
"http://static.flickr.com/53/149047107_78ebdaf8bc.jpg?v=0",
"http://static.flickr.com/56/149047438_fabcf2f7ce.jpg?v=0",
"http://static.flickr.com/48/149048049_3523869ba4.jpg?v=0"
);
var object2 = new shuffler(divId2,imgId2,imgArray2,6);
object2.photoShufflerLaunch();
//YOU CAN DO AS MANY OBJECTS AS YOU WANT
}
var shuffler = function(divId,imgId, imgArray, interval)
{
this.gblPhotoShufflerDivId = divId;
this.gblPhotoShufflerImgId = imgId;
this.gblImg = imgArray;
this.gblPauseSeconds = interval;
this.gblFadeSeconds = .85;
this.gblRotations = 1;
// End Customization section
this.gblDeckSize = this.gblImg.length;
this.gblOpacity = 100;
this.gblOnDeck = 0;
this.gblStartImg;
this.gblImageRotations = this.gblDeckSize * (this.gblRotations+1);
this.photoShufflerLaunch = function()
{
var theimg = document.getElementById(this.gblPhotoShufflerImgId);
this.gblStartImg = theimg.src; // save away to show as final image
document.getElementById(this.gblPhotoShufflerDivId).style.backgroundImage='url(' + this.gblImg[this.gblOnDeck] + ')';
setTimeout(( function(obj){ return function(){ obj.photoShufflerFade(); } } )(this),this.gblPauseSeconds*1000);
}
this.photoShufflerFade = function()
{
var theimg = document.getElementById(this.gblPhotoShufflerImgId);
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta = 100 / (30 * this.gblFadeSeconds);
// fade top out to reveal bottom image
if (this.gblOpacity < 2*fadeDelta )
{
this.gblOpacity = 100;
// stop the rotation if we're done
if (this.gblImageRotations < 1) return;
this.photoShufflerShuffle();
// pause before next fade
setTimeout(( function(obj){ return function(){ obj.photoShufflerFade(); } } )(this),this.gblPauseSeconds*1000);
}
else
{
this.gblOpacity -= fadeDelta;
this.setOpacity(theimg,this.gblOpacity);
setTimeout(( function(obj){ return function(){ obj.photoShufflerFade(); } } )(this),30); // 1/30th of a second
}
}
this.photoShufflerShuffle = function()
{
var thediv = document.getElementById(this.gblPhotoShufflerDivId);
var theimg = document.getElementById(this.gblPhotoShufflerImgId);
// copy div background-image to img.src
theimg.src = this.gblImg[this.gblOnDeck];
// set img opacity to 100
this.setOpacity(theimg,100);
// shuffle the deck
this.gblOnDeck = ++this.gblOnDeck % this.gblDeckSize;
// decrement rotation counter
if (--this.gblImageRotations < 1)
{
// insert start/final image if we're done
this.gblImg[this.gblOnDeck] = this.gblStartImg;
}
// slide next image underneath
thediv.style.backgroundImage='url(' + this.gblImg[this.gblOnDeck] + ')';
}
this.setOpacity = function (obj, opacity)
{
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
}
Wow, awesome wolken! Thank you!
Is is possible to have them fade at different intervals? For example, currently we have:
this.gblPauseSeconds = 5;
So both slideshows pause at 5 seconds - What if I wanted one to fade at 5 seconds, and the other at 6 seconds?
I modified the code for you to make as many slide shows as you want.
Let me know if it works.
window.onload = function()
{
var divId1 = "photodiv";
var imgId1="photoimg";
var imgArray1= new Array(
"http://static.flickr.com/53/149047107_78ebdaf8bc.jpg?v=0",
"http://static.flickr.com/48/149048049_3523869ba4.jpg?v=0",
"http://static.flickr.com/56/149047438_fabcf2f7ce.jpg?v=0"
);
var object1 = new shuffler(divId1,imgId1,imgArray1);
object1.photoShufflerLaunch();
var divId2 = "photodiv2";
var imgId2 ="photoimg2";
var imgArray2= new Array(
"http://static.flickr.com/53/149047107_78ebdaf8bc.jpg?v=0",
"http://static.flickr.com/56/149047438_fabcf2f7ce.jpg?v=0",
"http://static.flickr.com/48/149048049_3523869ba4.jpg?v=0"
);
var object2 = new shuffler(divId2,imgId2,imgArray2);
object2.photoShufflerLaunch();
//YOU CAN DO AS MANY OBJECTS AS YOU WANT
}
var shuffler = function(divId,imgId, imgArray)
{
this.gblPhotoShufflerDivId = divId;
this.gblPhotoShufflerImgId = imgId;
this.gblImg = imgArray;
this.gblPauseSeconds = 5;
this.gblFadeSeconds = .85;
this.gblRotations = 1;
// End Customization section
this.gblDeckSize = this.gblImg.length;
this.gblOpacity = 100;
this.gblOnDeck = 0;
this.gblStartImg;
this.gblImageRotations = this.gblDeckSize * (this.gblRotations+1);
this.photoShufflerLaunch = function()
{
var theimg = document.getElementById(this.gblPhotoShufflerImgId);
this.gblStartImg = theimg.src; // save away to show as final image
document.getElementById(this.gblPhotoShufflerDivId).style.backgroundImage='url(' + this.gblImg[this.gblOnDeck] + ')';
setTimeout(( function(obj){ return function(){ obj.photoShufflerFade(); } } )(this),this.gblPauseSeconds*1000);
}
this.photoShufflerFade = function()
{
var theimg = document.getElementById(this.gblPhotoShufflerImgId);
// determine delta based on number of fade seconds
// the slower the fade the more increments needed
var fadeDelta = 100 / (30 * this.gblFadeSeconds);
// fade top out to reveal bottom image
if (this.gblOpacity < 2*fadeDelta )
{
this.gblOpacity = 100;
// stop the rotation if we're done
if (this.gblImageRotations < 1) return;
this.photoShufflerShuffle();
// pause before next fade
setTimeout(( function(obj){ return function(){ obj.photoShufflerFade(); } } )(this),this.gblPauseSeconds*1000);
}
else
{
this.gblOpacity -= fadeDelta;
this.setOpacity(theimg,this.gblOpacity);
setTimeout(( function(obj){ return function(){ obj.photoShufflerFade(); } } )(this),30); // 1/30th of a second
}
}
this.photoShufflerShuffle = function()
{
var thediv = document.getElementById(this.gblPhotoShufflerDivId);
var theimg = document.getElementById(this.gblPhotoShufflerImgId);
// copy div background-image to img.src
theimg.src = this.gblImg[this.gblOnDeck];
// set img opacity to 100
this.setOpacity(theimg,100);
// shuffle the deck
this.gblOnDeck = ++this.gblOnDeck % this.gblDeckSize;
// decrement rotation counter
if (--this.gblImageRotations < 1)
{
// insert start/final image if we're done
this.gblImg[this.gblOnDeck] = this.gblStartImg;
}
// slide next image underneath
thediv.style.backgroundImage='url(' + this.gblImg[this.gblOnDeck] + ')';
}
this.setOpacity = function (obj, opacity)
{
opacity = (opacity == 100)?99.999:opacity;
// IE/Win
obj.style.filter = "alpha(opacity:"+opacity+")";
// Safari<1.2, Konqueror
obj.style.KHTMLOpacity = opacity/100;
// Older Mozilla and Firefox
obj.style.MozOpacity = opacity/100;
// Safari 1.2, newer Firefox and Mozilla, CSS3
obj.style.opacity = opacity/100;
}
}