Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Image gallery code with lightbox?

Discussion in 'Website Design Forum:' started by makemassair, Dec 30, 2008.

  1. makemassair

    makemassair Member


    I'm more a designer than a Web Coder and I'm trying to make this site for my girlfriend's fashion label. One aspect we want for it is an image gallery which is customisable but loads images from a grid of thumbnails and loads up into a lightbox style presentation.

    What options are there for this? I've been looking at some lightbox codes and alterations to the coding but I've not really got anywhere with it yet. The code is either too difficult for me to implement :rolleyes: or I can't customise it enough to fit into the minimal design planned for the site.

    I'd also be happy to link the images from the label's flickr account, but not to display it being from flickr other than in the links/about section of her site.

    Thanks for reading me post. Have a good NYE. :D
  2. Greg

    Greg Active Member

    I used to use one called ThickBox, it has a gallery function like what you're looking for by the sounds of it - ThickBox 3.1

    Scroll down to the examples and the Gallery one, it's pretty easy to implement and 'tweak' if my memory serves me correctly! and I'm sure if you run into any problems you could post here to ask :)

    HTH, Greg
  3. makemassair

    makemassair Member

    Ah cheers, yea I came across that one. We decided to not use it as it doesn't do the opening thing which is something my girlfriend really wants. lol.
  4. Greg

    Greg Active Member

    What 'opening thing' are you after exactly?
    Is there a site you've seen that has something similar to what you're looking for?
  5. br3n

    br3n Senior Member

    think he means where the size of the picture is kinda drawn/extruded rather than just appearing on the screen.

    I agree, I think thats the best part about lightbox and IMO why its so loved.
  6. philjohns

    philjohns Senior Member


    I think thats what your looking for! Implemented in a similiar way to lightbox.

    Let me know how u get on.

  7. Jazajay

    Jazajay Active Member

    As of yet I haven't done a drawn out effect, I can give you the code for a light box something like this should do it ~

    <div id="light" class="hide"><div id="effect"></div></div>
    <img src="someimage.jpg" alt="image description" onclick="lightbox(someimage.jpg)" height="100" width="100" />

    function lightbox(image){
    var light=document.getElementById("light"),effect=
    effect.innerHTML="<img src='"+image+"'> <a href='close' onclick=\"
    document.getElementById("light").className='hide';return false\">Close</a>";

    #light{position:absolute;top:0;left:0;bottom:0;right:0;z-index:1;background:url('path to a transparent gif in what ever colour');min-height:20px;}
    #effect{background:#FFF;min-height:20px;min-width:20px;border:10px solid #000;opacity:50%}

    Right that would give you a lightbox effect, more of less kids arguing at the mo so I may have an error or 2 in thier any problems let me know.

    Now to get the elongated effect it would have to be a JavaScript timeout function I guess, hummm......first guess try going for a onload event on the image, once the image has loaded give it a display of none so it does not show at first.

    Get the height and the width of the loaded image, move the bottom margin of the light box we just created until it gets to the height of the image
    with a timeout function and a loop, but plus 20 pixels to the bottom, so you can add the link at the bottom.

    Now halve the width of the image and increase the size of the light box div left and right by the new halved value using a loop and a timeout function.

    That to me seems the best approach.
    Cant be arsed to write that TBH need to get the kids in the bath, sorry, but you could look it up and use that as a guide, you could quite easily create it yourself.
    I know it seems like a lot to do but I don't know an hour or so, 2 timeout functions etc.....

    However if you just want the effect but a shed load of code to pull it off, and I mean a huge amount of code check out ~

    Lightbox 2

    I would personally build it your self the amount of code would be far less in the end which would improve page proformance.

    Hope I have been of some help. :)


    Purple ~ XHTML
    Blue ~ JavaScript
    Green ~ CSS

  8. Jazajay

    Jazajay Active Member

    I do like the fade in approach in the link Phill, could be imporved if you brought both the englongated effect in as well as the zoom but good example.

  9. Sunburn

    Sunburn Active Member

  10. Jazajay

    Jazajay Active Member

    I do actual like that Sunburn.
    The loading graphic is in a good place and the label for each image is well thought our IMO.
  11. Sunburn

    Sunburn Active Member

    Fancybox is a good solution also as it allows you display both on-site and off-site content, group a selection of content i.e photos together which can then be cycled through whilst in the on state and many other really neat fetures. Its also fairly lightweight in comparrison to say thinkbox which is very bloated imho.
  12. makemassair

    makemassair Member

    Well I've got Lightbox working on a very early design of her site. This Fancybox does look tasty so may well be using that one for my personal site.

    Thanks for the advice.
  13. tim

    tim Senior Member

    Never heard anyone called coding 'tasty' before, but I did see woman with a moustache and a comb over the other day, so I guess it's just the norm recently.

    Glad you found what you wanted.
  14. makemassair

    makemassair Member

    Are you sure it was a woman? That sounds borderline to be honest.
  15. tim

    tim Senior Member

    Definitely a woman.
  16. makemassair

    makemassair Member

    Fit body, questionable face? lol.
  17. Greg

    Greg Active Member

    Let us know when you have her site completed Mike, would be good to see the 'tasty' image script up & running :D
  18. tim

    tim Senior Member

    Not so much. She was about 90.
    LOL at that Greg!
  19. makemassair

    makemassair Member

    Will do. :cool:
  20. tbwcf

    tbwcf Active Member

    Here's another one that might be worth a look Lightview its not free tho....

Share This Page