Combining Ultimate Fade-in Slideshow 2.1 and Lightwindow 2.0
Posted 10-07-2009 at 04:10 PM by jscheuer1
Updated 10-08-2009 at 01:06 AM by jscheuer1 (Flesh out Links to demo, source scripts)
Updated 10-08-2009 at 01:06 AM by jscheuer1 (Flesh out Links to demo, source scripts)
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):
After the closing script tag for the above code, add your Lightwindow files, and make sure they are available to the page:
One other thing, you will need to up the z-indexes in the lightwindow.css file in three spots:
and:
and:
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.stickmanlabs.com/lightwindow/
Ultimate Fade Home:
http://www.dynamicdrive.com/dynamici...nslideshow.htm
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;});
}
});
};
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" />
Code:
#lightwindow_overlay {
/* REQUIRED */
display: none;
visibility: hidden;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 10000;
/* REQUIRED */
}
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 */
}
Code:
#lightwindow_loading {
/* REQUIRED */
height: 100%;
width: 100%;
top: 0px;
left: 0px;
z-index: 10001;
position: absolute;
/* REQUIRED */
background-color: #f0f0f0;
padding: 10px;
}
Demo (click on first image in second slide show):
http://home.comcast.net/~jscheuer1/side/ufade21_lw2/
Lightwindow Home:
http://www.stickmanlabs.com/lightwindow/
Ultimate Fade Home:
http://www.dynamicdrive.com/dynamici...nslideshow.htm
Total Comments 2
Comments
-
Sweet! And I'm surprised you were able to dig uponinit()event handler inside the code (which I plan to document eventually).Posted 10-07-2009 at 11:04 PM by ddadmin 
-
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.Quote:Originally Posted by ddadmin
Sweet! And I'm surprised you were able to dig uponinit()event handler inside the code (which I plan to document eventually).Posted 10-08-2009 at 01:13 AM by jscheuer1
