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