Multiple instances of flexslider without setting IDs - can't use
flexslider api
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&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&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>
`
No comments:
Post a Comment