How to use .each() with flickity to only affect active flickity instance

Question

I'm trying to target iframes within the active instance of flickity as I may have several instances of flickity on a single page (the end goal is to refresh the iframe that was in the slide that was just viewed once the user has selected another slide).

I got this to work for a single slideshow, but I run into problems when I have multiple slideshows on the page, as it will refresh all iframes that were previously selected, not just the one that's in the active slideshow.

Below is my script, where ".slideshow" is a flickity instance and I want to be able to have multiple on a page. The issue has to do with targeting the correct 'previousVideoContainer' whose parent just fired the "settle.flickity" event. Any ideas?

$('.slideshow').each(function(index, element) {
    // in case the first slide is a video
    var previousVideoContainer = $(this).find('.slideshow-cell.is-selected iframe'); 

    $(this).on('settle.flickity', function () {
        //reload iframe in previously viewed slide to "stop" the video
        $(previousVideoContainer).each(function(ev) {
            var video = this;
            $($(video),parent.document).attr('src',$($(video),parent.document).attr('data-src'));
        }); 
        var videoContainer = $('.carousel-cell.is-selected iframe');
        previousVideoContainer = videoContainer;
    });
});

score 2 · Accepted Answer · answered Feb 15 '17 at 19:05

I answered my own question. The issue was that I didn't scope the "videoContainer" variable in the same way as I did with previousVideoContainer. Flickity was working just fine. Here's the revised code:

$('.slideshow').each(function(index, element) {
    // in case the first slide is a video
    var previousVideoContainer = $(this).find('.slideshow-cell.is-selected iframe'); 

    $(this).on('settle.flickity', function () {
        //reload iframe in previously viewed slide to "stop" the video
        $(previousVideoContainer).each(function(ev) {
            var video = this;
            $($(video),parent.document).attr('src',$($(video),parent.document).attr('data-src'));
        }); 
        var videoContainer = $(this).find('.slideshow-cell.is-selected iframe');
        previousVideoContainer = videoContainer;
    });
});

How to use .each() with flickity to only affect active flickity instance

1 Answers1