Just what you needed eh? Another bloody lightbox doing exactly the same as all the others,
well, almost...

This is a modified version based on Lokesh Dhakar's superb orginal lightbox that (i think) simplifies some of the features, adds some config options, moves the nav to the top and best of all incorporates a slideshow feature so you can sit back and watch your pics with a single click!

Anyway, enough of the waffle...let's get on to some examples:

Standalone WeebBox

First off just an image on it's own, to do this just create a link with and immage inside and then add rel="wbox" to the anchor.

braaaaaiiinnnns!

Code:
<a href="images/w33b_zombie.jpg" rel="wbox" title="braaaaaiiinnnns!">
<img src="images/w33b_zombie_thumb.gif" width="75" height="75" />
</a>

Gallery WeebBox

This time, setup your images and anchors and then for each image that you want to be in the gallery set add rel="wbox[yourgalleryname]" to the anchor tag.

much trippyness...is that a word!? my attempt at an arty shot my cat hiro....ahhhhhhhhh hahaha, mooned you!

Code:
<a href="images/trippy.jpg" rel="wbox[weeb]" title="much trippyness...is that a word!?">
<img src="images/trippy_thumb.jpg" width="75" height="75" />
</a>
<a href="images/train_station.jpg" rel="wbox[weeb]" title="my attempt at an arty shot">
<img src="images/train_station_thumb.jpg" width="75" height="75" />
</a>
<a href="images/hiro.jpg" rel="wbox[weeb]" title="my cat hiro....ahhhhhhhhh">
<img src="images/hiro_thumb.jpg" width="75" height="75" />
</a>
<a href="images/moon.jpg" rel="wbox[weeb]" title="hahaha, mooned you !">
<img src="images/moon_thumb.jpg" width="75" height="75" />
</a>

Slidey WeebBox

Use this to jump straight in to a slideshow, it's almost the same as above but for each first anchor use rel="slidey[yourgalleryname]". For this example I've used empty anchors to include the other images.

Slidey!!!

Code:
<a href="images/trippy.jpg" rel="slidey[weeb]" title="much trippyness...is that a word!?">
<img src="images/trippy_thumb.jpg" width="75" height="75" />
</a>
<a href="images/train_station.jpg" rel="slidey[weeb]" title="my attempt at an arty shot"></a>
<a href="images/hiro.jpg" rel="slidey[weeb]" title="my cat hiro....ahhhhhhhhh"></a>
<a href="images/moon.jpg" rel="slidey[weeb]" title="hahaha, mooned you !"></a>

And that's about it! there are some configuration options in weebbox.js for you to play around with that I'm sure you'll get the hang of instead of pestering me about it...but if you are pretty dim then feel free enter your questions below

Comments

Slim Jim - 2008-06-02 12:32:11
Man, that's blown my mind! Cool photos too!

Weeb - 2008-06-03 12:20:47
Cheers Slim, it's nice to be appreciated!

Ozh - 2008-06-12 20:21:14
Quite interesting indeed, I've added it to the "Lightbox Clones Matrix" One (very minor) comment: the link for the next or previous image (iinside the popup) is a href="#". This ends up with a (not so pretty) URL such as weebbbox.com/#

Weeb - 2008-06-13 09:12:08
Nice one dooode, I've taken on board the href thing and sorted it out...thanks for that!

sascha - 2008-06-16 10:13:11
may I also use it with images maps?

Weeb - 2008-06-16 10:24:19
sascha, to be honest I havent tried but I think it should work as the code for that is in there from loskesh's original.

Alain - 2008-07-02 08:51:58
I know I need to leave a (nice) comment, but even though I like the weebbox, I need to report a bug and I didn't find anywhere else to do so. I experience an issue with Firefox 3 (not a problem in IE7). I have 2 images in a WeebBox gallery. I click on the first link, and the weebbox appears. I close the weebbox. I click on the same link (or the second image), and this time the frame of the weebbox is displayed at the correct place, however the image is displayed below outside of the frame. Have you got an idea?

Weeb - 2008-07-02 08:58:03
Alain, sorry about that...I'll have a look in to it and get back to you!

alain - 2008-07-02 17:29:00
Let me know if you need my email to send you screenshot!

Weeb - 2008-07-03 09:02:05
Alain, I'm trying to reproduce this but I'm having no luck. can you send a screenshot or even better the code to info@weebbox.com.

HBW - 2008-07-04 05:01:53
Is there any way to move caption to right side of the image?

Weeb - 2008-07-04 08:51:25
HBW, sorry but as of yet you can only display the caption above or below!

Alain - 2008-07-04 14:16:51
Weeb, Have you been able to check the url provided?

Richard - 2008-07-08 14:20:54
Hi This looks spectacular! i have a problem im currently using lightbox on my site. www.richvisuals.com.au . i understand that you now replace the files and change ''lightbox'' to 'wbox' in the code. but i not sure what else to do as i cant get it to go. Im a photographer and i find weebox great for showing images. cheers Richard

Richard - 2008-07-08 17:04:53
i just worked it all out and it's the BOM. well done from Australia. Thanks also how do i make the caption on the bottom?

Weeb - 2008-07-09 08:48:11
Richard, glad you like it...in the WBoxOptions object change dataDisplay to "bottom"

Pauline - 2008-07-10 17:44:36
Weeb, Great Lightbox. Currently using the Lightbox on http://www.drewsviews.com/construction/index.html but having trouble, tested it locally on my pc and it worked fine, it is when I upload it onto the server that trouble starts. In IE7 doesn't seem to work at all. In Firefox 3 here are the problems: 1. Bluestone verandah & start of Eltham job - not working 2. Merrijig pathway & bridge - only shows 3 out of the 6 images 3. Mornington - shows 1 out of the 3 images Will probably donate some loose change to your 5 starving kids

richard - 2008-07-11 08:00:28
I think there is a problem when using it on safari, the images fall outside the box and enlarge and pixelate? is this just a temp bug? chhers Richie

Weeb - 2008-07-11 08:58:28
@Pauline - Have you used the downloaded version or copied the code from this page...The reason I ask is because you seem to be linking to the binary clock (only on this page). I'd suggest downloading the full thing again and starting over (minus the binary clock).

@Richard - There seems to be an issues with Safari. What version of safari are you using? and on what platform?

richard - 2008-07-11 13:40:57
I use pc but i noticed this problem on my friends mac. ta

Dana - 2008-07-14 23:22:39
Hi Great effects. It does seem to have some issues with Safari, luckily I only use Safari for testing purposes. I think it Might also have some issues with IE7 but I would have to test again. My main question is... does this version of lightbox have the ability to resize the images to fit the viewing area of the visitors browser similar to shadowbox? I didn't see anything in the weebox.js. It would be nice to have the ability as different people have different viewing areas.

pauline - 2008-07-15 00:08:31
I downloaded from the download link, seems to be working ok now, to make the images load faster after I click on the image thumbnail, do I increase or decrease the resizeSpeed? Also I have noticed that sometimes when I click on the image thumbnail, if I have a set, the caption box appears before the image appears, it doesn't load smoothly. Any reason why? Thanks

Weeb - 2008-07-21 08:57:12
@Dana - As of yet there is no option to size the image to the users viewing area.

@Pauline - If you increase the resize speed then it will increase the speed of the animation and not the speed of the image loading, I'm afraid the only way to do this is to get a faster connection! I will look in to the caption box issue for you. ps. thanks for the donation, my kids will eat well today! x

kc - 2008-07-30 04:15:56
Love the gallery from a single image however when the slide show launches it is launching in the top right hand corner of the browser and not slap bang in the center like yours on this page .. any style element or variable that is controlling position? thanks

John Williams - 2008-08-20 04:51:36
Pretty nice site, wants to see much more on it! :)

Taz - 2008-09-07 14:57:19
Great script! The only problem i have is that i have put it in a page where i have also an swf playing and when i call the image, the flash disappears! Any ideas how to fix this?

Ian - 2008-09-15 14:55:11
Hi, Great lightbox,. But im having a problem getting the overlay to extend all the way to the bottom of the image. It works fine if the image doesnt extend past the bottom of my own wrapper div, but as soon as it does the problem occurs - the overlay stops at the bottom of my own wrapper rather than covering the whole screen. Any help would be appreciated... thanks

Weeb - 2008-09-16 10:19:40
Ian, you might want to try messing about with the z-index of the divs, see if that help you out at all

spain - 2008-09-19 08:51:20
in Internet explorer does not work well in, is before the top of the image and makes an effect that is not good ..please fix it

Sabrina - 2008-09-24 19:41:13
Love the changes to lightbox, just what I was looking for!! Because of this, my official opinion is... YOU ROCK! Of course that is all that matters since the world does revolve around me ;)

aaa - 2008-10-03 11:41:18
How do I get the drop down to drop a little faster?

Peter - 2008-10-21 19:56:59
Great script! Well done. I have the same problem like kc. The slide show does not open in the center. In my application it pops up on the top left corner. I am confused, because the sample html page it does work. Which property does control the position? Just for remarks I use a lot of additional css tags, are all needed css tags set correctly?

ryan - 2008-10-30 22:01:36
I had the same problem with loading in top left. I got it to work by matching the doctype and html tags in my pages with the doctype and html used in the sample file.