Variant on Ultimate Fade-in Slideshow, perhaps?

[PaulNLondon]

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).

<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

[jscheuer1]

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:

<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.

[vwphillips]

or

<!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>