Question

I am currently using Lightbox 2 (http://lokeshdhakar.com/projects/lightbox2/) and this is all working fine, however I need a slight tweak.

I want to display all the images vertically when a thumbnail is clicked. So if I have 3 images all using the same rel=”lightbox[whatever]” I want them all to output. I don’t want the “Image 1 of 5” with next and prev buttons.

I searched all over and couldn’t find a solution. IF anyone has any ideas, snippets or external URLs it would be great appreciated.

Code Example:

<a href="resources/images/ClassicCarriers/ClassicCarriers1.jpg" rel="lightbox[classicCarriers]" title="">
    <img src="Resources/Images/classicCarriers_grey.jpg" class="recentWork" title="Classic Carriers" alt="Classic Carriers"/>
</a>
<a href="resources/images/ClassicCarriers/ClassicCarriers2.jpg" rel="lightbox[classicCarriers]" title=""></a>
<a href="resources/images/ClassicCarriers/ClassicCarriers3.jpg" rel="lightbox[classicCarriers]" title=""></a>

Answer 1

You can also use http://www.jacklmoore.com/colorbox to achieve what you want. Check the following code

HTML

<div id="container">
    <img src="http://placekitten.com/100/100" width="100px">
    <img src="http://placekitten.com/100/100" width="100px">
    <img src="http://placekitten.com/100/100" width="100px">
</div>  

jQuery

$(function(){
    $('#container img').click(function(e){
      e.preventDefault();
      $.colorbox({
        href: '#container',
        inline: true
     });    

  });
}); 

Now when you click on any of the images all 3 will be shown in colorbox.

Working Fiddle
​

​