Posted By

madc on 05/13/11

Tagged

jquery

Versions (?)

Last Edited at 05/13/11 06:19am

Statistics

Viewed 512 times

Favorited by 0 user(s)

Related snippets

1k Image/Content Slider with auto rotator

/ 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();

Highlighted TextExpand

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

Report this snippet Tweet