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.
