Results 1 to 3 of 3

Thread: Variant on Ultimate Fade-in Slideshow, perhaps?

  1. #1
    Join Date
    Nov 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Variant on Ultimate Fade-in Slideshow, perhaps?

    I have used and am delighted with the Ultimate Fade-in Slideshow.

    I am now trying to use it to create the effect whereby images in several locations on the page fade in and out of the background colour (what I'm actually aiming for is to have a number of stars that will seem to twinkle).

    So far, I've done this by putting in the image matrix one star image jpg and two further images which are just a single pixel of the background colour and used the randomize option.

    The fact that the script creates a div is now my issue since I understand that a div should only be used once on a page.

    I've used the code to create two divs and prove I can get two stars to 'twinkle' (I set the pause and the transition times to different values).

    Code:
    <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [30, 30], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["images/blank1.jpg"],
    		["images/star.jpg"],
    		["images/blank2.jpg"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:1000, cycles:0, wraparound:false, randomize:true},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 200, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    })
    
    var mygallery2=new fadeSlideShow({
    	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
    	dimensions: [30, 30], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["images/blank1.jpg"],
    		["images/star.jpg"],
    		["images/blank2.jpg"] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:1500, cycles:0, wraparound:false, randomize:true},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 350, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    })
    
    </script>
    I guess it isn't the greatest idea to replicate this to create the twelve or more stars I want so I'd like some ideas and suggestions, please.

    Thanks
    Paul

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,991
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    I think it should be fine. It's not like you're loading up a bunch of code. Almost everything is reused. If the images are few and small and also reused, it should be OK. It could be written a little more concisely though since everything is the same except for the different wrapperid's and durations:

    Code:
    <script type="text/javascript">
    fadeSlideShow.makeGalObj = function(obj){
    	obj = obj || {};
    	var defaults = {
    		wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    		dimensions: [30, 30], //width/height of gallery in pixels. Should reflect dimensions of largest image
    		imagearray: [
    			["images/blank1.jpg"],
    			["images/star.jpg"],
    			["images/blank1.jpg"] //<--no trailing comma after very last image element!
    		],
    		displaymode: {type:'auto', pause:1000, cycles:0, wraparound:false, randomize:false},
    		persist: false, //remember last viewed slide and recall within same session?
    		fadeduration: 200, //transition duration (milliseconds)
    		descreveal: "ondemand",
    		togglerid: ""
    	}
    	return jQuery.extend({}, defaults, obj);
    };
    
    var mygallery=new fadeSlideShow(fadeSlideShow.makeGalObj());
    
    var mygallery2=new fadeSlideShow(fadeSlideShow.makeGalObj({
    	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
    	displaymode: {type:'auto', pause:1500, cycles:0, wraparound:false, randomize:false},
    	fadeduration: 350  //<--no trailing comma after very last custom property!
    ));
    
    var mygallery3=new fadeSlideShow(fadeSlideShow.makeGalObj({
    	wrapperid: "fadeshow3", //ID of blank DIV on page to house Slideshow
    	displaymode: {type:'auto', pause:900, cycles:0, wraparound:false, randomize:false},
    	fadeduration: 150  //<--no trailing comma after very last custom property!
    ));	
    
    </script>
    Untested, but should work. You can have as many different ones as you like. I changed randomize to false because I don't think it's getting you anything, at least not anything good. I could be wrong on that. If the two 'blank' images are the same, you only need one.

    If you want more help:

    Please post a link to a page on the web that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 420 Times in 414 Posts

    Default

    or

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    .star {
      width:30px;height:30px;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <img class="star" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="star" />
    <img class="star" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="star" />
    <img class="star" src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" alt="star" />
    <img class="star" src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" alt="star" />
    <img class="star" src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" alt="star" />
    <img class="star" src="http://www.vicsjavascripts.org.uk/StdImages/Six.gif" alt="star" />
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Stars(o){
     var mm=o.MinMaxDuration,min=mm[0],max=mm[1]-min,reg=new RegExp('\\b'+o.CommonClass+'\\b'),els=document.getElementsByTagName('IMG'),z0=0
     for (;z0<els.length;z0++){
      if(reg.test(els[z0].className)){
       new Star(els[z0],min,max);
      }
     }
    }
    
    function Star(obj,min,max){
     this.obj=obj;
     this.min=min;
     this.max=max;
     this.mm=[0,100];
     this.animate(this.mm[0],this.mm[1],new Date(),this.min+Math.random()*this.max);
    }
    
    Star.prototype.animate=function(f,t,srt,mS){
      var oop=this,obj=this.obj,ms=new Date().getTime()-srt,opc=(t-f)/mS*ms+f;
      if (isFinite(opc)){
       obj.style.visibility='visible';
       obj.style.filter='alpha(opacity='+opc+')';
       obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
      }
      if (ms<mS){
       this.dly=setTimeout(function(){ oop.animate(f,t,srt,mS); },10);
      }
      else {
       this.mm.reverse();
       if (t==0){
        obj.style.visibility='hidden';
       }
       this.animate(this.mm[0],this.mm[1],new Date(),this.min+Math.random()*this.max);
      }
     }
    
    
    Stars({
     CommonClass:'star',
     MinMaxDuration:[200,500]
    });
    /*]]>*/
    </script>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

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
  •