jquery cycle and jcarousel

0
votes

I've got a gallery setup with jquery cycle and jcarousel. I generate thumbnails with php

<ul id="pager">
    <?php foreach ($thumbs as  $thumb) : ?>
<li><a href="#"><?php echo $thumb ?> </a></li>
    <?php endforeach; ?>
</ul>

Now I create a carousel and append the pager to cycle

$('#pager').jcarousel({});
if ( $('#images').length > 0 ) {
     $('#images').before('<ul id="nav">').cycle({ 
     fx:     'turnDown', 
     speed:  500, 
     timeout: 5000, 
     pagerEvent: 'mouseover',
     pager:  '#pager', 
     pagerAnchorBuilder: function(idx, slide) { 
         return '#pager li:eq(' + idx + ') a'; 
    } ,
    after: function(dir, id, el) {
        var w= $('.jcarousel-clip-horizontal').width();
        var i = $('.jcarousel-item-horizontal').width();
        var slide = $('#pager .activeSlide');
        if ( slide.position.left > w-i  ) {
            $('div.jcarousel-next').trigger('click');
        }
    }
});
  $('#pager a').mouseenter(function() { 
     $('#images').cycle('toggle'); 
}).mouseleave(function(){
     $('#images').cycle('toggle'); 
});

I got 7 elements in my pager visible and I want to trigger the scroll event for the next item thats not visible.

I tried to add an counter for the activeSlider using the jquery index() function but it got messy when hovering over pager item with the cursor.

Any advise on this.

2
jqueryjcarouseljquery-cycle

2 Answers

0
votes

Ok so i found a solution to whis problem took me a while, probably can be done better but here's the code I use I think it's pretty straight forward

$('#pager').jcarousel({
    scroll: 1,
    wrap:'last',
});
if ( $('#images').length > 0 ) {
    $('#images').before('<ul id="nav">').cycle({ 
        fx:     'turnDown', 
        speed:  500, 
        timeout: 5000, 
        pagerEvent: 'mouseover',
        pager:  '#pager', 
        pagerAnchorBuilder: function(idx, slide) { 
            return '#pager li:eq(' + idx + ') a'; 
        } 
        ,after: onBefore
    });
};

function onBefore(curr,next,opts) {
    var size = $('#pager li').size();
    var activeSlide = $('#pager .activeSlide');
    var position = activeSlide.offset();

    // get the position of the carousel clip container
    var container = $('.jcarousel-clip');
    var containerOff = container.offset();

    //first load 
    if(position!=null){
                    // get the information 
        var slideRigt = position.left + activeSlide.width();
        var containerRight = containerOff.left + container.width();
                    // slide is out ou bound on the right
            if ( slideRigt > containerRight ) {
                    $('div.jcarousel-next').trigger('click');
                }
                    // slide is out of bound on the left - rewind/wrap thumbnails to first item
                    else if ( position.left < containerOff.left ) {
                    $('div.jcarousel-next').trigger('click');
                };
    }
};

Hope this will be usefull to someone with the same problem. Still trying to figure out if theres a way to make this work with a wrap: 'circular' option for jcarousel.