Multiple Cycles and Events

[BullMoose]

Hello,

I am attempting use multiple cycle(s) to control an outer slideshow of "Artifacts" and an inner slideshow of images of said artifact. See the code below as to exactly what I am doing.

Unfortunately there seems to be an issues with (for lack of a better term) namespaces.

When I click next artifact (or previous artifact) the fading of the header information changes correctly (I am pulling this info from a database so I am stuck with what I get and how I get it)

However, when I click next and previous on any of the sub slideshows the cycle-update-view and cycle-before event fires for both the image slideshow and the "main" artifact slideshow, and therefore fading the header in and out for every image viewed in the image slideshow.

The artifact slideshow markup

<div id="content" class="artifact_slides" data-cycle-slides="> section" data-slide-class="artifact_slide">
...
</div>

The image slide show markup

<div class="image_slideshows" data-cycle-prev="#prev1" data-cycle-next="#next1" data-slide-class="image-slide" data-slide-active-class="image-slide-active" data-cycle-slides="> div" data-cycle-caption=".counter">
...
</div>

The #next1 and the #prev1 refer to the controls for one specific slideshow (others are #prev2, #next2, etc....)

Any help would be appreciated. Thanks.

/* Image Slides
----------------------------------------------------------------------------------------------------*/

$('.image_slideshows').cycle({
    manualSpeed: 400,
    log: false,
    easing: "easeInOutQuad",
    fx: "scrollHorz",
    timeout: 0
});

$('.image_slideshows').on('cycle-before', function( event, opts ) {

    $('.caption p').hide().delay(400).fadeIn(600);

});

/* Artifact Slides
----------------------------------------------------------------------------------------------------*/

$('.artifact_slides').cycle({
    manualSpeed: 400,
    log: false,
    easing: "easeInOutQuad",
    fx: "scrollHorz",
    timeout: 0
});

$('#next_Artifact').on('mousedown', function() {

    $('.artifact_slides').cycle('next');

});

$('#prev_Artifact').on('mousedown', function() {

    $('.artifact_slides').cycle('prev');

});

$('.artifact_slides').on('cycle-before', function( event, opts ) {

    $('#header_wrap').stop().fadeOut('fast');

});

$('.artifact_slides').on('cycle-update-view', function( event, opts ) {

    var artifact_header = $(".cycle-slide-active .artifact_header").html();

    $('#header_wrap').html(artifact_header);

    $('#header_wrap').stop().fadeIn();

});

[malsup]

In your parent slideshow you need to ignore events that bubble up from the nested slideshows:

For example:

$('.artifact_slides').on('cycle-before', function( event, opts ) {
    // ignore bubbled events from inner slideshows
    if (e.target !== this)
        return;

    $('#header_wrap').stop().fadeOut('fast');
});

[BullMoose]

Thanks, I always forget about events bubbling up like that. Works like a charm.