/ Published in: jQuery
Small image- and content slider with menu generation and auto-rotator.
The auto-rotator stops, when menu is clicked. Text of the menu is taken from the title-tag of the image(can easily be changed!). Minified size < 1kb.
Call it with
$('.someClass').joeSlide();
The auto-rotator stops, when menu is clicked. Text of the menu is taken from the title-tag of the image(can easily be changed!). Minified size < 1kb.
Call it with
$('.someClass').joeSlide();
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
HTML: <div class="someClass"> <ul class="sliderContent"> <li>Slide 1 <img src="image1.jpg" title="Title 1" /></li> <li>Slide 2 ...</li> </ul> </div> CSS(just as i used it): .someClass { height:320px; background:url('../images/bg_slider.gif') repeat-x; position:relative; } .someClass ul { list-style:none; } .sliderContent { position:relative; height:300px; width:960px; margin:8px 0; margin:0; padding-top:10px; overflow:hidden;} .sliderThumbs { position:absolute; bottom:10px; } .sliderThumbs li { float:left; width:192px; height:54px; text-align:center; line-height:60px; cursor:pointer; background:url('../images/buttons_slider.png') no-repeat scroll right 10px transparent } .sliderThumbs li:hover { background-position:right -44px; } .sliderThumbs li.active{ background-position:right -98px; } jQuery Function: (function($){ $.fn.extend({ joeSlide: function() { return this.each(function() { var t; var obj = $(this); obj.append('<ul class="sliderThumbs">'); $('li', obj).each(function (index) { $('.sliderThumbs', obj).append('<li>' + $(this).children('img').attr('alt') + '</li>'); }); $('.sliderThumbs li', obj).last().addClass('active'); $('.sliderThumbs li', obj).live('click', function(){ clearTimeout(t); if( $('.sliderContent li:visible', obj).index() > $(this).index() ) $('.sliderContent li', obj).eq($(this).index()).show().siblings().fadeOut(600); else $('.sliderContent li', obj).eq($(this).index()).fadeIn(600, function(){ $(this).siblings().hide(); }); $('.sliderThumbs li.active', obj).removeClass('active'); $(this).addClass('active', obj); }); var sliderNext = function() { if(!$(".sliderThumbs li", obj).last().hasClass('active')) $(".sliderThumbs li.active", obj).next().click(); else $(".sliderThumbs li", obj).eq(0).click(); t = setTimeout(sliderNext, 5000); } sliderNext(); }); } }); })(jQuery);
URL: http://t3.madcity.at