JS: in > the DIV you have a single IMG file which will show up whether or not > JS is available
I would like it so only ONE image showed when you were viewing in your editor instead of all images being stacked on top of each other. On Aug 21, 12:51 pm, Stephan Beal <[EMAIL PROTECTED]> wrote: > 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.