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.
