Hacking at 0300

I just uploaded the pictures for the annual dinner. Rabbi Shulman is a brilliant and inspiring speaker (confirming my first impressions when he came here). He discussed how a navi (prophet) always spoke in his unique voice yet never added to the unchanging truth of the Torah, and that is the same way we all must look at Judaism, and he tied it in with the dinner theme of Honoring our Past, Building our Future. I'm looking forward to hearing him weekly. The photo page on the website is one that I'm particularly proud of. The cross-fading code is based on Image Cross Fade Redux and jQuery slideshow (whose website seems to have disappeared) with some enhancements. The whole thing is 39 lines long (jQuery rocks!). The markup is simple: a div with contained images, which I get from Flickr and are wrapped in an <A> element to the original image:

<div class="make_fader">
  <a href="image link 1"><img src="image file 1/></a>
  <a href="image link 2"><img src="image file 2/></a>
  <a href="image link 3"><img src="image file 3/></a>
  <a href="image link 4"><img src="image file 4/></a>
</div>

That's as unobtrusive as it can get! The CSS uses absolute positioning to stack all the images on top of one another:

div.make_fader {
  position:relative;
  height: 5em;
}
div.make_fader img {
  position:absolute;
  height: 5em;
}

So without javascript it only shows the last picture; the rest are hidden behind. If you want to show them all with scripting off, don't make the images position: absolute in the CSS; do it in the script as: $('make_fader img').css('position', 'absolute'); The container needs the height set; if all its contents are position: absolute it would otherwise shrink to nothing. The only actual code you need after including the cross fader code is $('.make_fader').xfade(); and it starts fading! Options are, as usual for jQuery plugins, in the form of an object as the first argument: $('.make_fader').xfade({pause: 100, random: 4000, fadeIn: true}); Options include:

• pause: {Number} minimum number of ms to show the picture. Default: 1000.
• random: {Number} 0 to this number will randomly be added to pause. Default 0. This keeps all the faders on a page from fading at the same time.
• fadeTime: {Number} ms for the fade effect. Default: 2000.
• fadeIn: {Boolean} true to have the images start invisible and fade in. Default: false;

The random is very useful because with multiple faders on one page, having them all fade in and out at the same time looks bad. fadeIn makes the images fade into view rather than starting out visible. The plugin creates an object that is attached to the div that can be used to control the fading.

var xfader = $('.make_fader')[0].xfade;
xfader.stop(); // stop fading. The current image will fade in completely before the fading stops
xfade.start(); // restart fading
xfade.isStopped(); // returns true if the fader is stopped

Enjoy!

Updated: I forgot the '.' before the class name in the code to start fading (was $('make-fader') , should have been $('.make-fader') ). Apologies to all who tried to make it work!