Results 1 to 2 of 2

Thread: easy slider problem need your help

  1. #1
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default easy slider problem need your help

    i am using it zen cart, the slider worked fine till i changed all site to rtl and changed the lang and sitee css.

    i didnt touched easyslider.js html page and his css .

    if i am adding float left to slider css image is changing but not slide.

    please advice

    site: test.tunersplace.com

    thanks!!

    css:

    Code:
    #slider ul, #slider li, #slider2 ul, #slider2 li{margin:0;padding:0;list-style:none;}
    #slider2{margin-top:1em;}
    #slider li, #slider2 li{/*define width and height of list item (slide) entire slider area will adjust according to the parameters provided here */width:740px;height:340px;overflow:hidden;}    
    /*bof easy slider numeric controls*/    
    #control_div{width:200px;height:18px;position:relative;right:100px;top:-50px;}
    ol#controls{margin:1em 0;padding:0;height:18px;}
    ol#controls li{margin:0 10px 0 0;padding:0;float:left;list-style:none;height:18px;line-height:18px;}
    ol#controls li a{float:left;height:18px;line-height:18px;border:1px solid #ccc;background:#bcc0b1;color:#000;padding:0 10px;text-decoration:none;}
    ol#controls li.current a{background:#7d0b0b;color:#fff;}
    ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
    easyslider.js:

    Code:
    /*
     * 	Easy Slider 1.7 - jQuery plugin
     *	written by Alen Grakalic	
     *	http://cssglobe.com/post/4004/easy-s...in-for-sliding
     *
     *	Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)
     *	Dual licensed under the MIT (MIT-LICENSE.txt)
     *	and GPL (GPL-LICENSE.txt) licenses.
     *
     *	Built for jQuery library
     *	http://jquery.com
     *
     */
     
    /*
     *	markup example for $("#slider").easySlider();
     *	
     * 	<div id="slider">
     *		<ul>
     *			<li><img src="images/01.jpg" alt="" /></li>
     *			<li><img src="images/02.jpg" alt="" /></li>
     *			<li><img src="images/03.jpg" alt="" /></li>
     *			<li><img src="images/04.jpg" alt="" /></li>
     *			<li><img src="images/05.jpg" alt="" /></li>
     *		</ul>
     *	</div>
     *
     */
    
    (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: 			2000,
    			auto:			false,
    			pause:			3000,
    			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 += '<div id="control_div"><ol id="'+ options.numericId +'"></div></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='+ 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;				
    					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);
    php page:
    PHP Code:
    <?php     

     
              define
    (IMAGE1,'slide1a.jpg');// default width 740px height 340px /
              
    define(IMAGE2,'slide2a.jpg');
              
    define(IMAGE3,'slide3a.jpg');
              
    define(IMAGE4,'slide4a.jpg');
              
    define(IMAGE5,'slide5a.jpg');

              
    define(URL1,'http://www.example.com');
              
    define(URL2,'http://www.example.com');
              
    define(URL3,'http://www.example.com');
              
    define(URL4,'http://www.example.com');
              
    define(URL5,'http://www.example.com');


             
    ?>
            <script type="text/javascript" src="includes/templates/aberdeen_neutral/jscript/jscript_easySlider.js"></script>
            
            <script type="text/javascript">
                    $(document).ready(function(){   
                        
                            $("#slider").easySlider({
                                    auto: true, 
                                    continuous: true,
                                    numeric: true
                            });
                   });     
            </script>
      

            
                    <div id="slider" >
                            <ul>                            
                                    <li><a href="<?php echo URL1 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE$current_page_base,'images').'/'.IMAGE1 ?>"   alt="first slide image" /></a></li> 
                                    <li><a href="<?php echo URL2 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE$current_page_base,'images').'/'.IMAGE2 ?>"   alt="second slide image" /></a></li> 
                                    <li><a href="<?php echo URL3 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE$current_page_base,'images').'/'.IMAGE3 ?>"   alt="third slide image" /></a></li>  
                                    <li><a href="<?php echo URL4 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE$current_page_base,'images').'/'.IMAGE4 ?>"   alt="fourth slide image" /></a></li> 
                                    <li><a href="<?php echo URL5 ?>"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE$current_page_base,'images').'/'.IMAGE5 ?>"   alt="fifth slide image" /></a></li>                        
                            </ul>
    </div>
    Last edited by jscheuer1; 07-02-2011 at 02:05 PM. Reason: format code

  2. #2
    Join Date
    Jul 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    someone? need some help...

    Thanks

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
  •