CODEWITHSUNDEEP
jqueryslideshowcolorbox
mindbodyheart09
mindbodyheart09

Reputation: 43

jQuery Colorbox slideshow different content

I'm using jQuery Colorbox [ http://www.jacklmoore.com/colorbox ] to do the slideshow. I can't seem to figure out how to make it work for 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 be iframed</a></p> 
<p><a class="page" href="http://stackoverflow.com" rel="slideshow">a page, should be iframed.</a></p> 
<p><a class="image" href="ohoopee2.jpg" rel="slideshow">Another image</a></p>

In this example, there are images and iframes. if I use 

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

youtube and iframe don't show (fail to load the content)

I tested another approach and it works but it shows all images first, then videos ( not in order ). like this:

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

Please bear in mind that I need them to show in order and any help would be appreciated,

Upvotes: 2

Views: 2138

Answers (3)

Bo rislav
Bo rislav

Reputation: 113

If you check the documentation, .colorbox({slideshow:true}) sets an image gallery with an automatic slideshow

Upvotes: 0

Jack
Jack

Reputation: 9548

You could use the rel attribute on the elements (like you currently have), but I'm going to recommend using colorbox's rel property instead. You could do something like this:

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

You need to specify the settings for the images and iframes separately, but they need to have the same value for the rel attribute so that the plugin knows they should be grouped together.

Upvotes: 2

Ares
Ares

Reputation: 5903

It is probably not working because of this:

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

If you pay attention you should notice that your quotes are incorrect, which should give you a parse error.

change to the following:

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

Notice the single quote at the beginning and end of the selector.

Upvotes: 0

Related Questions