The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

lightbox with multiple images

  • # May 31, 2011 at 2:30 pm


    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?


    # May 31, 2011 at 3:35 pm

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

    # May 31, 2011 at 5:18 pm

    in the same lightbox effect like an image with pages

    # May 31, 2011 at 5:34 pm

    No problemo.

    If you used Colorbox you would do something like this:

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

    # June 6, 2011 at 9:48 pm

    Hey man thanks a lot

    # December 17, 2012 at 11:44 am

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


    • js:

    # December 17, 2012 at 11:46 am

    # December 17, 2012 at 11:48 am

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

    # December 17, 2012 at 12:06 pm

    This reply has been reported for inappropriate content.

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

    # December 17, 2012 at 12:07 pm

    This reply has been reported for inappropriate content.

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

    # January 2, 2013 at 9:43 am

    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?

    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;”>

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed