Combine "Ultimate Fade-in Slideshow" and "Lightwindow 2.0" ??

[Brainwrek]

1) Script Title: Ultimate Fade-in Slideshow
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm

1) Script Title: LightWindow 2.0
2) Script URL: http://www.stickmanlabs.com/lightwindow/


Ultimate Fade Slideshow uses the following syntax to link an image to a URL:

["path_to_image", "optional_url", "optional_linktarget", "optional_description"]
["http://mysite.com/pic.jpg", "http://somesite.com", "_new", "Beautiful Photo"]

LightWindow 2.0 uses the following syntax to open an image in a lightbox:

<a href="http://mysite.com/pic.jpg" class="lightwindow" caption="Beautiful Photo">Beautiful Photo</a>

LightWindow 2.0 offers the ability to "Create and Launch a Window with a Javascript Call," but this is just beyond my grasp of javascript, and I'm not sure it's even applicable... But the documentation says:

To Create and Launch a Window with a Javascript Call, simply call activateWindow(id, options) function as show below. Just be sure to reference the myLightWindow object that is automatically created or use the one you have opted to. EXAMPLE:

myLightWindow.activateWindow({
	href: 'http://stickmanlabs.com/images/kevin_vegas.jpg', 
	title: 'Waiting for the show to start in Las Vegas', 
	author: 'Jazzmatt', 
	caption: 'Mmmmmm Margaritas! And yes, this is me...', 
	left: 300
});"

Wondering if anyone has had success (or might know a way) making these scripts work together?

Thanks in advance for anyone that can help.

[Brainwrek]

Anyone have any input on this?
Bueller... Bueller...

[jscheuer1]

In theory, and I just tested this part out - it works, one should be able to insert the 'javascript:whatever();' convention as the URL, ex:

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", "javascript:myFunc();", "", "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"
})

function myFunc(){
alert('It worked!');
}

So, even if you just understand the basics of javascript, you can make the link of each image do just about anything you want.

That said, I have serious doubts about Lightwindow for this. It uses the Prototype script library and a few of that library's helper scripts. It has been my experience in the past that this will conflict with the jQuery script library used for the slide show. However, the slide show code was written in 'No Conflict' mode, so you may be OK. Still, I have seen that be of no help in the past when it comes to conflicts between these two libraries.

Regardless, if you are already using one script library, it is best to stick with it. So what I would suggest is either finding a jQuery based script that can do what you want Lightwindow for and use that with the slide show, or find a Prototype based slide show that you may use with Lightwindow.

[jscheuer1]

I've done quite a bit more testing, and found that this actually can work. I would still advise using two scripts which work off of the same script library, rather than two different script libraries. All you need to do to set up a demo though 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):

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:

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

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

and:

#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:

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