Michael Svanström

developer, photographer

Writing a simple jQuery slideshow plugin

I needed to write a simple slideshow plugin for jQuery which basically showed all content inside of a div one by one. This plugin will list all child elements of the selector and make them clickable. ;(function(jQuery) { jQuery.fn.tinyslideshow = function(settings) { var config = {path:“}; if (settings) jQuery.extend(config, settings); var imgs; var currentIndex=-1; function _next() { if (currentIndex == imgs.length-1) currentIndex = 0; else currentIndex++; _goto(currentIndex); } function _prev() { if (currentIndex == 0) currentIndex = imgs.length-1; else currentIndex–; _goto(currentIndex); } function _goto(i) { try { currentIndex = i; imgs.hide(); jQuery(‘.ts-nav-link’).css(‘color’,‘#696969’).eq(i).css(‘color’,‘#4092ca’); imgs.eq(currentIndex).fadeIn(); } catch (e) {} } this.each(function(e) { imgs = jQuery(this).children(); imgs.click( function(e) { e.preventDefault(); _next() } ); var html = ‘

’; html += ‘’; for (var i=0; i ‘+(i+1)+’   ‘; html += ‘’; html += ‘
’; jQuery(html).appendTo(jQuery(this)); jQuery(this).find(‘.ts-nav-link’).click( function(e) { e.preventDefault(); _goto(jQuery(this).attr(‘rel’)); }); jQuery(this).find(‘.ts-nav-next’).click( function(e) { e.preventDefault(); _next(); } ); jQuery(this).find(‘.ts-nav-prev’).click( function(e) { e.preventDefault(); _prev(); } ); _goto(0); }); return this; }; })(jQuery);