Thursday, July 6th, 2006

Slightly ThickerBox

Category: JavaScript, Library, UI

<>p>Lightboxes seem to be as hot as auto complete widgets or mashups these days!

Jason Levine has modified Cody Lindley’s Thickbox code to create Slightly ThickerBox.

The modifications allow the script to generate “Previous Image” and “Next Image” links. The result is that you can use Slightly ThickerBox to create image galleries. In addition, you can create groups of galleries by setting a “rel” attribute on the links. (I also moved the Caption and Close link to the top and made the script case insensitive.)

Usage

To use Slightly ThickerBox, add the following HEAD section of your website.

  1. <script type="text/javascript" src="js/jquery.js"></script>
  2. <script type="text/javascript" src="js/thickbox.js"></script>
  3. <link rel="stylesheet" href="css/thickbox.css" type="text/css" media="screen" />

Now, where you want the images to appear, add the following code:

  1. <a href="Filename.jpg" class="thickbox" rel="GroupName" title="Caption goes here" target="_blank"><img src="Thumbnail.jpg" /></a>

Slightly ThickerBox

Related Content:

Posted by Dion Almaer at 10:34 pm
24 Comments

+++--
3.8 rating from 43 votes

24 Comments »

Comments feed TrackBack URI

Kind of annoying how the box disappears when you click through the images.

Comment by Dubiousd — July 6, 2006

I’d say we’ve already seen this quite nice in Lightbox v2 : http://www.huddletogether.com/projects/lightbox2/ – or am i’m missing an important feature?

Comment by phroggar — July 7, 2006

I’d say we’ve already seen this quite nice in Lightbox v2 – or am i’m missing an important feature?

Comment by phroggar — July 7, 2006

It does not work in Firefox…. but looks pretty cool in IE.

Comment by Alex — July 7, 2006

今日阅读/资源 06.07.07

> Google Pack 1.2.544.18888.beta > Mess Patch for Windows Live Messenger 8.0.792 (current version) – 虹加入Creative Weblogging – Slightly ThickerBox – 从百草园到三味书屋–息乐园终于关闭 – News Content Analysis Through Google – …

Trackback by Wangtam — July 7, 2006

last image overflows the white container :(

Comment by Benji — July 7, 2006

The most interesting thing about this is that it use jQuery, something you have not mentioned on this site yet…

Comment by Dean Edwards — July 7, 2006

I require a “Slightly Larger Than the Previous Fifteen Lighboxes” implementation. Thankfully, if I wait for a day there will be a post about it. How is this news? Someone moved links and modified the lacklustre post from last week? Come on, you’re losing me here …

Comment by Dan — July 7, 2006

phroggar, what version of FireFox are you using? I tested it in v1.5.0.4 here and it works fine.

Also, as Benji said, Slightly Thickerbox (like Thickbox before it), uses JQuery instead of Prototype/Scriptalicious. This means that the JavaScript code only takes up 40KB.

Comment by Jason Levine — July 7, 2006

It does not work on Firefox 1.5x Mac OS 10.3.9

I put the codeblock for the image preloader first, in the zip I downloaded I saw you put the preloader block at the end

It worked if I did:

var urlString = /\.jpg|\.jpeg|\.png|\.gif|\.html|\.htm|\.php|\.cfm|\.asp|\.aspx|\.jsp|\.jst|\.rb|\.txt/g;
var urlType = url.toLowerCase().match(urlString);

if(urlType == ‘.jpg’ || urlType == ‘.jpeg’ || urlType == ‘.png’ || urlType == ‘.gif’){//code to show images

var imgPreloader = new Image();
imgPreloader.onload = function(){

// rest of code

Comment by Johan — July 7, 2006

to clarify a little more: the preloader got stuck otherwise

Comment by Johan — July 7, 2006

Also there are no styles added for the prev next buttons/links – this might be the cause of the enlarged images portrude their wrapper boxes

Comment by Johan — July 7, 2006

Not entirely true: to fix the enlarged image going out of its box
// add more *padding*
TB_HEIGHT = imageHeight + 90;

Comment by Johan — July 7, 2006

Oops. Just wanted to quickly apologize to phroggar and Alex. I misattributed Alex’s comment to phrogger.

Alex, what version of FireFox are you running that it’s not working in?

Comment by Jason Levine — July 7, 2006

Ajaxian’s business model:
-Identify keywords via google AdWords keyword hunter that are high traffic.

-Post redundantly about those topics in order to boost PageRank and drive AdWords revenue

-Repeat ad nauseam.

-Keep comment system broken to ward against savvy people that have caught commenting that they’ve caught on.

Comment by Ryan Gahl — July 7, 2006

Hey Jason.

Have you tried setting the Margin and Padding to 0px in the body to get rid of the gap in the overlay (on the right side)?

Comment by Ron — July 7, 2006

> FireFox probs

It has to do with the execution order of the code, probably the image.onload, Firefox on Win is not the same thing.

Comment by Johan — July 7, 2006

> the gap in the overlay (on the right side)?

Setting this CSS: min-height:100%;height: auto; _height: 100% for the overlay box
removed any gap in the overlay

Comment by Johan — July 7, 2006

Thanks Johan, I’ll try adding that code.

Comment by Jason Levine — July 7, 2006

Ryan Gahl is SMRT, and don’t you forget it

Comment by Dan — July 7, 2006

More problems with arrays:
Eg 10 images and image #7 is clicked to show large, no forward button

Comment by Johan — July 9, 2006

[...] Ajaxian is running an article featuring the latest lightbox clone – Slightly Thickerbox [...]

Pingback by Foobr » Blog Archive Lightbox clones — July 11, 2006

This is great stuff!

Anybody figure out how to place this into an Openlazslo application…

(I have been tryign to get this going fo ran hour, without success)

Cheers & good luck GregH

Comment by greghuddleston — July 18, 2006

Thank you Ryan Gahl!!!

I spent about 2 1/2 hours trying to get rid of this gap on the right side of the overlay (only in IE of course). Adding 0 padding/margin to the HTML in my CSS did the trick. Thanks a million!!!

Comment by Jon — March 25, 2007

Leave a comment

You must be logged in to post a comment.