Advanced Search

1k Image/Content Slider with auto rotator

/ Published in: jQuery
Save to your folder(s)
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();

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. HTML:
  2. <div class="someClass">
  3. 	<ul class="sliderContent">
  4. 		<li>Slide 1 <img src="image1.jpg" title="Title 1" /></li>
  5. 		<li>Slide 2 ...</li>
  6. 	</ul>
  7. </div>
  8. CSS(just as i used it):
  9. .someClass { height:320px; background:url('../images/bg_slider.gif') repeat-x; position:relative; }
  10. 	.someClass ul { list-style:none; }
  11. 	.sliderContent { position:relative; height:300px; width:960px; margin:8px 0; margin:0; padding-top:10px; overflow:hidden;}
  12. 	.sliderThumbs { position:absolute; bottom:10px; }
  13. 		.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 }
  14. 		.sliderThumbs li:hover { background-position:right -44px; }
  15. 		.sliderThumbs li.active{ background-position:right -98px; }
  16.  
  17. jQuery Function:
  18. (function($){
  19. 	$.fn.extend({
  20. 		joeSlide: function() {
  21. 			return this.each(function() {
  22. 				var t;
  23. 				var obj = $(this);
  24.  
  25. 				obj.append('<ul class="sliderThumbs">');
  26. 				$('li', obj).each(function (index) {
  27. 					$('.sliderThumbs', obj).append('<li>' + $(this).children('img').attr('alt') + '</li>'); 	
  28. 			    });
  29. 				$('.sliderThumbs li', obj).last().addClass('active');
  30.  
  31. 				$('.sliderThumbs li', obj).live('click', function(){
  32. 					clearTimeout(t);
  33.  
  34. 					if( $('.sliderContent li:visible', obj).index() > $(this).index() )
  35. 						$('.sliderContent li', obj).eq($(this).index()).show().siblings().fadeOut(600);
  36. 					else
  37. 						$('.sliderContent li', obj).eq($(this).index()).fadeIn(600, function(){ $(this).siblings().hide(); });
  38.  
  39. 					$('.sliderThumbs li.active', obj).removeClass('active');
  40. 					$(this).addClass('active', obj);
  41. 				});
  42.  
  43. 				var sliderNext = function() {
  44. 					if(!$(".sliderThumbs li", obj).last().hasClass('active'))
  45. 				    	$(".sliderThumbs li.active", obj).next().click();
  46. 					else
  47. 						$(".sliderThumbs li", obj).eq(0).click();
  48.  
  49. 					t = setTimeout(sliderNext, 5000);
  50. 				}
  51. 				sliderNext();
  52. 			});
  53. 		}
  54. 	});    
  55. })(jQuery);

URL: http://t3.madcity.at

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.