Cycle2 WP multiple slideshows

Hello, thank you for this great plugin. I have one problem – multiple slideshows on one page. There may be infinite slideshows, that replace [gallery] shortcode. Everything works – but when I press "next" or "prev" button it triggers all the slideshows. I know that there should be different classes for every slideshow, but I don't know how to make it.

functions.php (now it's initialize automatically)

add_filter('post_gallery', 'index_post_gallery', 10, 2); function index_post_gallery($output, $attr) { global $post;

if (isset($attr['orderby'])) {
    $attr['orderby'] = sanitize_sql_orderby($attr['orderby']);
    if (!$attr['orderby'])
        unset($attr['orderby']);

} extract(shortcode_atts(array( 'order' => 'ASC', 'orderby' => 'menu_order ID', 'id' => $post->ID, 'itemtag' => 'dl', 'icontag' => 'dt', 'captiontag' => 'dd', 'columns' => 3, 'size' => 'thumbnail', 'include' => '', 'exclude' => '' ), $attr));

$id = intval($id);
if ('RAND' == $order) $orderby = 'none';

if (!empty($include)) {
    $include = preg_replace('/[^0-9,]+/', '', $include);
    $_attachments = get_posts(array('include' => $include, 'post_status' => 'inherit', 'post_type' => 'attachment', 'post_mime_type' => 'image', 'order' => $order, 'orderby' => $orderby));

    $attachments = array();
    foreach ($_attachments as $key => $val) {
        $attachments[$val->ID] = $_attachments[$key];
    }
}

if (empty($attachments)) return '';

// Here's your actual output, you may customize it to your need

$output = "
<div class=\"gallery_controls\">
<a href=\"#\" class=\"prev\">&larr;</a>
<span class=\"custom-caption\"></span>
<a href=\"#\" class=\"next\">&rarr;</a>
</div>
<div class=\"cycle-slideshow\"
data-cycle-slides=\"> a\"
data-cycle-auto-height=\"container\"
data-cycle-fx=\"fadeout\"
data-cycle-caption=\".custom-caption\"
data-cycle-caption-template=\"{{slideNum}} / {{slideCount}}\"
data-cycle-timeout=\"0\" 
data-cycle-prev=\".prev\" 
data-cycle-next=\".next\">
\n";

// Now you loop through each attachment
foreach ($attachments as $id => $attachment) {
    $img = wp_prepare_attachment_for_js($id);
    $url = $img['sizes']['large']['url'];
    $height = $img['sizes']['large']['height'];
    $width = $img['sizes']['large']['width'];
    $caption = $img['caption'];
    $output .= "<a href=\"#\" class=\"next\" data-cycle-desc=\"{$caption}\"><img src=\"{$url}\" width=\"{$width}\" height=\"{$height}\" alt=\"{$caption}\" /></a>\n";

}

$output .= "<div class=\"cycle-overlay\"></div></div>\n";

return $output;

}

malsup / cycle2

Cycle2 WP multiple slideshows #671