Create Thickbox in WordPress with just 3 lines of code.
Posted by Sunil | Filed under Wordpress
We already know that WordPress is showing Thickbox in its backend (wp-admin). We can call the same Thickbox in the WordPress theme also. It is very simple and it will help to remove your Thickbox plugin(if you are using it).
First of all we need to insert the scripts necessary for creating the Thickbox. As I said earlier, WordPress is using jQuery and Thickbox already in its backend. So we just need to call the jquery and thickbox.
All these 3 lines of code should insert just before the < ? php wp_head( ) ; ? > function
These codes will include necessary files for your Thickbox. So Thickbox is ready for its functioning. Make sure that you have included < ? php wp_head ( ) ; ? > and < ? php wp_footer( ); ? > in your header and footer files respectively.
Now we can test it by uploading the image from backend by creating a post. Please note that after the image got uploaded, we need to link the thumbnail image to the original image. And we need to include the class for the anchor tag like this. class=”thickbox”.
Just save the post and see it in your blog.
[update: Somebody asked me how we can enable the Next and previous button on the thickbox. For getting that functionality we need to add rel="thickbox-demo" or rel="something" next to the thickbox class. So it will look like this
]
Hope you have like it. Follow me on twitter or subscribe my feed for latest updates.
Tags: no plugin, Thickbox, Wordpress
22 Responses to “Create Thickbox in WordPress with just 3 lines of code.”
Leave a Reply
You must be logged in to post a comment.
July 11th, 2009 at 5:46 pm
Instead of adding class thickbox in post, I added one more line of js. So that it will add class for all a tags which contains image in it.
[code] $(".post-content a img").parent("a").addClass("thickbox"); [/code]
So that you can change your thickbox to lightbox(or whatever) latter. And no need to worry about old posts for which you didnt added the class.
~R
July 11th, 2009 at 5:59 pm
You are right Remiz. But the thing is that we cant make sure that all blog theme has a “post-content” class.
July 14th, 2009 at 6:47 pm
[...] This post was Twitted by desabol [...]
July 14th, 2009 at 11:27 pm
Nice tip. I never knew that we could use WordPress styles too.
July 22nd, 2009 at 9:40 am
Hi..
I was test it and it’s worked. But I have another question, I was check on your DEMO and your DEMO contain some navigation image on the thickbox, How to added this navigation, Image Name and Close Button?
Because on my Demo, this navigation and name of the image and close button didn’t displayed
July 22nd, 2009 at 10:46 am
Hi Freelance Jobs.
I have added these images as a set. Thats y the navigation is coming. If you upload multiple images through wordpress media upload, It will display automatically. Please let me know if you have any doubt
July 22nd, 2009 at 7:43 pm
So the images not upload on when we create new content? We need to create on media upload first?
If we don’t have any sets, it’s possible to display close button?
July 22nd, 2009 at 7:45 pm
Another Question is… how to create images sets on WordPress? I try to find how to do this but I still can’t found any solutions
September 17th, 2009 at 5:31 pm
I have the same question as Freelance Jobs. I have uploaded all my images and now it directs me to the galley tab. However, how do I make it so that it looked similar to your Multiple file upload problem post where you click on the image and you have the ability as the viewer to click next within the thickbox?
September 18th, 2009 at 7:44 am
HI John,
I have added the functionality of next and back. Please check the blog post thanks.
September 18th, 2009 at 7:46 am
HI Freelance jobs,
I have added the functionality of next and back. Please check the blog post thanks.
October 18th, 2009 at 10:19 pm
Thanks for sharing this tip. You might want to consider mentioning which file the code should be inserted into for those who are not familiar with such things.
November 6th, 2009 at 8:53 pm
Sunil,
I tried this on a single image in my post. It works great, except that the close button does not display.
Must I have more than one image for it to display?
Reggie
imreggie2@gmail.com
November 8th, 2009 at 7:27 am
HI Reggie,
Make sure that the image file is placed on the following path. yoursitename.com/wp-includes/js/thickbox/tb-close.png
Thanks
April 8th, 2010 at 12:06 pm
HI Freelance jobs, maybe it’s helpfull …
put this javascript on the footer.php after calling
var tb_pathToImage = “/wp-includes/js/thickbox/loadingAnimation.gif”;
var tb_closeImage = “/wp-includes/js/thickbox/tb-close.png”;
May 9th, 2010 at 6:54 am
How can you change tis so you do not have to click the image, just rollover with mouse?
August 11th, 2010 at 9:35 pm
I’m working connecting the thickbox to the database, and it’s kicking my butt. Probably because I’m trying to do something a little too fancy with PHP classes. In any case, any pointers for that would be welcome.
February 11th, 2011 at 5:08 am
That fixed the relative path problem. Thanks @duepi!
March 9th, 2011 at 5:31 pm
For any reason the above three lines haven’t worked for my blog. But by replacing wp_enqueue_script(‘thickbox’) with wp_print_scripts(‘thickbox’); everything is working fine. See more thickbox options at http://jquery.com/demo/thickbox/
Thks from Germany
March 27th, 2011 at 4:25 am
Where this code >> $(“.post-content a img”).parent(“a”).addClass(“thickbox”);
I need to paste in thickbox.js file ?
April 23rd, 2011 at 6:38 pm
how and where do i use this piece of jqeury?
July 20th, 2011 at 11:24 am
where should i include the line:
$(“.post-content a img”).parent(“a”).addClass(“thickbox”);
?
I’ve included it in the header.php file in there and i get the error:
PHP Fatal error: Function name must be a string in E:\***\header.php on line 29
Maybe i’m missing something, i just pasted the line of code there just like that.