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!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.
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. :]
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…^_^