jscheuer1

I've found that this actually can work. It makes an interesting use of the slide show's undocumented oninit feature, and how well the slide show is written visa vis jQuery's No Conflict mode. I would generally advise using two scripts which work off of the same script library, rather than two different script libraries. However, in this case both scripts are so robust, who can resist?

That said, all you need to do to set up a demo is to follow the instructions for Ultimate Fade on its demo page. Then replace the second slide show's script code with this script code (additions/changes highlighted):

Code:

var mygallery2=new fadeSlideShow({
	wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
	imagearray: [
		["http://i26.tinypic.com/11l7ls0.jpg", "http://stickmanlabs.com/images/kevin_vegas.jpg", "lightwindow::true::title::Waiting for the show to start in Las Vegas::author::Jazzmatt::caption::Mmmmmm Margaritas! And yes, this is me...", "Nothing beats relaxing next to the pool when the weather is hot."],
		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
		["http://i30.tinypic.com/531q3n.jpg"],
		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
	],
	displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	descreveal: "always",
	togglerid: "fadeshow2toggler"
})

mygallery2.setting.oninit = function(){
	this.setting.$gallerylayers.find('a[target]').each(function(){
		var t = this.target.split('::'), o = {}, i = 2;
		if(t.length > 1 && t[0] === 'lightwindow' && t[1] === 'true'){
			o.href = this.href;
			for(i; i < t.length; ++i)
				o[t[i++]] = t[i];
			jQuery(this).bind('click', function(e){myLightWindow.activateWindow(o);if(e && e.preventDefault){e.preventDefault();}else return false;});
		}
	});
};

After the closing script tag for the above code, add your Lightwindow files, and make sure they are available to the page:

Code:

	. . . 
</script>
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />

One other thing, you will need to up the z-indexes in the lightwindow.css file in three spots:

Code:

#lightwindow_overlay {
	/* REQUIRED */
	display: none;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	z-index: 10000;
	/* REQUIRED */
}

and:

Code:

#lightwindow {
	/* REQUIRED */
	/* Of Note - The height and width of this element are set to 0px */
	display: none;
	visibility: hidden;
	position: absolute;
	z-index: 10001;
	line-height: 0px;
	/* REQUIRED */
}

and:

Code:

#lightwindow_loading {
	/* REQUIRED */
	height: 100%;
	width: 100%;
	top: 0px;
	left: 0px;
	z-index: 10001;
	position: absolute;
	/* REQUIRED */
	background-color: #f0f0f0;
	padding: 10px;
}

After you've done these things, simply click on the first image in the second slide show and watch the Lightwindow open up.

Demo (click on first image in second slide show):

http://home.comcast.net/~jscheuer1/side/ufade21_lw2/

Lightwindow Home:

http://www.p51labs.com/lightwindow/

Ultimate Fade Home:

http://www.dynamicdrive.com/dynamici...nslideshow.htm