Grow your CSS skills. Land your dream job.

lightbox with multiple images

  • # May 31, 2011 at 2:30 pm

    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

    # 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

    rei
    # 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:

    Body:


    • js:

    rei
    # December 17, 2012 at 11:46 am


    rei
    # 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

    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

    # December 17, 2012 at 12:07 pm

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

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

    ES1
    # 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.

*May or may not contain any actual "CSS" or "Tricks".