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!

6 Comments

  1. 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

  2. admin 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

  3. admin 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

  4. anon 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!

  5. Danny says:

    anon:
    I’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

  6. 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!

Leave a Reply


Warning: Undefined variable $user_ID in /home/public/blog/wp-content/themes/evanescence/comments.php on line 75