Add counter to jquery slider

**bigalo** · 12-16-2009, 05:42 PM

Hello,
I need some help. I have some code to create a slider. Now I want to add a counter functionality to what I currently have. (i.e. 1 of 9). Could someone help?

Thanks!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Plugin : Content Slider</title>
<script type="text/javascript" src="jquery.js"></script>
<script>
(function($){
	$.fn.imageSlider = function(options) {

		var defaults = {
			auto: null,		//auto run the image slider. set to milliseconds
			btnPrev: null,	//pass in the element's class to create navigation button i.e. btnPrev: ".prev"
			btnNext: null,	//pass in the element's class to create navigation button i.e. btnNext: ".next"
			
			btnGo: null,	/*supply an array of selectors for each element in the image slider. The index 
							of the array represents the index of the element. If the first element in the 
							array is ".0", it means that when the element represented by ".0" is clicked,
							the image slider will slide to the first element and so on. i.e. btnGo: [".0", ".1", ".2"]*/
							
			easing: null,	//the animation effect you want preformed. will take same values as "show" in jQuery
			loop: true,		//if set to true the images will continue to loop and not end
			vertical: false,
			visible: 3,		//number of images to be displayed
			scroll: 1,		//scroll by this number of images
			specUl: null,
			speed: 400,
			start: 0,		//start at this image position (starts at 0)
			
			//Callback funtions
			beforeStart: null,
			afterEnd: null
		};

		var options = $.extend(defaults, options);

		return this.each(function() {
			var running = false, animCss=options.vertical?"top":"left", sizeCss=options.vertical?"height":"width";
			var div = $(this), ul = options.specUl ? $("ul" + options.specUl, div) : $("ul", div), liCollection = $("li", ul), liCollectionLen = liCollection.length, v = options.visible;
			
			if(options.loop) {
				ul.prepend(liCollection.slice(liCollectionLen-v-1+1).clone())
				  .append(liCollection.slice(0,v).clone());
				options.start += v;
			}
	
			var li = $("li", ul), liLen = li.length, curr = options.start;
	
			li.css({overflow: "hidden", float: options.vertical ? "none" : "left"});
			ul.css({margin: "0", padding: "0", position: "relative", "z-index": "1", left: "0px"});
			div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});

			var liSize = options.vertical ? li.outerHeight(true) : li.outerWidth(true);		// Full li size(incl margin)-Used for animation
			var ulSize = liSize * liLen;	// size of full ul(total length, not just for the visible items)
			var divSize = liSize * v;	// size of div(total length for just the visible items)

			ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));
			div.css(sizeCss, divSize+"px");		// Width of the DIV. length of visible images
	
			if(options.btnPrev)
				$(options.btnPrev).unbind('click');
				$(options.btnPrev).click(function(event) {
					event.preventDefault();
					return go(curr-options.scroll);
				});
	
			if(options.btnNext)
				$(options.btnNext).unbind('click');
				$(options.btnNext).click(function(event) {
					event.preventDefault();
					return go(curr+options.scroll);
				});
	
			if(options.btnGo)
				$.each(options.btnGo, function(i, val) {
					$(val).click(function() {
						return go(options.loop ? options.visible+i : i);
					});
				});

			if(options.auto)
				setInterval(function() {
					go(curr+options.scroll);
				}, options.auto);

			function vis() {
				return li.slice(curr).slice(0,v);
			};
	
			function go(to) {
				if(!running) {
	
					if(options.beforeStart)
						options.beforeStart.call(this, vis());
	
					if(options.loop) {            // If loop we are in first or last, then goto the other end
						if(to<=options.start-v-1) {           // If first, then goto last
							ul.css(animCss, -((liLen-(v*2))*liSize)+"px");
							// If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
							curr = to==options.start-v-1 ? liLen-(v*2)-1 : liLen-(v*2)-options.scroll;
						} else if(to>=liLen-v+1) { // If last, then goto first
							ul.css(animCss, -( (v) * liSize ) + "px" );
							// If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
							curr = to==liLen-v+1 ? v+1 : v+options.scroll;
						} else curr = to;
					} else {                    // If non-loop and to points to first or last, we just return.
						if(to<0 || to>liLen-v) return;
						else curr = to;
					}                           // If neither overrides it, the curr will still be "to" and we can proceed.
	
					running = true;

					ul.animate(
						animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , options.speed, "linear",
						function() {
							if(options.afterEnd)
								options.afterEnd.call(this, vis());
							running = false;
						}
					);
					// Disable buttons when the carousel reaches the last/first, and enable when not
					if(!options.loop) {
						$(options.btnPrev + "," + options.btnNext).removeClass("disabled");
						$( (curr-options.scroll<0 && options.btnPrev)
							||
						   (curr+options.scroll > liLen-v && options.btnNext)
							||
						   []
						 ).addClass("disabled");
					}
	
				}
				return false;
			};
		});
	};
	
})(jQuery);
</script>
<style type="text/css">
.slider {
	overflow:auto
}
.slider .slider-window {
	border:1px solid #ccc;
	margin:0;
	padding:10px 0 10px 10px;
	float:left;
	overflow:auto
}
.slider ul {
	list-style:none;
	margin:0;
	padding:0;
}
.slider li {
	border:1px solid #ccc;
	margin-right:10px;
	text-align:center;
	width:100px;
}
.slider li a {
	text-align:center;
	text-decoration:none;
}
.slider li a img {
	border:none;
	margin-bottom:10px;
}
.slider .prev, .slider .next {
	background:url(../images/slider-dir-arrows.gif) 0 0 no-repeat;
	display:block;
	height:32px;
	float:left;
	width:13px;
	margin-top:65px;
	outline:none
}
.slider .next {
	background-position:0 -32px;
	margin-left:10px
}
.slider .prev {
	margin-right:10px
}
</style>
<script type="text/javascript">

$(document).ready(function() {
	$('.slider-window').imageSlider({
		auto: false,
		btnNext: ".next",
		btnPrev: ".prev",
		visible: 4,
		scroll: 1,
		loop: true
	});
});

</script>
</head>
<body>
<div id="container">
  <h4>Demo</h4>
  <div>Counter: 1 of 9</div>
  <br />
  <div id="slider_name" class="slider textBlock"> <a href="#" class="prev">Previous</a>
    <div class="slider-window">
      <ul>
        <li> Block 1 </li>
        <li> Block 2 </li>
        <li> Block 3 </li>
        <li> Block 4 </li>
        <li> Block 5 </li>
        <li> Block 6 </li>
        <li> Block 7 </li>
        <li> Block 8 </li>
        <li> Block 9 </li>
      </ul>
    </div>
    <a href="#" class="next">Next</a> </div>
</div>
</body>
</html>

**jscheuer1** · 12-17-2009, 07:24 AM

You will have to tweak this to have the code generate initial values, or you can just hard code them to the counter element, and perhaps a tweak or so for some of the alternate display methods will be required. But this is one way the basic math and methods can be done (additions highlighted):

Code:

						 . . . lass("disabled");
					}
					var theTo = (curr % liCollectionLen) || liCollectionLen, theFrom = curr - v + 1;
					theFrom = theFrom > -1? (theFrom % liCollectionLen || liCollectionLen) : theFrom + liCollectionLen;
					$(options.counter).html('Showing ' + theFrom + ' to ' + theTo + ' of ' + liCollectionLen);
				}
				return false;
			};
		});
	};
	
})(jQuery);
</script>

Code:

 . . . t type="text/javascript">

$(document).ready(function() {
	$('.slider-window').imageSlider({
		auto: false,
		btnNext: ".next",
		btnPrev: ".prev",
		visible: 4,
		scroll: 1,
		loop: true,
		counter: ".slider_counter"
	});
});

</script>
</head>
<body>
<div id="container">
  <h4>Demo</h4>
  <div class="slider_counter">Counter: 1 of 9</div>
  <br />

**bigalo** · 12-17-2009, 06:31 PM

Thanks John this works great! I've been playing around with generating the initial values instead of hard-coding with no luck. How would I code it to do that?

**jscheuer1** · 12-17-2009, 07:27 PM

I think we already have what we need for the script to do it for us. Just add an oninit callback:

Code:

					var theTo = (curr % liCollectionLen) || liCollectionLen, theFrom = curr - v + 1;
					theFrom = theFrom > -1? (theFrom % liCollectionLen || liCollectionLen) : theFrom +  liCollectionLen;
					$(options.counter).html('Showing ' + theFrom + ' to ' + theTo + ' of ' + liCollectionLen);
				}
				return false;
			};
			if (options.oninit){
				options.oninit.call(this, go, v);
			}
		});
	};
	
})(jQuery);
</script>

The call params may be expanded or a reference to the instance (if any, I couldn't find one right off) could be used. The this keyword apparently refers to the division. Anyways, with the above callback we can do:

Code:

<script type="text/javascript">

$(document).ready(function() {
	$('.slider-window').imageSlider({
		auto: false,
		btnNext: ".next",
		btnPrev: ".prev",
		visible: 4,
		scroll: 1,
		loop: true,
		counter: ".slider_counter",
		oninit: function(go, v){
			go(v);
		}
	});
});

</script>

The script will do the initial population of the counter element.

**bigalo** · 12-17-2009, 10:05 PM

That work great!!!! Thanks allot John!!! Once again, you came to my rescue!!!

Cheers!

Thread: Add counter to jquery slider

Thread Tools

Search Thread

Add counter to jquery slider

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions