jQuery issue with adding & removing classes w/special effects

[ingero]

I am attempting to customize a jQuery script to suit my needs here. Here is the original demo & source code. As you can see, the original version uses thumbnail images. I would like to simply change that to a text link. Also, just to note that I am using "no conflict" which changes all of the calls from $ to $j.

The thumbnail image requires a class "nav-thumb" added to it in order for it to work, so I have simply added this class to the link. That seems to work okay, except as the slideshow scrolls through it does not remove the class from the previous panel, so by the end all 5 of my buttons have the "active-thumb" class added to them when there should only be one at any given time. You also cannot just click on any of the links and have that one append the "active-thumb" class.

I'm pretty sure if anything needs to be changed, it's the function call. Here's what I have:

<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/thickbox.js"></script>
<script type="text/javascript" src="assets/js/jquery-easing-1.3.js"></script>
<script type="text/javascript" src="assets/js/jquery-easing-compatibility.1.2.js"></script>
<script type="text/javascript" src="assets/js/coda-slider.1.1.1.js"></script>
	<script type="text/javascript">
		var $j = jQuery.noConflict();
		var theInt = null;
		var $crosslink, $navthumb;
		var curclicked = 0;
		
		theInterval = function(cur){
			clearInterval(theInt);
			
			if( typeof cur != 'undefined' )
				curclicked = cur;
			
			$crosslink.removeClass("active-thumb");
			$navthumb.eq(curclicked).parent().addClass("active-thumb");
				$j(".stripNav ul li a").eq(curclicked).trigger('click');
			
			theInt = setInterval(function(){
				$crosslink.removeClass("active-thumb");
				$navthumb.eq(curclicked).parent().addClass("active-thumb");
				$j(".stripNav ul li a").eq(curclicked).trigger('click');
				curclicked++;
				if( 6 == curclicked )
					curclicked = 0;
				
			}, 3000);
		};
		
		$j(function(){
			
			$j("#main-photo-slider").codaSlider();
			
			$navthumb = $j(".nav-thumb");
			$crosslink = $j(".cross-link");
			
			$navthumb
			.click(function() {
				var $this = $j(this);
				theInterval($this.parent().attr('href').slice(1) - 1);
				return false;
			});
			
			theInterval();
		});
	</script>

And here's my panel code:

<div id="page-wrap"><!--page-wrap-->
											
	<div class="slider-wrap"><!--slider-wrap-->
		<div id="main-photo-slider" class="csw">
			<div class="panelContainer">

				<div class="panel" title="Panel 1">
					<div class="wrapper">
						<img src="assets/images/billboard/01.jpg" alt="temp" />
						<div class="photo-meta-data">
							Cornerstone at Summerport<br>
							<span>Windemere, FL</span>
						</div>
					</div>
				</div>
				<div class="panel" title="Panel 2">
					<div class="wrapper">
						<img src="assets/images/billboard/01.jpg" alt="temp" />
						<div class="photo-meta-data">
							Cornerstone at Summerport<br>
							<span>Windemere, FL</span>
						</div>
					</div>
				</div>		
				<div class="panel" title="Panel 3">
					<div class="wrapper">
						
						<img src="assets/images/billboard/01.jpg" alt="temp" />
						<div class="photo-meta-data">
							Cornerstone at Summerport<br>
							<span>Windemere, FL</span>
						</div>
					</div>
				</div>
				<div class="panel" title="Panel 4">
					<div class="wrapper">
						<img src="assets/images/billboard/01.jpg" alt="temp" />
						<div class="photo-meta-data">
							Cornerstone at Summerport<br>
							<span>Windemere, FL</span>
						</div>
					</div>
				</div>
				<div class="panel" title="Panel 5">
					<div class="wrapper">
						<img src="assets/images/billboard/01.jpg" alt="temp" />
						<div class="photo-meta-data">
							Cornerstone at Summerport<br>
							<span>Windemere, FL</span>
						</div>
					</div>
				</div>

			</div>
		</div>

		
		<div id="movers-row">
                        <div><a href="#1" class="cross-link active-thumb nav-thumb">1</a></div>
			<div><a href="#2" class="cross-link nav-thumb">2</a></div>
			<div><a href="#3" class="cross-link nav-thumb">3</a></div>
			<div><a href="#4" class="cross-link nav-thumb">4</a></div>
			<div><a href="#5" class="cross-link nav-thumb">5</a></div>
		</div>

	</div><!--slider-wrap-->
	
	</div><!--page-wrap-->

Any help would be much obliged!

[KDLA]

This looks suspicious:

$crosslink.removeClass("active-thumb");
			$navthumb.eq(curclicked).parent().addClass("active-thumb");

Should the second instance be the non-active state?

[ingero]

That's what I thought, too, KDLA. When I change them, it will remove the class, but then it won't add them to the next panel which is active.

[ingero]

Original code from author:

			$crosslink.removeClass("active-thumb");
			$navthumb.eq(curclicked).parent().addClass("active-thumb");
				$j(".stripNav ul li a").eq(curclicked).trigger('click');
			
			theInt = setInterval(function(){
				$crosslink.removeClass("active-thumb");
				$navthumb.eq(curclicked).parent().addClass("active-thumb");

Let me know if you think I should try any other combination.



No change to aforementioned problem, all links eventually have the active-thumb class applied:

			$crosslink.removeClass("active-thumb");
			$navthumb.eq(curclicked).parent().removeClass("active-thumb");
				$j(".stripNav ul li a").eq(curclicked).trigger('click');
			
			theInt = setInterval(function(){
				$crosslink.removeClass("active-thumb");
				$navthumb.eq(curclicked).parent().removeClass("active-thumb");

All links eventually have the active-thumb class added to it.

			$crosslink.addClass("active-thumb");
			$navthumb.eq(curclicked).parent().removeClass("active-thumb");
				$j(".stripNav ul li a").eq(curclicked).trigger('click');
			
			theInt = setInterval(function(){
				$crosslink.removeClass("active-thumb");
				$navthumb.eq(curclicked).parent().removeClass("active-thumb");

Puts the active-thumb class on the first link, but ignores the rest.

			$crosslink.removeClass("active-thumb");
			$navthumb.eq(curclicked).parent().addClass("active-thumb");
				$j(".stripNav ul li a").eq(curclicked).trigger('click');
			
			theInt = setInterval(function(){
				$crosslink.addClass("active-thumb");
				$navthumb.eq(curclicked).parent().removeClass("active-thumb");

active-thumb class is not applied to any links:

			$crosslink.addClass("active-thumb");
			$navthumb.eq(curclicked).parent().removeClass("active-thumb");
				$j(".stripNav ul li a").eq(curclicked).trigger('click');
			
			theInt = setInterval(function(){
				$crosslink.addClass("active-thumb");
				$navthumb.eq(curclicked).parent().removeClass("active-thumb");

[ingero]

Also, any clues about adding a pause link too?

[ingero]

Hmm, the links do not seem to be working either.