Thursday, July 6th, 2006
Slightly ThickerBox
Category: JavaScript, Library
, UI
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.
HTML:
Now, where you want the images to appear, add the following code:
HTML:
Related Content:
- Photos and Video: Blackberry Storm special report
The Blackberry Storm is positioned as a direct competitor to iPhone by Apple Inc., the T-Mobile G1 by HTC, and the HTC Touch Pro from... - How Blu-Ray won the battle
One of the great things about hindsight is that it allows you to boast of being right all along when it was often more luck than skill. These that... - How Blu-Ray won the battle
One of the great things about hindsight is that it allows you to boast of being right all along when it was often more luck than... - RPG III input fields
3.9 rating from 38 votes
Kind of annoying how the box disappears when you click through the images.
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?
I’d say we’ve already seen this quite nice in Lightbox v2 – or am i’m missing an important feature?
It does not work in Firefox…. but looks pretty cool in IE.
今日阅读/èµ„æº 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 – …
last image overflows the white container :(
The most interesting thing about this is that it use jQuery, something you have not mentioned on this site yet…
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 …
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.
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
to clarify a little more: the preloader got stuck otherwise
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
Not entirely true: to fix the enlarged image going out of its box
// add more *padding*
TB_HEIGHT = imageHeight + 90;
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?
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.
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)?
> 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.
> 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
Thanks Johan, I’ll try adding that code.
Ryan Gahl is SMRT, and don’t you forget it
More problems with arrays:
Eg 10 images and image #7 is clicked to show large, no forward button
[...] Ajaxian is running an article featuring the latest lightbox clone – Slightly Thickerbox [...]
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
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!!!