Image gallery code with lightbox?

makemassair

makemassair

Member
Hello.

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
 
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
 
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.
 
What 'opening thing' are you after exactly?
Is there a site you've seen that has something similar to what you're looking for?
 
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.
 
Humm...
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=document.getElementById("effect");
light.className="";
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;}
.hide{display:none}
#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. :)

Jaz

Key:
Purple ~ XHTML
Blue ~ JavaScript
Green ~ CSS
 
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.

Jaz
 
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.
 
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.
 
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.
 
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.
 
Let us know when you have her site completed Mike, would be good to see the 'tasty' image script up & running :D
 
You must log in or register to reply here.
Back
Top