Drupal Specialist Journal

Before we start, you can use lightbox package from here. We will do some tricky programming using Javascript especially with Lightbox and jQuery. I know there are many plugins which can make your life easier than this, but I bet you want to learn something here as I am who want to share about this “little” piece of amazing code .

First, download the lightbox package. I assume you use WP 2.5+ here because we want to utilize jQuery to do the magic. After unpacking it, you may copy the files as following:

• close.gif and loading.gif to your wp-content/themes/your_theme/images/
• lightbox.js to your wp-content/themes/your_theme/
• style.css, you can add the piece of lines to your theme’s style.css

Okey, open your lightbox.js and find loadingImage and closeButton variable. Change it to reflect your theme path, then open your template page which one you want to add this lightbox capability. Example: index.php, add the following code:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/lightbox.js"></script>
<script type="text/javascript" src="/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript">  
  jQuery(document).ready(function()  {    
  jQuery('#content').find('a').attr('rel','lightbox');  
});
</script>

You can change the #content, with your ID elemen of your layout page. You can use class too. After that, upload your file and try to create post, insert image into the post (you better insert thumbnail instead of medium or large size), save and then try to click thumbnail image on that page.

You can’t see the lighbox worked, you can email me