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&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
Post a Comment