SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot ikjosh's Avatar
    Join Date
    Feb 2008
    Location
    Fort Worth, TX
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Multiple instances of PhotoShuffler on same page?

    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?

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I modified the code for you to make as many slide shows as you want.
    Let me know if it works.

    Code:
      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 &#37; 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;
      }
    }

  3. #3
    SitePoint Zealot ikjosh's Avatar
    Join Date
    Feb 2008
    Location
    Fort Worth, TX
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    74
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
      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 &#37; 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;
      }
    }

  5. #5
    SitePoint Zealot ikjosh's Avatar
    Join Date
    Feb 2008
    Location
    Fort Worth, TX
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wolken, you rock!

  6. #6
    SitePoint Zealot ikjosh's Avatar
    Join Date
    Feb 2008
    Location
    Fort Worth, TX
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •