js previous link not working

**gluttonous_pet** · Mar 22, 2011 05:15

Hi, I have some jquery functionality in place where by clicking on "more" a div replaces the old div. This works fine but I can#t seem to
get the "previous" link to work, it simply refreshes the current content instead of replacing the div with the old one.

Here's the code. Any help would be much appreciated:

HTML Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){

//Larger thumbnail preview 

$("ul.thumb li").hover(function() {
	$(this).css({'z-index' : '10'});
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-40px', 
			marginLeft: '-40px', 
			top: '50%', 
			left: '50%', 
			//width: '174px', 
			//height: '174px',
			width: '70px', 
			height: '66px',
			//padding: '20px'
		}, 200);
	
	} , function() {
	$(this).css({'z-index' : '0'});
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', 
			marginLeft: '0',
			top: '0', 
			left: '0', 
			//width: '100px', 
			//height: '100px',
			width: '65px', 
			height: '58px', 
			//padding: '5px'
		}, 400);
});

//Swap Image on Click
	$("ul.thumb li a").click(function() {
		
		var mainImage = $(this).attr("href"); //Find Image Name
		$("#main_view img").attr({ src: mainImage });
		return false;		
	});
 
});

        $(function()
        {

 $('div.showarea').fadeOut(0);
    $('div.showarea:first').fadeIn(500);
    
    $('a.leftarrow, a.rightarrow').click( function (ev) {
        //prevent browser jumping to top
        ev.preventDefault();

        //get current visible item
        var $visibleItem = $('div.showarea:visible');
        
        //get total item count
        var total =  $('div.showarea').length;

        //get index of current visible item
        var index = $visibleItem.prevAll().length;
          
        //if we click next increment current index, else decrease index
        $(this).attr('href') === '#carouselNext' ? index++ : index--;
		
		//if we click next increment current index, else decrease index
        //$(this).attr('href') === '#carouselPrev' ? index-- : index++;

        //if we are now past the beginning or end show the last or first item
        if (index === -1){
           index = total-1;
        }
        if (index === total){
           index = 0
        }
        
        //hide current show item
        $visibleItem.hide();

        //fade in the relevant item
        $('div.showarea:eq(' + index + ')').fadeIn(500);
    
    });

        });
</script>


    <div class="maincarousel">
       <div class="showarea">
	   
			<div class="container">
			
			<div id="main_view">
			<a href="#" title="" target="_blank"><img src="images/test.jpg" alt="" /></a><br />
			</div>
			
			<ul class="thumb">
			
				<li><a href="images/test-1.jpg"><img src="images/test-1.jpg" alt="" /></a></li>
				<li><a href="images/test-2.jpg"><img src="images/test-2.jpg" alt="" /></a></li>
				<li><a href="images/test-3.jpg"><img src="images/test-3.jpg" alt="" /></a></li>
				<li><a href="#carouselNext" class="rightarrow" title="Next">More</a></li>
			
			</ul>
			</div> 
	   
	   </div>
	   
    <div class="maincarousel">
       <div class="showarea">
	   
			<div class="container">
			
			<div id="main_view">
			<a href="#" title="" target="_blank"><img src="images/test-1.jpg" alt="" /></a><br />
			</div>
			
			<ul class="thumb">
			
				<li><a href="images/test-1.jpg"><img src="images/test-1.jpg" alt="" /></a></li>
				<li><a href="images/test-2.jpg"><img src="images/test-2.jpg" alt="" /></a></li>
				<li><a href="images/test-3.jpg"><img src="images/test-3.jpg" alt="" /></a></li>
				<li><a href="#carouselPrev" class="leftarrow" title="Previous">Previous</a></li>
			
			</ul>
			</div>  
	   
	   </div>