Hello.
I have a little problem with jCarousel, so I really need your help.
Here is the gallery:
http://tranzit.dir.bg/load.php?id=Td...SrC7CkA1273310
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:
Quote:
<!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>
|
example: themeforest.s3.amazonaws.com/86_jquery/gallery.html
Thank you so much for your help!
Before you post, read our: 
