WordPress 2.7 – With Built In LightBox!

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.

  • http://www.chaddyess.com Chad

    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?

  • http://www.tornelements.com LarryMonte

    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…

  • http://www.tornelements.com LarryMonte

    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. :)

  • http://www.tornelements.com LarryMonte

    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. :)

  • Pingback: Crackberry flight | pamibe()

  • http://www.tornelements.com LarryMonte

    PLEASE NOTE!!!

    This hack no longer works under WP 2.9. Use this article at OWN RISK!

  • Andy

    Do you (or anybody) know what the 2011 equivalent to this hack is? Or is it not needed at all?