I need a help for a gallery with jCarousel

Question

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!

soupy1976 · Accepted Answer · 2012-07-08T10:17:07.427

Firstly, both your Carousels are calling the same initialise callback method, which I'm guessing is not really what you intend. So instead of:

    jQuery('#showcasecarousel').jcarousel({ 
    scroll: 1,
    animation: 1,
    initCallback: mycarousel_initCallback,
    itemLoadCallback: trigger

you probably want:

    jQuery('#showcasecarousel').jcarousel({ 
    scroll: 1,
    animation: 1,
    initCallback: showcasecarousel_initCallback,
    itemLoadCallback: trigger

Then you need to create the function showcasecarousel_initCallback. The following would do the job you want:

function showcasecarousel_initCallback(carousel) {
      jQuery('.jcarousel-skin-showcase div.jcarousel-next').click(function () {
          if (carousel.first < 10) {
              jQuery('#mycarousel li.jcarousel-item').removeClass('highliht');
              jQuery('#mycarousel .jcarousel-item-' + (carousel.first + 1)).addClass('highliht');
          }
          return false;
      });

      jQuery('.jcarousel-skin-showcase div.jcarousel-prev').click(function () {
          if (carousel.first > 1) {
              jQuery('#mycarousel li.jcarousel-item').removeClass('highliht');
              jQuery('#mycarousel .jcarousel-item-' + (carousel.first - 1)).addClass('highliht');
          }
          return false;
      });
}

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

thank you so much for your help. Now the selector (the red border) is moving on the small images. How can I do it so the selector to not hiding? I need it in that way so when it (the selector) comes to the end of the small images they should be scrolling too. My other question is how to make the small image’s scroller to moving in both directions? Now the little images are moving only in the right direction when you click on them. Can I do it like it’s in the example – when you click on the image depending on the location of the image to move left or right. — Alabala, Jul 09 '12 at 14:56

I need a help for a gallery with jCarousel

1 Answers1