CODEWITHSUNDEEP
javascriptjqueryjcarousel
Alabala
Alabala

Reputation: 3

I need a help for a gallery with jCarousel

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!

Upvotes: 0

Views: 1039

Answers (1)

soupy1976
soupy1976

Reputation: 2845

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.

Upvotes: 1

Related Questions