everybody!
I have a little problem with jCarousel, so I really need your help.
Here is the gallery:
http://tranzit.dir.bg/load.php?id=TdVijCkhJSrC7CkA1273310
My question is how can I make the script so when you click on the arrows (the little black squares) the selector (the red border on the little pics) of the big images (forward and backward) to moving again forward and backward.
Now only the little images are moving… I suppose that the problem is not so big, but I can’t do it.
example: themeforest.s3.amazonaws.com/86_jquery/gallery.html
My code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<link rel="stylesheet" type="text/css" href="jcarousel_tango.css" />
<link rel="stylesheet" type="text/css" href="jcarousel_showcase.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.jcarousel.min.js"></script>
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-next').click(function() {
jQuery('.jcarousel-item').removeClass('highliht');
jQuery(this).addClass('highliht');
jQuery('.jcarousel-control a').removeClass('active');
jQuery('.jcarousel-control a#cnt-'+jQuery(this).attr('jcarouselindex')).addClass('active');
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).attr('jcarouselindex')));
return false;
});
function mycarousel_initCallbackanother(carousel) {
jQuery('.jcarousel-skin-showcase div.jcarousel-next').click(function(){
jQuery('.jcarousel-control a#cnt-1').addClass('active');
jQuery('#mycarousel li:first').addClass('highliht');
//chage position on mycarousel
});
}
}
jQuery(document).ready(function() {
jQuery('.tabcontent a#cnt-1').addClass('active');
jQuery('#mycarousel li:first').addClass('highliht');
jQuery('#mycarousel').jcarousel({
btnNext: ".next",
btnPrev: ".prev",
visible: 7,
scroll: 6,
initCallback: mycarousel_initCallback
});
jQuery('#showcasecarousel').jcarousel({
scroll: 1,
animation: 1,
initCallback: mycarousel_initCallback,
itemLoadCallback: trigger
});
function trigger(carousel, state)
{
$("#currentImg").html(carousel.first);
}
});
</script>
</head>
<body>
<div id="wrap">
<div id="postcolumn">
<!-- post zone -->
<div class="photobox">
<div id="post-213" class="photopost">
<div id="mycarousel" class="jcarousel-skin-tango">
<ul class="photos" id="photos">
<li><a class="" rel="1" href="#"><img title="" alt="" src="img/1t.jpg"></a></li>
<li><a class="" rel="2" href="#"><img title="" alt="" src="img/2t.jpg"></a></li>
<li><a class="" rel="3" href="#"><img title="" alt="" src="img/3t.jpg"></a></li>
<li><a class="" rel="4" href="#"><img title="" alt="" src="img/4t.jpg"></a></li>
<li><a class="" rel="5" href="#"><img title="" alt="" src="img/5t.jpg"></a></li>
<li><a class="" rel="6" href="#"><img title="" alt="" src="img/6t.jpg"></a></li>
<li><a class="" rel="7" href="#"><img title="" alt="" src="img/7t.jpg"></a></li>
<li><a class="" rel="8" href="#"><img title="" alt="" src="img/8t.jpg"></a></li>
<li><a class="" rel="9" href="#"><img title="" alt="" src="img/9t.jpg"></a></li>
<li><a class="" rel="10" href="#"><img title="" alt="" src="img/10t.jpg"></a></li>
<div class="clear">
</div>
</ul>
</div>
<div class="clear">
</div>
<ul id="showcasecarousel" class="jcarousel-skin-showcase">
<li><img title="" alt="" src="img/1.jpg"></a></li>
<li><img title="" alt="" src="img/2.jpg"></a></li>
<li><img title="" alt="" src="img/3.jpg"></a></li>
<li><img title="" alt="" src="img/4.jpg"></a></li>
<li><img title="" alt="" src="img/5.jpg"></a></li>
<li><img title="" alt="" src="img/6.jpg"></a></li>
<li><img title="" alt="" src="img/7.jpg"></a></li>
<li><img title="" alt="" src="img/8.jpg"></a></li>
<li><img title="" alt="" src="img/9.jpg"></a></li>
<li><img title="" alt="" src="img/10.jpg"></a></li>
</ul>
Current Photo <span id="currentImg">1</span>
</div>
</div>
</div>
</div>
</body>
</html>
Thank you so much for your help!
Firstly, both your Carousels are calling the same initialise callback method, which I’m guessing is not really what you intend. So instead of:
you probably want:
Then you need to create the function showcasecarousel_initCallback. The following would do the job you want:
…although if I was you I would do a lot of refactoring as there’s a fair amount of inconsistency in your code and it’s not particularly easy to follow. You’ll also need to deal with the situation where the image loaded into the lower carousel is not currently displayed in the top Carousel, you’ll need to move the top Carousel forward or backwards.