Home > WordPress > WordPress 2.7 – With Built In LightBox!

WordPress 2.7 – With Built In LightBox!

January 7th, 2009. Posted By Larry Monte
Leave a comment

wordPress With three short lines of code in your theme’s header.php file, you can instantly have lightbox capabilities on your WordPress 2.7 Blog.

In case you haven’t poked around the backend since your upgrade to Wordpress 2.7, this version includes the ThickBox Script for previewing and selecting themes. (Or was this in 2.6 also? Can’t remember.) If the code to do this is already there, then why not use it on the front end too?

Here is all you need to do:

Go to your theme directory and load ‘header.php’ into your editor. Add the following three lines within the <head> </head> tags:

<script type="text/javascript" src="wp-includes/js/jquery/jquery.js"></script>

<script type="text/javascript" src="wp-includes/js/thickbox/thickbox.js">
</script>

<style type="text/css" media="all">
@import "wp-includes/js/thickbox/thickbox.css";</style>

Save/Upload the changes. That’s it! You’re now ready to use ThickBox on the front end.

You only need to add a couple extra parameters to your links to get it to work.

<a href="license.txt?height=600&width=800" title="WordPress – License.txt" class="thickbox">CLICK HERE FOR EXAMPLE</a>

In this example, I’m displaying a text document (the WordPress License) within a scrollable window. Appending ‘?height=600&width=800’ to the link defines the size of the lightbox. The class="thickbox” completes the job.

CLICK HERE FOR EXAMPLE (Note: May not work within all news readers – visit the site)

Works for images too! More options for using ThickBox, can be found here. Just ignore the download and install instructions as that’s already been done by WordPress. :)

I just stumbled onto this and thought I would share.

WordPress , ,

  • It seems any page containing a Disqus comment box breaks this. Works on my front page, but not on single post pages containing the input box.

    Oh well. This was just a quick hack I discovered. There are likely much better alternatives out there. :)
  • For some reason, this works if I click on images on my main page, but when I open the actual post, clicking the same images just changes the page to show me the image. Thinking there might be script problem with my theme, I switched back to the standard them and got the same results. Any idea what might be happening?
  • In the example I've used in the post, I have specified a relative path. (license.txt) Try using an absolute path with the full www address.

    Also ensure that the header entries for the 2 scripts are carried across all your pages. It should be but I'm just taking a shot in the dark on that one. ;)

    HTH,
    Thanks...
blog comments powered by Disqus