Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Easy question I hope, Change CSS class for 'active' state

    Hello! First post at here at codingforums, hoping someone could help me out with something. I'm trying to add the ability for this jquery script to show the active state by changing the class of an <li> within the html markup. The script is a javascript image slider, here is the code:

    Code:
    /*
     * 	Easy Slider 1.5 - jQuery plugin
     *	written by Alen Grakalic	
     *	http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-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',
    			pagination: 	'#pag a',
    			nextId: 		'nextBtn',	
    			nextText: 		'Next',
    			controlsShow:	false,
    			controlsBefore:	'',
    			controlsAfter:	'',	
    			controlsFade:	true,
    			firstId: 		'firstBtn',
    			firstText: 		'First',
    			firstShow:		false,
    			lastId: 		'lastBtn',	
    			lastText: 		'Last',
    			lastShow:		false,				
    			vertical:		false,
    			speed: 			800,
    			auto:			true,
    			pause:			3500,
    			continuous:		true
    		}; 
    		
    		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(); 
    			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.vertical) $("li", obj).css('float','left');
    
    			if(options.controlsShow){
    				var html = options.controlsBefore;
    				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);										
    			};
    	
    			$("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);				
    			});		
    			
    			$(options.pagination).each(function(i){
    
    $(this).bind('click', i, function(e){
    e.preventDefault();
    if (i > t) {
    t = i-1;
    animate('next', true);
    }
    else if (i < t) {
    t = i+1;
    animate('prev', true);
    
    }
    });
    });
    			
    			function animate(dir,clicked){
    				var ot = t;				
    				switch(dir){
    					case "next":
    						t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1;						
    						break; 
    					case "prev":
    						t = (t<=0) ? (options.continuous ? ts : 0) : t-1;
    						break; 
    					case "first":
    						t = 0;
    						break; 
    					case "last":
    						t = ts;
    						break; 
    					default:
    						break; 
    				};	
    				
    				var diff = Math.abs(ot-t);
    				var speed = diff*options.speed;						
    				if(!options.vertical) {
    					p = (t*w*-1);
    					$("ul",obj).animate(
    						{ marginLeft: p }, 
    						speed
    					);
    					
    				} else {
    					p = (t*h*-1);
    					$("ul",obj).animate(
    						{ marginTop: p }, 
    						speed
    					);					
    				};
    				
    				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.continuous && options.controlsFade){					
    				$("a","#"+options.prevId).hide();
    				$("a","#"+options.firstId).hide();				
    			};				
    			
    		});
    		
    		
    	  
    	};
    
    
    function showAllImgs() {
    var obj=document.getElementsByTagName('li'), o, i=0;
    while( o = obj[i++] ) {
    o.style.display='block';
    } // end while
    } // end showAllImgs
    
    
    
    })(jQuery);
    Here is the html markup for the area:

    Code:
    <div id="slider">
    			<ul>				
    				<li><a href="#"><img src="img/slider/do-it-all-calendars.jpg" alt="Do It All Calendars" /></a></li>
    				<li><a href="#"><img src="img/slider/studio-wall-calendars.jpg" alt="Studio Wall Calendars" /></a></li>
    				<li><a href="#"><img src="img/slider/monthly-weekly-calendars.jpg" alt="Monthly-Weekly Calendars" /></a></li>
    				<li><a href="#"><img src="img/slider/gallery-series-calendars.jpg" alt="Css Template Preview" /></a></li>
    				<li><a href="#"><img src="img/slider/wall-calendars.jpg" alt="Css Template Preview" /></a></li>			
    			</ul>
    		</div>
    		<div id="pag">
    			<ul class="navigation">
    				<li><a href="#">1</a></li>
    				<li class="active"><a href="#">2</a></li>
    				<li><a href="#">3</a></li>
    				<li><a href="#">4</a></li>
    				<li><a href="#">5</a></li>
    			</ul>
    So basically, I want the active 'page' or image it is on to change the li class in the markup, as in 'class="active"'

    The pagination nav bit of the JS in the script is

    Code:
    			$(options.pagination).each(function(i){
    
    $(this).bind('click', i, function(e){
    e.preventDefault();
    if (i > t) {
    t = i-1;
    animate('next', true);
    }
    else if (i < t) {
    t = i+1;
    animate('prev', true);
    
    }
    });
    });
    So how can I add in functionality to change the <li> html markup depending on what image it is currently on?

    Thanks so much for help anyone can provide.

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    You may be interested in using something like toggleClass() in the click event.
    Are you a Help Vampire?

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm a huge novice when it comes to this stuff, any chance you could show me specifically how to implement that? Thanks for the help either way, much appreciated. -- Also, would that be able to change the class of the <li> even if there is no click? For example it rotates through the images on its own, and I'd like the css class of the pagination <li> to change along with it. So the user knows which slide they are viewing.
    Last edited by numethod; 12-29-2009 at 11:31 PM.

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    I notice that version 1.7 of the plugin (you have 1.5) includes the pagination support.
    http://cssglobe.com/post/5780/easy-s...-jquery-slider

    Check that out and see if it already does what you want.
    Are you a Help Vampire?

  • #5
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, how did I miss that? Or he must of just released it since I just grabbed it from there a couple days ago. Thanks so much for pointing out the obvious to me =)


  •  

    Tags for this Thread

    Posting Permissions

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