javascript - EasySlider1.7 - How Do I Get Arrows on a Second Slider To Function? -

-

i figured out how have 2 sliders on page other posts. final issue have prev & next arrows on second slider don't seem function.

i took page on else build first slider , not versed code @ all. i've been using wordpress years. learning go.

here page: ginaketchum.com

the code in index.html file: 

<script type="text/javascript" src="js/jquery.js"></script>  <script type="text/javascript" src="js/easyslider1.7.js"></script>  <script type="text/javascript">  		$(document).ready(function(){	  			$("#slider").easyslider({  				auto: true,   				continuous: true  			});  			$("#slider2").easyslider({  				auto: true,   				continuous: true  			});  		});	  	</script>

the code in easyslider1.7.js:

(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: 			500,  			auto:			false,  			pause:			5000,  			continuous:		false,   			numeric: 		false,  			numericid: 		'controls'  		};   		  		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 +'"></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))  						.html('<a rel='+ +' 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;				  					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);

the css file:

/*slider*/			    .graphic, #prevbtn, #nextbtn, #slider1prev, #slider1next {  margin:0;  padding:0;  display:block;  overflow:hidden;  text-indent:-8000px;  }  			  .container-slider{  margin:0 auto;  position:relative;  text-align:left;  width:900px;  background:#fff;  }    #slider ul, #slider li,  #slider2 ul, #slider2 li{  margin:0;  padding:0;  list-style:none;  }    #slider2{margin-top:1em;}    #slider li, #slider2 li{	  width:900px;  height:396px;  overflow:hidden;  }	    #prevbtn, #nextbtn,  #slider1next, #slider1prev{  display:block;  width:30px;  height:77px;  position:absolute;  left:-35px;  top:160px;  z-index:1000;  }  	  #nextbtn, #slider1next{  left:905px;  }  														  #prevbtn a, #nextbtn a,  #slider1next a, #slider1prev a{  display:block;  position:relative;  width:29px;  height:51px;  background-image: url(../images/btn_prev2.png);  background-repeat: no-repeat;  background-position: 0 0;  }  	  #nextbtn a, #slider1next a{  background-image: url(../images/btn_next2.png);  background-repeat: no-repeat;  background-position: 0 0;  }		    ol#controls{  margin:1em 0;  padding:0;  height:28px;	  }    ol#controls li{  margin:0 10px 0 0;   padding:0;  float:left;  list-style:none;  height:28px;  line-height:28px;  }    ol#controls li a{  float:left;  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;}  	  /*slider*/

change id of prev/next buttons second slider, like:

$("#slider2").easyslider({     auto: true,     continuous: true,     nextid: "slider1next",     previd: "slider1prev" });

Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more