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!
