Pop-Up Picture Box Thingy For WordPress Blogs
Bookmark or Share
Yeah, well I couldn’t think of the common term for it. It’s technically called a “ThickBox” in the CSS code. Anyways, every free wordpress.com blog has the Thickbox in their CSS (edit: it only appears if you’re using the Social Vibe widget) it’s just not viewable in the CSS editor. I saw the “lightbox” code in the CSS a while ago but wasn’t sure how to get it to
work. Then today, I visited Devblog’s new anime blog in the wallpaper section, looked at his links and saw the class “class=”thickbox” and then I found out how to do it!!! So, here goes how to add it. First, here’s what it looks like, just click on the picture.
The picture will only get as big as the original size of the picture from my understanding. Anyways, just make sure you link to the actual image url of the picture and not an attachment page. Looks something like,
<a class=”thickbox” href=”http://sensicology.files.wordpress.com/2009/07/obama-platoon1.jpg”><img title=”obama-platoon” src=”http://sensicology.files.wordpress.com/2009/07/obama-platoon1.jpg” alt=”obama-platoon” width=”68″ height=”80″ /></a>
The same thing will work if you’re just linking to an image. For example, MY CAT!! You can see the difference to how large the image is. The first picture has the thickbox class and the second picture just links to the original image url. In my opinion I like the second one but I know theres a lot of wordpressers that would love to have a pop-up box.
Don’t know how to do this with galleries, text or videos, yet! But anything is possible….kind of…but I kind of have a headache now, so it’s best I not think a lot right now…
oh, and if you have the CSS upgrade, the appearance of the box can be changed, I just recommend getting the firefox addon, Web Developer, so you can make changes in real time and access code you wouldn’t see in the CSS editor on wordpress.
very cool thanks for sharing.
no problem, thanks for stopping by!
Too much
komplikayshuncomplication, given the number of images I put in every post. I do use lightbox on my homepage, though. It pops up an image that fits in the browser window, and there’s usually a link (after the description) under said image for the full size version.By the way, that platoon thingy doesn’t work for me. 404.
all it is, is adding the thickbox class, it’s not komplikayshun for you, it’s toomuchworkshun
Yeah, when I look at the lightbox code for wordpress blogs a while ago, there was classes for “next” buttons, descriptions and stuff, but that doesn’t appear in the thickbox code. They added it for the socialvibe widgets but thickbox is more simpler than lightbox.
I don’t get 404. You sure you’re doing it right. Just click on the picture, lol. Is that the only picture it doesn’t work with?
You’re right. Too much work! Takes me ages to write a post, and I don’t even look at the code part of it. It probably looks like a hurricane passed by.
For images, all I do is middle-click them so they open in another tab and I can continue reading the post while they’re loading.
The Obama image is working now, thanks. It was the only one that didn’t work.
You should wait for your cat to sit reeeeeally still to get a good photo of it. I’ve never been able to photograph my dogs from that angle, as they won’t hold still for long.
lol, yeah today is probably the first time in a while that I used the html editor. I won’t use the popup on this blog but on my other one I might.
hm, happy my click on the image advice worked
Very hard get my cats to stay still when they see a camera. btw, I hope you don’t take a picture of your dogs in the same position as my cat was on my leg
cause theres plenty of jokes dog leg humping jokes out there!Pingback: “Light Box Hack” For Wp.com « Teck~Line
I’m wondering why the first one won’t work at all for me; I get a greyed-out screen with a small white rectangle in the middle, no matter how long I wait. And the second one takes seven seconds to load; is that normal?
I had to re-add the first photo, I think I mistakenly deleted it. It doesn’t take long to load for me, it actually seems to load faster when on the from page of the blog. My longest loading time was 3 seconds, I noticed a few minutes ago when having a lot of tabs open in FireFox that it loaded slower than before, but I think that’s normal with something like this, well at least on my old computer it is.
Okay, the first one loads fine for me, in less than three seconds. Yuck.
Very coooool! How’s come you got better looking smilies in your comments?
Hey! That smilie looked different than what Smilies shows! What gives?
ewwww, new smilies suck arse. I will never be able to do this
now cause I’ll look like an online idiot.
8) 
Testing:
gasp the “lol” smilie doesn’t move anymore, what has my emoticon life become
edit: and now I don’t like 
but, the new smilies are alright, I just don’t like the
I dislike the new smileys Yuke.
Hey! nice of you to link to my new blog
Hope you’re doing great.
Best!
np, I still have your old blog on my blog surfer so that’s how I know
He’s very secretive. Some of us still miss him.
I’m not having any luck with this approach on “galleries”. Am I missing something?
It appears to only work if you’re using the Social Vibe widget. Do you have it on your wordpress.COM blog?
Hello sensico,
Thanks for the tip! It creates a very sexy effect!
You’re Welcome
and sorry if you got an e-mail, I thought post comment by e-mail was activated on this blog lol
Okay so I decided I would learn the Thickbox wp.com hack tonight and noticed that it works on images I don’t have uploaded to my WP.com blog because I use image shack to host my images so I decided to add the class=”thickbox” to the image HTML and sure and behold it worked you can see example <a href="http://teckline.wordpress.com/2009/08/29/getting-rid-of-you-tube-ads/"<Here
Update Okay when I went back to the post and clicked on the image I noticed there was a X at the bottom of the image to close the image which wasn’t there just 5mins ago.
Oops I forgot to close out the Hyper link tag
yeah, I saw the image. The x sometimes shows for me and sometimes doesn’t I don’t know what that’s about.
You’re awesome! Thanks for sharing… and something along this line that I’ve found out: if you are using the iNove theme, you can use the classes
If you want a tidy section in any pages or posts. I thought I would just share…
Thanks again.
Oh seems that they have removed my codes, anyways:
Maybe if you put spaces in the code or don’t close the tags then we can see it. I looked at one of your pages on your blog and your tables looked really nice and neat so do you mean, the classes
class=”box” and class=”boxcaption” in the div tag?
I looked at your html, I never knew those classes even existed. Assuming that’s what you meant, thanks for sharing
Oh yes, I did put in the spaces the second time and it got removed still! And right! I was referring to box and boxcaption. :]
Pingback: Image Thickbox Work Around for WP.com « Teck~Line Lounge
I really can not figure mine out… I’ve been doing this for 4 hours… Can you please help? I upload it as a usual image, then go back into the HTML view from the View view and edit the code like this..
I’ve noticed the difference is ‘ rel=”attachment wp-att-38″ ‘
It pops up, but the link is blank. I’m wanting it to be a thumbnail-ish image in the text, like your platoon obama, then expand to full size so that it’s easily viewable.
http://bframke.wordpress.com/
I would seriously, greatly appreciate anyone’s help.
happy to help, when you insert an image you have a choice to link the image to “post url” or “File url”, click on the “file url” and insert the image, then go to the html code of that image and insert the “class=”thickbox”" and that should do it.
You can also simple make the picture to the size you want and align it and it’ll still popup to the original size like my obama picture.
Let me know if you figured it out.
and actually since you have already insert the picture into the post, on your edit post page is the visual editor, click on the picture and then the icon that allows you to edit the picture setting and click on “link to image” and then update and then enter in the thickbox class.
You are pure awesomness… Thank you very much for going out of your way to help. It works great!
Thank you, and it’s never out my way to help.
I agree with Bframke you are indeed pure awesomeness. clever trick. good work XD
Thank you
thanks for your tricks, i will use it soon…^_^
I know I’m not the first person to say this, but, its not quite working for me. :’(
It almost works. I get the lightbox loading box as if it is going to load, but it doesn’t. Also I only have alt text link where my thumbnail should be.
http://one.abstractions.me/wordpress/robotix/
cause your blog isn’t a wordpress.com blog
that doesn’t make sense. I have wordpress installed on my domain. I’d expect it to work similarly.
this only works for free hosted wordpress.com blogs, you should go over to wordpress.org
well, this works just fine, i will translate this to spanish and post it in my blog, do you agree?
sure, I agree
Pingback: WordPress.comで写真をlightbox風なポップアップで表示する | Me named "JAZZ"
Is it possible to add a lightbox that opens briefly on my worpress.com sight. I plan to use it for announcements.
Easily closeable.
Perhaps timed.
-Matt
yea if you follow the instructions in this post and you have to have the social vibe widget in your sidebar in order for it to work
Right, now how do I have it open automatically upon visit?
no you can only do what’s shown here in the post
Hey there, need a little help…can you check this out and let me know what I’m doing wrong? http://dazeofred.wordpress.com/2010/03/26/new-bicycle-sterling/
I’m a novice at this, trying to make the display of clicked photos better and like what you’ve done above.
you have to be using the social vibe widget in order for this trick to work. So add it by going to your widgets page and then try it.
Pingback: Um jeito elegante de mostrar imagens no Wordpress : Blog do Vicente
Pingback: Popup Text and Image Boxes for WordPress.com « onecoolsitebloggingtips
Thanks for your share
I like it
thank you very much
Cant seem to get this code working on my site but thanks for the post anyway.
Doesn’t work for me either. I’m guessing you need the CSS in your theme.
I did a little more searching and found the WP-JQuery-Lightbox plugin that works perfectly without all the overhead of the prototype or scriptaculous libraries. I don’t have to edit anything, if I link to an image even with text (what I was looking to do) it just works. I don’t have to edit any HTML.
http://wordpress.org/extend/plugins/wp-jquery-lightbox/
that’s fine, but your blog is not wordpress.com, so this post wasn’t meant for those with wordpress.org blogs…
Thanks for this great tip! I’ve tried using it on my wordpress.com blog, but am not getting the exact effect I see you got with the MY CAT link. (sorry, very new to this
)
http://dunelanddeals.com/coupons/
When I click on the image of the George’s Gyros Spot, it pops up an entire page with the new embedded image (a coupon). I added <a class="thickbox" as you suggested – which at least got me to this point & could still work. I was hoping to duplicate the effect you got with your cat image: neat, nice size, but not a new "page".
Do I need to upgrade to CSS to customize this "thickbox" I'm getting (well, more like page popup) or am I doing something wrong?
Any help would be greatly appreciated! Thanks…
this only works if you have placed the socialVibe widget on your sidebar. btw, good luck on your blog, I only recently started couponing here in MI. It’s definitely the way to go to save money
Hmmm…I added the Social Vibe widget in my sidebar (I chose The Nature Conservancy since it seemed appropriate for our nature parks area:)) but it didn’t do the cool box your had…
I will, however, try it again – maybe it will look different if I view the page on another tab instead of in Preview mode in wordpress…
Oh yeah, coupons! I had a site that I paid a $500 monthly host/template fee for and earned 25,000 subscribers in one year…I don’t expect that sort of success with my wordpress blog, but you never know, right?
Thanks!
I just went back to your blog, the popup works for me. I won’t work if you try to view the picture in a new tab
been trying to follow this thread and apply social vide
i have social vibe on my site…so thats done
i have wordpress.com
first of in your posting…i dont see a cat example i see a yellow rose
my main question however…it seems you speak mostly about if the pics are attached via url??
in my site i upload to my media library and go that route…how do you apply all this to uploaded pics…and please use text for dummies…cos i could sword u said go to pic…click edit and add the class=”thickbox” to the http link….is that at beginning?…with space inbetween…cos i tried both and nothing worked
thanks
cnobi.wordpress.com
been trying to follow this thread and apply social vide
i have social vibe on my site…so thats done
i have wordpress.com
first of in your posting…i dont see a cat example i see a yellow rose
my main question however…it seems you speak mostly about if the pics are attached via url??
in my site i upload pics to my media library and go that route…how do you apply all this to uploaded pics…and please use text for dummies in ur reply..cos im totally lost…cos i could sworn u said somewhere to go to pic…click edit and add the class=”thickbox” to the http link….is that at beginning?…with space inbetween…cos i tried both and nothing worked
thanks
cnobi.wordpress.com
Pingback: Pop-Up Picture Box Thingy For Wordpress Blogs « Sensicology « Ashes to Ages
Pingback: A lightbox for wordpress.com « Ashes to Ages
Excellent posts. Thanks for sharing. Working on Jazzing my site up and this should help. Cheers
T
Exactly what I’ve been looking for. Thanks a lot for sharing!
Pingback: The ThickBox on WordPress.com « Forest Wang
To do gallery, you just need a unique rel attribute in all of your a tags
e.g.
<a href=”image1.gif” rel=”myGallery” class=”thickbox”>image1 | <a href=”image2.gif” rel=”myGallery” class=”thickbox”>image2
Example here http://pe20110517.wordpress.com/about/nostalgic-old-layouts/ if you want to see.
Pingback: Wordpress.com lightbox/thickbox trick « Pure-Essence.Net
I was looking for a plugin that lets me use some kind of shadowbox, lightbox or thickbox effects – with no success. Then I found a link to this hack. Awesome little trick to present my photos in the way I want! Thanks for the hack!
Hey
What im trying to do upload a large image that you would scroll down to see the rest of. I dont suppose you know if theres any way of stopping thickbox resizing images – or another way of inserting scrollable images into wp.com in a thickbox style?
Pingback: How to use thickbox/lightbox in wordpress.com « Julkarnyne's Blog
that is a really clever idea!! thanks for posting – really helped me out
I’m having an issue with my header coming through the photo when the thickbox photo pops up? Any way to remedy this?
Thanks!