SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Location
    Fort Lauderdale, FL
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Updating EasySlider 1.7 to First SlideShow ...

    Hi all ... Any help's appreciated ...

    The challenge is that I have three - three page sliders ... each one is actually being called on a list item external to the easySlider function ...(#sliderNav ul li a#s1, #s2, #s3)

    When I navigate from one slide show to the next ... I need to send a callback to rewind each slideshow to the first page and reflect the current change to the numeric 'a' attr ...

    I don't quite know how to properly structure a callback function to update the current list item index from within the click event ...

    Any suggestions would KINDLY be appreciated cause I think I'm a bit over my JavaScript - JQuery skills threshold with this ...

    Thanks in advance and if you are way too busy to assist I completely understand ...

    Code JavaScript:
    (function($) {
     
    	$.fn.easySlider = function(options){
     
    		// default configuration properties
    		var defaults = {			
    			prevId: 		'prevBtn',
    			prevText: 		'Previous',
    			nextId: 		'nextBtn',	
    			nextText: 		'Next',
    			controlsShow:	true,
    			controlsBefore:	'',	
    			controlsAfter:	'',	
    			controlsFade:	true,
    			firstId: 		'firstBtn',
    			firstText: 		'First',
    			firstShow:		false,
    			lastId: 		'lastBtn',	
    			lastText: 		'Last',
    			lastShow:		false,				
    			vertical:		false,
    			speed: 			800,
    			auto:			false,
    			pause:			2000,
    			continuous:		false, 
    			numeric: 		false,
    			numericId: 		'controls',
    			className:''			
    		}; 
     
    		var options = $.extend(defaults, options);  
     
    		this.each(function() {  
    			var obj = $(this); 				
    			var s = $("li", obj).length;
    			var w = $("li", obj).width(); 
    			var h = $("li", obj).height(); 
    			var clickable = true;
    			obj.width(w); 
    			obj.height(h); 
    			obj.css("overflow","hidden");
    			var ts = s-1;
    			var t = 0;
    			$("ul", obj).css('width',s*w);			
     
    			if(options.continuous){
    				$("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left","-"+ w +"px"));
    				$("ul", obj).append($("ul li:nth-child(2)", obj).clone());
    				$("ul", obj).css('width',(s+1)*w);
    			};				
     
    			if(!options.vertical) $("li", obj).css('float','left');
     
    			if(options.controlsShow){
    				var html = options.controlsBefore;				
    				if(options.numeric){
    					html += '<ol id="'+ options.numericId +'" class="' + options.className + '"></ol>';
    				} else {
    					if(options.firstShow) html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';
    					html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>';
    					html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>';
    					if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';				
    				};
     
    				html += options.controlsAfter;						
    				$(obj).after(html);										
    			};
     
    			if(options.numeric){									
    				for(var i=0;i<s;i++){						
    					$(document.createElement("li"))
    						.attr('id',options.numericId + (i+1))
    						.attr('class',options.className)
    						.html('<a rel='+ i +' href=\"javascript:void(0);\">'+ (i+1) +'</a>')
    						.appendTo($("#" + options.numericId))
    						.click(function(){							
    							animate($("a",$(this)).attr('rel'),true);
    						}); 												
    				};							
    			} else {
    				$("a","#"+options.nextId).click(function(){		
    					animate("next",true);
    				});
    				$("a","#"+options.prevId).click(function(){		
    					animate("prev",true);				
    				});	
    				$("a","#"+options.firstId).click(function(){		
    					animate("first",true);
    				});				
    				$("a","#"+options.lastId).click(function(){		
    					animate("last",true);				
    				});				
    			};
     
    			function setCurrent(i){
    				i = parseInt(i)+1;
    				$("li", "#" + options.numericId).removeClass("current");
    				$("li#" + options.numericId + i).addClass("current");
    			};
     
    			function adjust(){
    				if(t>ts) t=0;		
    				if(t<0) t=ts;	
    				if(!options.vertical) {
    					$("ul",obj).css("margin-left",(t*w*-1));
    				} else {
    					$("ul",obj).css("margin-left",(t*h*-1));
    				}
    				clickable = true;
    				if(options.numeric) setCurrent (t);			
    			};
     
    			function animate(dir,clicked){
    				if (clickable){
    					clickable = false;
    					var ot = t;	
    					t = parseInt(t);				
    					switch(dir){
    						case "next":
    							t = (ot>=ts) ? (options.continuous ? t+1 : ts) : t+1;						
    							break; 
    						case "prev":
    							t = (t<=0) ? (options.continuous ? t-1 : 0) : t-1;
    							break; 
    						case "first":
    							t = 0;
    							break; 
    						case "last":
    							t = ts;
    							break; 
    						default:
    							t = dir;
    							break; 
    					};	
    					var diff = Math.abs(ot-t);
    					var speed = diff*options.speed;						
    					if(!options.vertical) {
    						p = (t*w*-1);
    						$("ul",obj).animate(
    							{ marginLeft: p }, 
    							{ queue:false, duration:speed, complete:adjust }
    						);				
    					} else {
    						p = (t*h*-1);
    						$("ul",obj).animate(
    							{ marginTop: p }, 
    							{ queue:false, duration:speed, complete:adjust }
    						);					
    					};
     
    					if(!options.continuous && options.controlsFade){					
    						if(t==ts){
    							$("a","#"+options.nextId).hide();
    							$("a","#"+options.lastId).hide();
    						} else {
    							$("a","#"+options.nextId).show();
    							$("a","#"+options.lastId).show();					
    						};
    						if(t==0){
    							$("a","#"+options.prevId).hide();
    							$("a","#"+options.firstId).hide();
    						} else {
    							$("a","#"+options.prevId).show();
    							$("a","#"+options.firstId).show();
    						};					
    					};				
     
    					if(clicked) clearTimeout(timeout);
    					if(options.auto && dir=="next" && !clicked){;
    						timeout = setTimeout(function(){
    							animate("next",false);
    						},diff*options.speed+options.pause);
    					};
     
    				};
     
    			};
    			// init
    			var timeout;
    			if(options.auto){;
    				timeout = setTimeout(function(){
    					animate("next",false);
    				},options.pause);
    			};		
     
    			if(options.numeric) setCurrent(0);
     
    			if(!options.continuous && options.controlsFade){					
    				$("a","#"+options.prevId).hide();
    				$("a","#"+options.firstId).hide();				
    			};				
     
    		});
     
    	};
     
    })(jQuery);

    Here's what I have to control the slideshows ....

    Code JavaScript:
    $(function()
    						{	
    					$("#slideShow").easySlider(
    						{
    						controlsShow:true,
    						speed:100,
    						numeric:true,
    						numericId:'controls',
    						className:"sone",
    						firstId:'p1'
    						});	
    						$('.stwo, .sthree').hide();
    						$('.sone').show();						 
    						$('#s1').click(
    					function()
    						{
    						$('.sone').show();
    						$('.stwo, .sthree').hide();
    						});
    					$('#s2').click(
    					function()
    						{
    							$('#slideShowTwo').easySlider(
    						{	
    						controlsShow:true,
    						speed:100,
    						numeric:true,
    						numericId:'controlsTwo',
    						className:'stwo',
    						firstId:'p4'
    						});
    						$('.stwo').show();
    						$('.sone, .sthree').hide();
    						});
    					$('#s3').click(
    					function()
    						{		
    						$('#slideShowThree').easySlider(
    						{
    						controlsShow:true,
    						speed:100,
    						numeric:true,
    						numericId:'controlsThree',
    						className:'sthree',
    						firstId:'p7'				
    						});				
    						$('.sthree').show();
    						$('.sone, .stwo').hide();
     
    						});
    });

    The HTML ...

    Code HTML4Strict:
    <div id="sliderNav">
    		<ul>
    				<li><a href="#p1" id="s1" rel="1">SEO</a></li>
    				<li><a href="#p4" id="s2" rel="1">Design</a></li>
    				<li><a href="#p7" id="s3" rel="1">Develop</a></li>
    		</ul>
    </div>
    <div id="slideShow" class="sone">
    		<ul>                
    				<li id="p1"><!--<li>Slide One</li>-->
    				<div class="h2">This is The Main Page</div>
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
    				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
    				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
    				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
    				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
    				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
    				purus lectus. Maecenas tempor ornare sollicitudin.
    				</li>
     
    				<li id="p2">
    				<div class="h2">This is Page Two</div>
    				Here's the second portion of the content.
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
    				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
    				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
    				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
    				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
    				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
    				purus lectus. Maecenas tempor ornare sollicitudin.
    				</li>
     
    			 <li id="p3">
    				<div class="h2">This is Page Three</div>
    				Here's the third  portion of the content.
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
    				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
    				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
    				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
    				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
    				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
    				purus lectus. Maecenas tempor ornare sollicitudin.
    				</li>
    		</ul>
    </div><!-- </div id="slideShow">-->
     
    <div id="slideShowTwo" class="stwo">
    		<ul>       								 
    				<li id="p4"><!--<li>Slide Two</li>-->
     
    				<div class="h2">This is Slideshow 2 Page One</div>
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
    				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
    				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
    				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
    				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
    				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
    				purus lectus. Maecenas tempor ornare sollicitudin.
    				</li>
     
    				<li id="p5">
    				<div class="h2">This is Slideshow 2 Page Two</div>
    				Here's the second portion of the content.
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
    				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
    				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
    				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
    				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
    				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
    				purus lectus. Maecenas tempor ornare sollicitudin.
    				</li>
     
    			  <li id="p6">
    				<div class="h2">This is Slideshow 2 Page Three</div>
    				Here's the third  portion of the content.
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
    				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
    				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
    				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
    				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
    				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
    				purus lectus. Maecenas tempor ornare sollicitudin.</li>
    				</ul>
     
    </div><!-- </div id="slideShowTwo">-->
    <div id="slideShowThree" class="sthree">
    		<ul>            
    				<li id="p7"><!--<li>Slide Three</li>-->
    				<div class="h2">This is Slideshow 3 Page One</div>
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
    				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
    				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
    				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
    				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
    				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
    				purus lectus. Maecenas tempor ornare sollicitudin.
    				</li>
     
    				<li id="p8">
    				<div class="h2">This is Slideshow 3 Page Two</div>
    				Here's the second portion of the content.
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
    				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
    				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
    				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
    				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
    				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
    				purus lectus. Maecenas tempor ornare sollicitudin.
    				</li>
     
    			 <li id="p9">
    				<div class="h2">This is Slideshow 3 Page Three</div>
    				Here's the third  portion of the content.
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    				Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc.
    				Nam et lacus neque. Sed volutpat ante id mauris laoreet vestibulum. 
    				Nam blandit felis non neque cursus aliquet. Morbi vel enim dignissim massa dignissim 
    				commodo vitae quis tellus. Nunc non mollis nulla. Sed consectetur elit id mi 
    				consectetur bibendum. Ut enim massa, sodales tempor convallis et, iaculis ac massa. 
    				Etiam suscipit nisl eget lorem pellentesque quis iaculis mi mattis. Aliquam sit amet  
    				purus lectus. Maecenas tempor ornare sollicitudin.
    				</li>
    		</ul>
    </div><!-- </div id="slideShowThree">-->

    And my CSS ...

    Code CSS:
     
    /*=======* Slider Navigation *=======*/
     
    #sliderNav {
     
    	margin:12em 0 0 0;
     
    	float:left;
    }
     
    #sliderNav ul{
    	font:bold 1.8em "Century Gothic", "Arial Black";	
    	padding:0;
    	margin:0;
    	text-align:left;
    	list-style:none;
     
    }
     
    #sliderNav ul li{
    	padding:0;
    	margin:0 0 4.3em 0;
    	display:block;
    }
     
    #sliderNav ul li a{
    	text-decoration:none;
    	color:#0b1528;
    }
     
    #sliderNav ul li a:hover{
    	color:#fff;
    }
     
    /*=======* Layout *=======*/
     
    .h2{
    	font:bold 2em/20px "Century Gothic", "Arial Black";
    	margin:0 .25em .5em	;
    	padding:0;
     
    }
     
    /* Easy Slider */
     
    #slideShow{
     
    	margin:8em 0 0 10em;
     
    	font:1.6em "Century Gothic", "Arial Black";	
    	padding:0;
    	overflow:hidden;
     
    }
     
    	#slideShow ul, #slideShow li,
    	#slideShow2 ul, #slideShow2 li{
     
    		margin:0;
    		padding:0;
    		list-style-type:none;
     
    }
    	#slideShow2{margin-top:1em;}
    	#slideShow li, #slideShow2 li{ 
    		/* 
    			define width and height of list item (slide)
    			entire slider area will adjust according to the parameters provided here
    		*/ 
    		margin:0;
    		padding:0;
    		width:700px;
    		height:300px;
    		overflow:hidden;
     
    		}	
     
    	#prevBtn, #nextBtn,
    	#slideShow1next, #slideShow1prev{ 
    		display:block;
    		width:30px;
    		height:77px;
    		position:absolute;
    		left:163px;
    		top:225px;
    		z-index:1000;
    		outline:1px solid #006;
    		}	
    	#nextBtn, #slideShow1next{ 
    		left:807px;
    		}														
    	#prevBtn a, #nextBtn a,
    	#slideShow1next a, #slideShow1prev a{  
    		display:block;
    		position:relative;
    		width:30px;
    		height:77px;
    		background:url(../easyslider1.7/images/btn_prev.gif) no-repeat 0 0;	
    		}	
    	#nextBtn a, #slideShow1next a{ 
    		background:url(../easyslider1.7/images/btn_next.gif) no-repeat 0 0;	
    		}	
     
    	/* numeric controls */	
     
    	ol#controls{
     
    		float:right;
    	  width:120px;	
    		margin:-25em 0 150px 0;
    		padding:0;
    		height:28px;
    		outline:1px solid #FF0;
    		display:inline;	
    		}
     
    	ol#controls li{
     
    		margin:10px; 
    		padding:0;
    		list-style:none;
    		height:28px;
    		line-height:28px;
    		}
     
    	ol#controls li a{
    		float:right;
    		height:28px;
    		line-height:28px;
    		border:1px solid #ccc;
    		background:#DAF3F8;
    		color:#555;
    		padding:0 10px;
    		text-decoration:none;
    		}
    	ol#controls li.current a{
    		background:#5DC9E1;
    		color:#fff;
    		}
    	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
     
    /* // Easy Slider */
     
    #slideShowTwo{
     
    	margin:8em 0 0 10em;
     
    	font:1.6em "Century Gothic", "Arial Black";	
    	padding:0;
    	overflow:hidden;
     
    }
     
    	#slideShowTwo ul, #slideShowTwo li,
    	#slideShowTwo2 ul, #slideShowTwo2 li{
     
    		margin:0;
    		padding:0;
    		list-style-type:none;
     
    }
    	#slideShowTwo2{margin-top:1em;}
    	#slideShowTwo li, #slideShowTwo2 li{ 
    		/* 
    			define width and height of list item (slide)
    			entire slider area will adjust according to the parameters provided here
    		*/ 
    		margin:0;
    		padding:0;
    		width:700px;
    		height:300px;
    		overflow:hidden;
     
    		}	
     
    	#prevBtn, #nextBtn,
    	#slideShowTwo1next, #slideShowTwo1prev{ 
    		display:block;
    		width:30px;
    		height:77px;
    		position:absolute;
    		left:163px;
    		top:225px;
    		z-index:1000;
    		outline:1px solid #006;
    		}	
    	#nextBtn, #slideShow1next{ 
    		left:807px;
    		}														
    	#prevBtn a, #nextBtn a,
    	#slideShowTwo1next a, #slideShowTwo1prev a{  
    		display:block;
    		position:relative;
    		width:30px;
    		height:77px;
    		background:url(../easyslider1.7/images/btn_prev.gif) no-repeat 0 0;	
    		}	
    	#nextBtn a, #slideShowTwo1next a{ 
    		background:url(../easyslider1.7/images/btn_next.gif) no-repeat 0 0;	
    		}	
     
    	/* numeric controls */	
     
    	ol#controlsTwo {
     
    		float:right;
    	  width:120px;	
    		margin:-25em 0 150px 0;
    		padding:0;
    		height:28px;
    		outline:1px solid #006;	
    		display:inline;
    		}
     
    	ol#controlsTwo li{
     
    		margin:10px; 
    		padding:0;
    		list-style:none;
    		height:28px;
    		line-height:28px;
    		}
     
    	ol#controlsTwo li a{
    		float:right;
    		height:28px;
    		line-height:28px;
    		border:1px solid #ccc;
    		background:#DAF3F8;
    		color:#555;
    		padding:0 10px;
    		text-decoration:none;
    		}
    	ol#controlsTwo li.current a{
    		background:#5DC9E1;
    		color:#fff;
    		}
    	ol#controlsTwo li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
     
    /* // Easy Slider */
     
    #slideShowThree{
     
    	margin:8em 0 0 10em;
     
    	font:1.6em "Century Gothic", "Arial Black";	
    	padding:0;
    	overflow:hidden;
     
    }
    	#slideShowThree ul, #slideShowThree li,
    	#slideShowThree2 ul, #slideShowThree2 li{
     
    		margin:0;
    		padding:0;
    		list-style-type:none;
     
    }
    	#slideShowThree2{margin-top:1em;}
    	#slideShowThree li, #slideShowThree2 li{ 
    		/* 
    			define width and height of list item (slide)
    			entire slider area will adjust according to the parameters provided here
    		*/ 
    		margin:0;
    		padding:0;
    		width:700px;
    		height:300px;
    		overflow:hidden;
     
    		}	
     
    	#prevBtn, #nextBtn,
    	#slideShowThree1next, #slideShowThree1prev{ 
    		display:block;
    		width:30px;
    		height:77px;
    		position:absolute;
    		left:163px;
    		top:225px;
    		z-index:1000;
    		outline:1px solid #006;
    		}	
    	#nextBtn, #slideShow1next{ 
    		left:807px;
    		}														
    	#prevBtn a, #nextBtn a,
    	#slideShowThree1next a, #slideShowThree1prev a{  
    		display:block;
    		position:relative;
    		width:30px;
    		height:77px;
    		background:url(../easyslider1.7/images/btn_prev.gif) no-repeat 0 0;	
    		}	
    	#nextBtn a, #slideShowThree1next a{ 
    		background:url(../easyslider1.7/images/btn_next.gif) no-repeat 0 0;	
    		}	
     
    	/* numeric controls */	
     
    	ol#controlsThree {
     
    		float:right;
    	  width:120px;	
    		margin:-25em 0 150px 0;
    		padding:0;
    		height:28px;
    		outline:1px solid #F0F;	
    		display:inline;
    		}
     
    	ol#controlsThree li{
     
    		margin:10px; 
    		padding:0;
    		list-style:none;
    		height:28px;
    		line-height:28px;
    		}
     
    	ol#controlsThree li a{
    		float:right;
    		height:28px;
    		line-height:28px;
    		border:1px solid #ccc;
    		background:#DAF3F8;
    		color:#555;
    		padding:0 10px;
    		text-decoration:none;
    		}
    	ol#controlsThree li.current a{
    		background:#5DC9E1;
    		color:#fff;
    		}
    	ol#controlsThree li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
     
    /* // Easy Slider */
     
     
    /*=======* Panel Navigation *=======*/
     
    .panelNav{	
     
    	top:0; 
    	left:550px;
    	margin:5em 0;
    	float:right;	
    }

  2. #2
    SitePoint Member
    Join Date
    Mar 2007
    Location
    Fort Lauderdale, FL
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I finally figured out where to put my callback for anyone who's interested ...

    It was trivial once I spent some time considering the callback ...

    All I had to do was attached a click event to the divs that I wanted to reset the slide shows on ... and setup a callback to the animate function ...

    I Just added the callback to the (options.numeric) if statement

    Code JavaScript:
     
        if(options.numeric) 
            $('#s1,#s2,#s3').bind('click',function(){
            animate("first",true);
            setCurrent(0);
        });


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •