dynamically generated slideshows controls

Question

I'm making a portfolio page with X projects per page. Each project got its own slider. (jquery cycle plugin) Project entries are coming from a database.

I've added controls to the slider (play/pause/next/prev)

$('.contentimage').cycle({
    next:   '.nextIco',
    prev:   '.prevIco'
});
$('.playIco').click(function() { 
    $('.contentimage').cycle('resume'); 
});
$('.pauseIco').click(function() { 
    $('.contentimage').cycle('pause');
});

Problem with this is: Any 'next-button' for example, controls every slideshow on the page.

My approach would be now, to generate the js code via php.

But maybe any of you guys has a better idea. Doing it on js-side.

Answer 1

Problem with this is: Any 'next-button' for example, controls every slideshow on the page.

This is because your current code creates an event listener setup in which any 'next' or 'previous' button triggers every slideshow to react. You'll need a way to explicitly associate each set of next/previous buttons with their respective slideshow. One way would be to generate unique data- attribute values for each slideshow-button set, and use JavaScript to link the two:

$('.nextIco').click(function(e) {
    var sid = $(e.currentTarget).attr('data-slideshow-id');
    $('.contentimage[data-slideshow-id="' + sid + '"]').cycle('next');
});

However, a better approach would be to associate each slideshow with its corresponding buttons using their relative locations in the DOM tree (assuming that, in your HTML, you have each of your slideshows are encapsulated by some container element):

<div class="slideshow-wrapper">
    <div class="prevIco"></div>
    <div class="slides-wrapper">
        <!-- Slideshow content/slides here ... -->
    </div>
    <div class="nextIco"></div>
</div>

Your JavaScript could look like the following:

$(document).ready(function() {
    $('.prevIco .nextIco').on('click', function(e) {
        var button = $(e.currentTarget);
        var action = (button.hasClass('.prevIcon')) ? 'prev' : 'next';
        button.siblings('.slides-wrapper').cycle(action);
    });
});

Here's a relevant demo from Mike Alsup's website: http://jquery.malsup.com/cycle/prevnext.html