We're just finishing off a site that has a photo gallery. Due to the inconsistency of the gallery I had to hardcode all 75 odd thumbnails into it, across about 5 pages. Of course with this in mind I didn't want to sit and create a page for every image as well! Usually my gallery script would essentially deal with this, a simple page fed the photo id and it displays it. However hardcoding every page didn't sound like fun, but the client wanted to allow visitors to enlarge the thumbnails. So I took a look around for a 'lightbox' script. The Lightbox is very 'Web 2.0' if you can bear that term, i.e. it's a more recent idea and cool to boot.
Dave commented to me that it was cool but everyone was doing it now (all the cool kids do!) however whilst they may be, my clients have never seen it before, and so of course they see it for the first time on their own site and think 'cool'!! I didn't know what was involved and had put off looking into it earlier for another photo gallery site, however I took a quick look and came across Lokesh's Lightbox JS. Of course the lightbox requires JavaScript to be enabled, however it still works fine without JS running which is the best thing. It may not look pretty with JS off but for a budget site (that's double over budget) I wasn't going to concern myself over that!
I was quite impressed as the lightbox script is very very easy to add. Simply link to the CSS and JS in the header and then just link the thumbnail and/or text to the large image and add the attribute
rel="lightbox"
into the link tag. If you want to get the lightbox to create a slideshow style box with Next and Previous buttons simply change this to
rel="lightbox"
Where gallery can be pretty much anything, but every photo to go into it needs to have the same text. For single gallery pages this works fine as 'gallery' for all images.
And that's all there is to it! In the week I've been using it I've now got it working on 3 different sites including changing the default CSS to suit the site. The CSS is pretty easy to modify if you're familiar with it, allowing you to reposition the box, change the slight opaque background colour, the box colours and plenty more. Wonder if we can get rounded corners on the lightbox?!
Use with caution, when it isn't opened in a new window
Because,
You HAVE to use the close button on the enlarged picture to go back to the page you were on.
1. This isn't natural, I use the back button on my browser
2. You're making the picture bigger, in most cases the "close" button is at the bottom or completely off the screen.
Why's this a problem? When you are in an enlarged view and hit the back button you don't go back to the page you started from, you go back to the page you started from -1. Many times this is a completely different site.
I've ended up on a completely different site (the one I was previously on) many times before I figured out that script, and I'm a heavy user of the internet.
I'm sure my family/friends/girlfriend would get just as confused.
Now if you open every picture in a new window this point is moot, but it should come with a warning "be sure to open in a new window or your user's may back up completely off your site!"
its what I use on the blogscene galleries
Yeah yours was one of the first I saw, then after an article in .net I was intending to have a play but never realised how simple it was to integrate!
The comment from one client was "it looks kewl" !!
Its really simple otherwise I wouldnt have done it
I think its rather cool as well
Hey Mark,
Perhaps it's due to configuration of some scripts as I have the latest version (v2).
Just dug your comment out of Akismet!
When I click on the image and the JS is turned off it just displays the image, when I click back it goes back to the gallery page, and not the one before that
Non JS users loose a nice design around the image however it's otherwise no different to my usual gallery of click the thumbnail and view the large image within the design.
Of course it's only in initial use. If I can work out how to offer the page link for non JS users and the lightbox for JS users then that'd be perfect… when I have the time
Thanks for digging me up
I gave an example of the lightbox thing back at my blog.
That's interesting you code for non javascript users. I hate AJAX for the most part (msn adcenter for instance) however used sparingly it's pretty handy (I use it on my admin panel for editing posts)
I've stayed away from it because I thought like you "well, what if a user without java stops by", then I look at my network stats and 99.18% have java ENABLED.
I wonder if .82% is enough to worry about? (could be bots maybe in that data as well?)
Aside I do css code for 800X600 because 10% of my visitors are still at that size, which btw, this site degrades very nicely (turns to 2 columns) under a smaller resolution, nice trick.
That lightbox looks really good – might have a go with that myself. Would be easy enough to pull images in from Flickr maybe…
Oddly enough, just did a search for the easyman's method of doing that and found this instead:
http://shiftingpixel.com/lightbox/
Fancy!
Hey mark,
Checked on Akismet and hopefully in the next day or two your details should hopefully be removed from Akismet's blacklist. Guess someone blacklisted you by mistake. Anyhow, as for the topic at hand (!)…
Going on from your comment on your blog, I understand what you mean now. You have JS enabled and when you click on the image you get the floating enlarged one and then click 'back'. I see what you mean now, however you mentioned opening in a new window, without major JS hacking I couldn't do this (I don't think). It's not designed for that, and again as mentioned it's not accessible either. I understand that it's an issue though, as you say, perhaps we can play with the CSS to put the close button at the top of the image so that people notice it better. Trouble with spawning a new window could be that people open and don't close, and then end up with several windows open! It's just a case of covering as many angles as possible.
I look at non JS users as people using screenreaders, braille readers (okay useless when it comes to images anyhow), spiders etc. as well as a few people who do turn it off. Of course each site has their own percentages. As for this site, yes the template is pretty good (I didn't do it!), it even displays on my PDA without a horizontal scroll, but I will get around to doing PDA stylesheets for my sites at some point, just to make it even better for handheld users!
Rutty – I thought you surfed with JS off?! Still, yes it's a pretty cool looking script and for people not in the know it does look quite groovy.
Thanks for the help with askiment, hopefully commenting on other blogs will improve as well.
I only mentioned the back button problem because I've personally ended up on a completely different site more than once when trying to get out of the enlarged picture view with that script.
I would assume putting the button at the time would help the situation.
I still think it should ship with a warning though
No worries Mark, it's surprising you even got in there!
Still will have a fiddle with the Lightbox and see what I can come up
I use NOScript and only turn it on for sites that I trust, such as Flickr (and obviously this one
)
ahhhhhhhhhhhhhh
Hey everyone. I am new to this stuff and I don't know how to add things to headers as I don't know what a header is. I have a book I am soon going to put on the web and it has pictures add to some pages. I am trying to figure out how to simply get the images to enlarge when you click on them but can figure out how to do it. The book is in PDF. I hope this doesn't seem odd to people. Any help would be appreciated. Thanx to those who can give a hand.
Pertaining to my last message. It was suppose to say…can't figure out how to do it.
Hi Gary,
The header of a web page is the area between the <head></head> tags. With this script you simply link to the javascript and css files within the header. Then in your main page code link the thumbnail to the large image but add rel="lightbox" into the 'a' tag and then instead of just loading the large image in the browser it will use the lightbox script to display the large image (for everyone running javascript).
Hope that makes sense, if not let me know and I'll go into it further.
I saw your post about lightbox.js. One of your commenters mentioned the fact that the back button doesn't function well. I have written a fix for this – you can find the complete post here:
Fixing the back button in lightbox.js
You can see a working example here:
Custom House Sign Gallary
Hope you find this helpful. The back button problem is the worst thing about a fantastic script.
Hi Olson,
Thanks for the comment. Look forward to implementing your new changes and seeing how it goes
Sorry, I have moved my blog to wordpress (thank goodness) and the link above should be:
Fixing the Lightbox History
Maybe I shoud write a plugin for WordPress?
Hey Sarah, I have just seen your recipe site. I love cooking and inventing recipes. If you need a guest blogger ever, I might be able to lend a hand!
Hi Olson, Thanks for the update.
As for a plugin, there is a lightbox plugin for WordPress so perhaps look at that and maybe contact the owner and maybe get your update integrated in with it?
As for my Eat n' Drink site, guest posts are always welcome
i know some of this posting is old, don't know how i really came about it, a good read none the less. However, i think you should look into highslide : http://vikjavev.no/highslide/
it's a similar idea, however it doesn't sort of "lock you out" of the page, and allows you to enlarge multiple images at once if you want, then you can drag them around the page. far more impressive then the lightbox series in my opinion. just wanted to share!
Cheers for the link. It does look another nice way, however I wouldn't say lightbox locks you out of the page as you can click on the page and the lightbox will go away. I also like the way the lightbox fades the background as it emphasises the photo more.
However both scripts are probably good for different jobs, so thanks for the link
I was looking for this script a long time ! I saw it before on some websites.
Thx for the good post !
Pingback: Playing with jQuery :: Stuff by Sarah