Forums

ylex1

Hi

I want to make a gallery of images with the lightbox effect but
I want the thubnail to have multipe images apart from the content of the other thubnail's
I mean I don't want it to show me the content of the other thubnails when I click next, I want to have other images in the same thumbnail

is this posible?

thanks

TheDoc

So you want a single thumbnail to link to multiple images?

ylex1

in the same lightbox effect like an image with pages

TheDoc

No problemo.

If you used Colorbox you would do something like this:

<a class="colorbox" rel="your-gallery-name" href="large-image1.jpg"><img alt="" src="thumb-image1.jpg"></a>
<a class="colorbox hidden" rel="your-gallery-name" href="large-image2.jpg"></a>
<a class="colorbox hidden" rel="your-gallery-name" href="large-image3.jpg"></a>
<a class="colorbox hidden" rel="your-gallery-name" href="large-image4.jpg"></a>
<a class="colorbox hidden" rel="your-gallery-name" href="large-image5.jpg"></a>
<a class="colorbox hidden" rel="your-gallery-name" href="large-image6.jpg"></a>

Then add the class of 'hidden' to your CSS file and mark it as display: none; or something similar.

ylex1

Hey man thanks a lot

rei

hey guys great thread! im also trying to get this effect to work but im having a hard time getting it. heres my code:

Body:

<

ul class="works">

js:

<

script> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $(".group1").colorbox({rel:'group1'});

forgive me for the messy code im a newbie at this! thx! :) rei.

rei

<

ul class="works">

rei

cant seem to be able to paste the html code on here :(

kevin11189

Is this what you're looking for. I helped someone figure this out with fancybox the other day.

http://css-tricks.com/forums/discussion/21173/jquery-popup-gallery-click-image-to-open-gallery-with-other-images#Item_12

kevin11189

Here is a jsfiddle of what I think you're looking for.

http://jsfiddle.net/kevin11189/uZCC6/1270/

ES1

Hi... I am trying to get fancy box to work with my rollover code created in ImageReady while maintaining the hidden gallery images but I can not get it to work at all. I would like to add 3 more hidden images to this code. Can anyone help?

  <a href="floorplans/level1.jpg"
        onmouseover="changeImages('NY_EA_Nov_14', 'images/NY_EA_Nov_14-over.gif'); return true;"
        onmouseout="changeImages('NY_EA_Nov_14', 'images/NY_EA_Nov_14.gif'); return true;"
        onmousedown="changeImages('NY_EA_Nov_14', 'images/NY_EA_Nov_14-over.gif'); return true;"
        onmouseup="changeImages('NY_EA_Nov_14', 'images/NY_EA_Nov_14-over.gif'); return true;">
        <img name="NY_EA_Nov_14" src="images/NY_EA_Nov_14.gif" width="462" height="60" border="0" alt=""></a></td>

treehouse : what would you like to learn today?

Forums

lightbox with multiple images