Advanced Search

View RSS Feed

jscheuer1

Combining Ultimate Fade-in Slideshow 2.1 and Lightwindow 2.0

Rating: 6 votes, 3.17 average.
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

Submit "Combining Ultimate Fade-in Slideshow 2.1 and Lightwindow 2.0" to del.icio.us Submit "Combining Ultimate Fade-in Slideshow 2.1 and Lightwindow 2.0" to StumbleUpon Submit "Combining Ultimate Fade-in Slideshow 2.1 and Lightwindow 2.0" to Google Submit "Combining Ultimate Fade-in Slideshow 2.1 and Lightwindow 2.0" to Digg

Updated 09-24-2010 at 09:57 PM by jscheuer1 (Flesh out Links to demo, source scripts)

Tags: None Add / Edit Tags
Categories
DD Scripts Mods , JavaScript & Ajax

Comments

  1. ddadmin's Avatar
    Sweet! And I'm surprised you were able to dig up oninit() event handler inside the code (which I plan to document eventually).
  2. jscheuer1's Avatar
    Quote Originally Posted by ddadmin
    Sweet! And I'm surprised you were able to dig up oninit() event handler inside the code (which I plan to document eventually).
    Thanks! Lots of folks are really interested in the new Ultimate Fade script and what it might be able to do. You and others have taught me too well to miss (for long) such obvious tie ins as oninit as used here and onslide, which is good for other things, that you (in my opinion) wisely chose to include in the new Ultimate Fade script (presumably) for developers.