1k Image/Content Slider with auto rotator - jQuery Snipplr Social Repository

Revision: 46129

at May 25, 2011 19:48 by madc

Updated Code

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

Revision: 46128

at May 13, 2011 06:23 by madc

Updated Code

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):
.sliderWrap { height:320px; background:url('../images/bg_slider_joebstl.gif') repeat-x; position:relative; }
	.sliderWrap 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/top-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);

Revision: 46127

at May 13, 2011 06:21 by madc

Updated Code

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):
.sliderWrap { height:320px; background:url('../images/bg_slider_joebstl.gif') repeat-x; position:relative; }
	.sliderWrap 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/top-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);
				
				$('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);

Revision: 46126

at May 13, 2011 06:19 by madc

Initial Code

(function($){
	$.fn.extend({
		joeSlide: function() {
			return this.each(function() {
				var t;
				var obj = $(this);
				
				$('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);

Initial URL

http://t3.madcity.at

Initial Description

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

Initial Title

1k Image/Content Slider with auto rotator

Initial Tags

jquery

Initial Language

jQuery

Choose a language for easy browsing: