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>div.make_fader {
position:relative;
height: 5em;
}
div.make_fader img {
position:absolute;
height: 5em;
}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;
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 stoppedUpdated: 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!
Chris says:
I have been trying for over 4 hours now to get this to work. I don’t know what else to do. http://aes2.rfguppy.net/test.html This is as far as I could go. Please help
August 20, 2007, 3:48 pmadmin says:
I tried your page and get an error in the xfade2.js file. Why are you including both? The jquery.fader.js should be stand on its own, as should the xfade2.js. Try including just the jquery.fader.js and see if you get any errors.
Danny
August 21, 2007, 11:40 pmadmin says:
Chris:
Oops–look at the update. To get the elements with a class, use
$(‘.make-fader’) with a period before the class name! I knew that, just posted without trying it beforehand.
The other thing in your code is that you need to run it on document ready.
Use this in your <script> section:
$(function(){
$(‘.make_fader’).xfade();
});
See the jquery documentation.
Hope this helps!
Danny
August 21, 2007, 11:53 pmanon says:
Hi Danny,
I appreciate your posting this code here but for the life of me I cannot get it to work. Is there a way you can outline the steps to get this installed very simply for people who aren’t versed in jQuery? Something like, “put this here, this here, and this here.”
You say “Use this in your section” and I put some of that code in a javascript section at the top and it’s still not working. But I don’t see you doing that on your sample page, so I am confused. And what does “document ready” mean?
You may assumptions that your readers are well-versed in jQuery and this is the first time I’ve ever heard of it. I’m one of those people who can put Javascript in my site but don’t code.
So if you can simplify the instructions, that would be very helpful. I realize you are doing this as a volunteer and are under no obligation, so if you can’t that’s OK.
Thank you so much!
March 11, 2008, 2:58 amDanny says:
anon:
March 13, 2008, 6:17 pmI’m not in a position to explain all of jQuery, but there are some good tutorials on the jQuery site (www.jquery.com). You’re not going to be able to effectively use any jQuery plugins without some facility in using jQuery itself. That said, I think that Mike Alsup wrote a much better photo fader plugin than mine (and I’m going to change the Young Israel site to it when I get the chance), at http://www.malsup.com/jquery/cycle/
Play with jQuery a bit, then try my or his plugins. If you still have questions specific to my plugin, you can email me at webmaster-at-youngisrael-stl.org
Danny
anon says:
Thanks, Danny, I tried that other code and managed to find a website using it, where I was able to copy exactly what they put in their page and it worked! Thanks again!
March 14, 2008, 3:14 am