2

Photo gallery like here: http://jquery.malsup.com/cycle2/demo/caro-pager.php

I'm creating photo gallery of such a kind as in the image. It should have the following option: when clicking next/prev button on thumbnail row thumbs should move by one position but moving the thumbs should not change the big photo. I make it with Cycle2 and I initialize it in this way:

var slideshows = $('.cycle-slideshow').on('cycle-next cycle-prev', function(e, opts) {
    if($(this).attr('id') == 'cycle-1'){
        slideshows.not(this).cycle('goto', opts.currSlide);
    }
});

$('#cycle-2 .cycle-slide').click(function(){
    var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
    slideshows.cycle('goto', index);
});

But now when clicking on prev/next buttons on thumbnails row - it always changes active slide in thumbs. So I have one active big slide and other active thumbs (they are not the same). I need to prevent changing of ".cycle-slide-active" on prev/next on thumbs. Can this be fixed with the current plugin?

Pranav C Balan
  • 113,687
  • 23
  • 165
  • 188
Olga
  • 23
  • 3
  • Can you create an http://jsfiddle.net/ demonstrating the issue? This may be a good starting point because it already has `jquery-cycle2` loaded: http://jsfiddle.net/dVf8V/4/ – Trevor Dec 27 '13 at 19:09
  • 1
    Code is here: http://jsfiddle.net/Oliveen/pzPXE/7/ – Olga Dec 30 '13 at 07:27
  • Thanks for the fiddle I'll have to look into it in a couple days. – Trevor Jan 01 '14 at 01:47

1 Answers1

0

You need to make sure that when the id is cycle-1 you need to call cycle on only cycle-1 like your doing if it's cycle-2

Change

if($(this).attr('id') == 'cycle-1'){
slideshows.not(this).cycle('goto', opts.currSlide);
}

To

if($(this).attr('id') == 'cycle-1'){
    $(this).cycle('goto', opts.currSlide);
}

Example

http://jsfiddle.net/pzPXE/12/

Update

$('.cycle-slide-active').removeClass('cycle-slide-active'); 
$('#cycle-2').on('cycle-update-view', function(e, opts) {
    $('.cycle-slide-active').removeClass('cycle-slide-active'); 
});

http://jsfiddle.net/pzPXE/13/

Update 2

I had to modify your css a little bit because only 7 of the 8 images were visible in the bottom carousel.. But hopefully this will be of help.

$('#cycle-2 .cycle-slide').click(function(){
        var index = $('#cycle-2').data('cycle.API').getSlideIndex(this);
        $('#cycle-1').cycle('goto', index);
    });
    $('#cycle-1').on('cycle-update-view', function(e, opts) {
        if(opts.currSlide < slides-slidesVisible ){
            $('#cycle-2').cycle('goto', opts.currSlide);
        }   
        else
            $('#cycle-2').cycle('goto', slides-slidesVisible);            
        currentSlide = opts.currSlide;
        $('#cycle-2 .cycle-slide-active').removeClass('cycle-slide-active');
        $('#cycle-2 .cycle-slide').eq(currentSlide+1).addClass('cycle-slide-active');
    }); 
    $('#cycle-2').on('cycle-update-view', function(e, opts) {
        $('#cycle-2 .cycle-slide-active').removeClass('cycle-slide-active');
        $('#cycle-2 .cycle-slide').eq(currentSlide+1).addClass('cycle-slide-active');        
});

http://jsfiddle.net/pzPXE/16/

Trevor
  • 16,080
  • 9
  • 52
  • 83
  • @Olga please mark this answer as accepted if it resolved your issue or give feedback. (you can mark the answer as accepted by clicking on the white check mark to the left of my answer.) Thanks – Trevor Jan 03 '14 at 22:57
  • Thank you, @Trevor, but this is not exactly what I mean. Prev/next action on thumbs do not change big image even with my code. But what I need is not to change active slide in thumbs when clicking prev/next in thumbs. Now the first slide of visible always becomes active. I suppose this plugin always does this and perhaps I should apply another one for this functionality. – Olga Jan 04 '14 at 07:49
  • Thanks, this works for prev/next on thumbs. But prev/next on big image should change active thumb. that is a problem now – Olga Jan 08 '14 at 08:00