CODEWITHSUNDEEP
jquerywordpresscyclejquery-cycle
Carlo Ravelli
Carlo Ravelli

Reputation: 87

jQuery cycle - Pager shows all queried posts' slides

I made a page that loads post titles in a menu, clicking the titles loads that posts content into a div. Part of the content is a div with a jquery cycle script. So, every page has it's own slider, with it's own images and it's own pager.

Problem: The pager shows buttons for every slide on the page, even those that aren't showing. For example, I have 3 posts with a slider, post 1 has 2 images in the slider, post 2 has 3 images in the slider, and post 3 has 2 in the slider as well. The pager then shows 7 buttons, on every slider.

Before, it duplicated every time a post was clicked, so it has to do something with the while loop I'm thinking. This is my jquery

// Displaying content for selected category
$('ul.cats li.trigger').click(function(){
    var openMainContent = $(this).attr('rel');

    $('.the-content#'+openMainContent).show(); 
    $('.the-content').not('#'+openMainContent).hide();
    $('.img-slider').cycle('destroy');

    // Image slider
    $('.img-slider')
        .before('<div id="slider-nav" class="slider-nav">') 
        .cycle({ 
            fx:     'fade',
            timeout: 0,
            pager:  '#slider-nav'
    });
});

What do you think makes this happen?

Upvotes: 1

Views: 294

Answers (2)

Nikola Ivanov Nikolov
Nikola Ivanov Nikolov

Reputation: 5062

I would try by initializing the cycle plugin only on the new ones. Something like this(haven't tested that though):

// We need a way to distinguish navigation wrappers from one another, so we use a counter
var nav_count = 0;
// Displaying content for selected category
$('ul.cats li.trigger').click(function(){
    var openMainContent = $(this).attr('rel');

    $('.the-content#'+openMainContent).show(); 
    $('.the-content').not('#'+openMainContent).hide();

    // Image slider
    $('.img-slider:not(.img-slider-initialized)').each(function(){
        $(this).before('<div id="slider-nav-' + nav_count + '" class="slider-nav">') 
            .cycle({ 
                fx:     'fade',
                timeout: 0,
                pager:  '#slider-nav-' + nav_count
        }).addClass('img-slider-initialized');
        nav_count ++;
    })
});

Can you test that and see if it works?

Upvotes: 1

banzsh
banzsh

Reputation: 550

Just a guess: does the .before() method adds the closing </div> tag to id="slider-nav"? It may cause broken html.

Upvotes: 0

Related Questions