Multiple instances of flexslider without setting IDs - can't use flexslider api

Question

Let me just being with adding that I base my code off from http://juanfra.me/2012/08/flexslider-multiple-videos-v2/, however, instead of the class .flexslider, I use only .slider.

What I have currently is 2 divs, (one right-aligned and one left-aligned), and then via JS I append and prepend them to create a "carousel"-effect between the different divs. Every div has one instance of flexslider.

This works good but because I clone the divs, I can't use IDs for them, since that would mean I clone a div, and then insert it and voilá, we have two elements (atleast) with the same ID.

So basically, everything works great, EXCEPT, calling .flexslider('play') or pause. I've tried with jQuery('.slider').data('flexslider').flexslider('play') aswell, but to no avail. I have also tried iterating over every .slider and call .flexslider('play/pause') on it. No messages in console.log either, which is just really weird. Please, could you point me in to the right direction?

I use the froogaloop-api to properly control my embedded vimeo-videos within flexslider, and this works.

This is part of my HTML-structure (had to remove certain parts such as additional classes, text, and the correct vimeo video URLs, also note that iframe ids are randomized (they are the same as the one I include in the vimeo player-url variable, but that's irrelevant since it's flexslider which is the problem):

<div class="slider customContent">
    <ul class="slides">
        <li>
            <div class="image">
                <iframe id="player_1" src="http://player.vimeo.com/video/123123?api=1&amp;player_id=player_1" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
            </div>

            <div class="post">
                <div class="content">
                    <span class="meta-title">Another title</span>
                </div>
            </div>
        </li>
        <li>    
            <div class="image">
                <iframe id="player_2" src="http://player.vimeo.com/video/123123?api=1&amp;player_id=player_2" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
            </div>

            <div class="post">
                <div class="content">
                    <span class="title">A title</span>
                </div>
            </div>
        </li>
    </ul>
</div>

Here's a jsfiddle: http://jsfiddle.net/DMPpa.

WHat happens: when I play a video which has an ID another div has (since there can only be one ID), flexslider refuses to pause the specific flexslider instance of that id and video. For example, if I click on the last flexslide item, I want to pause the slideshow and play video, instead it does not pause the slideshow and after a small amount of time flexslider "slides" to the other video item without pausing the currently played one.

If I set a unique ID on every iframe, this works, but I can't do that in my HTML because of the divs getting appended and prepended to create a carousel effect.

So what I'm thinking we need to do is store a temporary ID (serverside-generated perhaps), in a "data-fakeid" on that iframe, and then iterate over every iframe and set the ID, add the methods, and then remove the ID since it has to be unique.. Or something. Sadly, I need a push in this matter.

So, I tried to clarify a few things. Hope you understand - thanks in advance.

What? I'm telling you exactly what I want to achieve and what does not work. I need a proper workaround to not being able to use the same IDs on div-1 and div-2, because if I do, such as in the example, .flexslider('api-method') breaks. I append / prepend these divs so. — Oscar Eriksen, Aug 14 '13 at 07:40
Neither am I really sure what is it that you are trying to achieve. If it is pausing/playing the specific slideshow in which the player is activated/deactivated, take a look at this [jsFiddle](http://jsfiddle.net/masteram/x7jQU/). If not, try to explain, in a way that we can repeat, an typical scenario, what happens and how is it different from the desired outcome. — MasterAM, Aug 15 '13 at 01:15
Added extra information, hope you understand me better now....! Thanks. — Oscar Eriksen, Aug 15 '13 at 05:32
@OscarEriksen, have you tried the jsFiddle from my last comment? — MasterAM, Aug 15 '13 at 11:35
Yes, I have tried your jsFiddle - it does not work. Try the the last iframe/vimeo/flexslider and you can see it does not work, since it slides to another flexslider-item after being played. What needs to be done is to modify the ID and then re-initialize all events.. Do you know of any good way to do that? — Oscar Eriksen, Aug 15 '13 at 11:40
Well, for some reason, the `ready` function only gets some of the player ids, twice... I really don't know why this is happening. You can try to investigate this with the full froogaloop script. [This](http://jsfiddle.net/masteram/x7jQU/3/) is my logging test case. — MasterAM, Aug 15 '13 at 12:50

score 1 · Accepted Answer · answered Aug 17 '13 at 20:47

Alright, so what I ended up doing (and to help future developers who encounter the same "problem", which actually isn't really a problem):

I ended up generating the IDs through javascript (since I'm modifying the DOM; the divs and the iframes when appending and prepending, so it couldn't be done serverside), and then calling Froogaloop addEvent of the "new" iframe with the clientside generated ID, as well as re-initializing the flexslider on that "new" DOM-structure. This was the most logical solution, however I was too stressed to understand this.

My actual problem was that I needed a way to attach handlers for vimeo-videos in combination with Froogaloop and Flexslider without setting IDs on them. Both, which totally did not work (well, it shouldn't!) when having the same IDs on elements such as the vimeo videos (iframes).

I appreciate the help you guys gave me! Best of luck to you!

Multiple instances of flexslider without setting IDs - can't use flexslider api

1 Answers1