...

View Full Version : Easy question I hope, Change CSS class for 'active' state



numethod
12-29-2009, 09:21 PM
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:



/*
* 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:


<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



$(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.

tomws
12-29-2009, 10:50 PM
You may be interested in using something like toggleClass() (http://docs.jquery.com/Attributes/toggleClass) in the click event.

numethod
12-29-2009, 11:29 PM
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.

tomws
12-30-2009, 02:17 AM
I notice that version 1.7 of the plugin (you have 1.5) includes the pagination support.
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

Check that out and see if it already does what you want.

numethod
12-30-2009, 04:59 PM
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 =)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum