{"id":8,"date":"2007-07-19T18:29:37","date_gmt":"2007-07-20T00:29:37","guid":{"rendered":"http:\/\/bililite.nfshost.com\/blog\/index.php\/2007\/07\/19\/the-photo-cross-fader\/"},"modified":"2014-12-08T13:19:23","modified_gmt":"2014-12-08T19:19:23","slug":"the-photo-cross-fader","status":"publish","type":"post","link":"https:\/\/bililite.com\/blog\/2007\/07\/19\/the-photo-cross-fader\/","title":{"rendered":"The photo cross-fader"},"content":{"rendered":"I just uploaded the pictures for the annual dinner<\/a>. 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.\r\nThe photo page on the website<\/a> is one that I'm particularly proud of. The cross-fading code is based on Image Cross Fade Redux<\/a> and jQuery slideshow (whose website seems to have disappeared) with some enhancements. The whole thing is 39 lines long (jQuery rocks!).\r\nThe markup is simple: a div with contained images, which I get from Flickr and are wrapped in an <A><\/code> element to the original image:\r\n
<div class=\"make_fader\">\r\n  <a href=\"image link 1\"><img src=\"image file 1\/><\/a>\r\n  <a href=\"image link 2\"><img src=\"image file 2\/><\/a>\r\n  <a href=\"image link 3\"><img src=\"image file 3\/><\/a>\r\n  <a href=\"image link 4\"><img src=\"image file 4\/><\/a>\r\n<\/div><\/code><\/pre>\r\nThat's as unobtrusive as it can get!\r\nThe CSS  uses absolute positioning to stack all the images on top of one another:\r\n
div.make_fader {\r\n  position:relative;\r\n  height: 5em;\r\n}\r\ndiv.make_fader img {\r\n  position:absolute;\r\n  height: 5em;\r\n}<\/code><\/pre>\r\nSo 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<\/code> in the CSS; do it in the script as:\r\n$('make_fader img').css('position', 'absolute');<\/code>\r\nThe container needs the height<\/code> set; if all its contents are position: absolute<\/code> it would otherwise shrink to nothing.\r\nThe only actual code you need after including the cross fader code<\/a> is\r\n$('.make_fader').xfade();<\/code>\r\nand it starts fading!\r\nOptions are, as usual for jQuery plugins, in the form of an object as the first argument:\r\n$('.make_fader').xfade({pause: 100, random: 4000, fadeIn: true});<\/code>\r\nOptions include:\r\n
    \r\n\t
  • pause: {Number} minimum number of ms to show the picture. Default: 1000.<\/li>\r\n\t
  • 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.<\/li>\r\n\t
  • fadeTime: {Number} ms for the fade effect. Default: 2000.<\/li>\r\n\t
  • fadeIn: {Boolean} true to have the images start invisible and fade in. Default: false;<\/li>\r\n<\/ul>\r\nThe random<\/code> is very useful because with multiple faders on one page, having them all fade in and out at the same time looks bad. fadeIn<\/code> makes the images fade into view rather than starting out visible.\r\nThe plugin creates an object that is attached to the div that can be used to control the fading.\r\n
    var xfader = $('.make_fader')[0].xfade;\r\nxfader.stop(); \/\/ stop fading. The current image will fade in completely before the fading stops\r\nxfade.start(); \/\/ restart fading\r\nxfade.isStopped(); \/\/ returns true if the fader is stopped<\/code><\/pre>\r\nEnjoy!\r\n\r\n
    Updated:<\/strong> I forgot the '.' before the class name in the code to start fading (was $('make-fader')<\/code> , should have been $('.make-fader')<\/code> ). Apologies to all who tried to make it work! <\/p>","protected":false},"excerpt":{"rendered":"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 […]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[],"_links":{"self":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/8"}],"collection":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/comments?post=8"}],"version-history":[{"count":6,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/8\/revisions"}],"predecessor-version":[{"id":3385,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/posts\/8\/revisions\/3385"}],"wp:attachment":[{"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/media?parent=8"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/categories?post=8"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bililite.com\/blog\/wp-json\/wp\/v2\/tags?post=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}