jQuery Colorbox slideshow different content -



jQuery Colorbox slideshow different content -

i'm using jquery colorbox [ http://www.jacklmoore.com/colorbox ] slideshow. can't seem figure out how create work different content ( images, videos, iframes, inline elements, etc. )

<p><a class="image" href="ohoopee1.jpg" rel="slideshow">an image</a></p> <p><a class="video" href=""http://www.youtube.com/embed/617ania5rqs?rel=0&amp;wmode=transparent" rel="slideshow">a youtube video - should iframed</a></p> <p><a class="page" href="http://stackoverflow.com" rel="slideshow">a page, should iframed.</a></p> <p><a class="image" href="ohoopee2.jpg" rel="slideshow">another image</a></p>

in example, there images , iframes. if utilize

<script> $("a[rel="slideshow"]").colorbox({slideshow:true}); </script>

youtube , iframe don't show (fail load content)

i tested approach , works shows images first, videos ( not in order ). this:

<script> var $slideshow = $('.image').colorbox({...}); $slideshow.push ( $('video').colorbox({iframe:true, ...})); $slideshow.eq(0).click(); </script>

please bear in mind need them show in order , help appreciated,

you utilize rel attribute on elements (like have), i'm going recommend using colorbox's rel property instead. this:

$('.image').colorbox({rel:'slideshow', slideshow:true}); $('.iframe, .video').colorbox({iframe:true, width:500, height:500 rel:'slideshow', slideshow:true});

you need specify settings images , iframes separately, need have same value rel attribute plugin knows should grouped together.

jquery slideshow colorbox

Comments

Popular posts from this blog

web services - java.lang.NoClassDefFoundError: Could not initialize class net.sf.cglib.proxy.Enhancer -

Accessing MATLAB's unicode strings from C -

javascript - mongodb won't find my schema method in nested container -