On Aug 21, 9:32 pm, Mitch <[EMAIL PROTECTED]> wrote: ... > I would like to point out something that I think would make your cycle > plugin much easier to use which is this. ... > <div id="birds" class="pics"> > <img src="../images/Acadian Flycatcher_X2.jpg" /> > <img src="../images/Acorn Woodpecker_X2.jpg" /> > <img src="../images/Alder Flycatcher_X2.jpg" /></div>
Speaking of improvement, here's my idea: It would be nice to be able to pass additional images to the plugin function call. The reason for this is to support Unobtrusive JS: in the DIV you have a single IMG file which will show up whether or not JS is available. When the plugin is called, if it is passed an array of image names, those images are added before the plugin does the rest of its processing. This allows the JS users to have a cycling show and the non-JS users to see the first image without any effects. As proof of concept, here's some code for a trivial image cycler which demonstrates this feature... the part to look at is the addImages stuff: /////////////////////////////////////////////////////////////////////// // Miniature jQuery plugin for rotating through a set of images. jQuery.fn.goshenImageFader = function( options ) { options = jQuery.extend({ fadeOutSpeed:750, fadeInSpeed:500, delay:4500, addImages:[], forceImgAttr:null },options); if( options.addImages.length ) { for( var i = 0; i < options.addImages.length ; ++i ) { var img = jQuery("<img/>"); img.hide() .attr('src',options.addImages[i]) .appendTo(this); } } var imgs = jQuery('img',this); imgs.gt(0).hide(); if( options.forceImgAttr ) { for( var k in options.forceImgAttr ) { imgs.attr(k,options.forceImgAttr[k]); } } var pos = 0; var current = 0; function cycle() { function doIn(to) { imgs.eq(to).fadeIn( options.fadeInSpeed ); } function doOut(from,to) { imgs.eq(from).fadeOut( options.fadeOutSpeed, function(){doIn(to)} ); } pos = (pos >= (imgs.length-1)) ? 0 : ++pos; doOut( current, pos ); current = pos; }; setInterval( cycle, options.delay ); return this; }; It's then called like so: $('#FrontPageImageFader').goshenImageFader({ addImages:[ '/pics/homes/timberframe/thumb-50/ Kitchen_view_frontpage_byGoshens.jpg', '/pics/homes/timberframe/WalnutCreek_Porch- front.jpg', '/pics/homes/timberframe/LaurelGap-Loft2.jpg' ] }); i think a similar feature would be trivial to add to Cycle and would help Cycle gracefully degrade in browsers w/o JS.