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.
<?php wp_enqueue_style('thickbox'); ?> <!-- inserting style sheet for Thickbox. --> <?php wp_enqueue_script('jquery'); ?> <!-- including jquery. --> <?php wp_enqueue_script('thickbox'); ?> <!-- including Thickbox javascript. -->
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.
Loading ...
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
[...] This post was Twitted by desabol [...]
Nice tip. I never knew that we could use WordPress styles too.
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
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?
HI John,
I have added the functionality of next and back. Please check the blog post thanks.
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.
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
HI Reggie,
Make sure that the image file is placed on the following path. yoursitename.com/wp-includes/js/thickbox/tb-close.png
Thanks
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”;
How can you change tis so you do not have to click the image, just rollover with mouse?
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.
You are right Remiz. But the thing is that we cant make sure that all blog theme has a “post-content” class.
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
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?
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
HI Freelance jobs,
I have added the functionality of next and back. Please check the blog post thanks.