Auto-lightbox images in WordPress

I’m starting a new side project, where I’ll have to insert lots of screenshots for each blogpost. I’d like to allow users to enlarge images without having to leave the current page. The best way to do this is with a “lightbox,” which darkens the background and displays the image in the center of the screen.

What I would like is just to post an image to the blog and have the lightboxing and image resizing occur automatically. Unfortunately none of the WordPress plugins let you do this; most of them require you to add an extra link with a special tag. So I wrote this short bit of Javascript which extends a popular WordPress lightbox plugin, Lightbox 2. The script takes an image and wraps an “a” tag around it with the rel=”lightbox” attribute set, which triggers the Lightbox code. It also resizes the image to a maximum of 600 pixels wide or high. Here’s the code:

//get all images inside entry content
jQuery(document).ready(function(){
    jQuery(".entry-content img").each(function(){
//get the URL of the image
        var the_url = jQuery(this).attr('src');
//insert a href before image where rel=lightbox
        var a = jQuery("<a></a>").attr({"href": the_url, "rel": "lightbox"});
        jQuery(this).wrap(a);
        jQuery(this).load(function(){
            var the_width = jQuery(this).width();
            var the_height = jQuery(this).height();
            var max_dimension = 600;
            if (the_width && the_height){
                var ratio = the_width / the_height;
                if (ratio >= 1 && the_width > max_dimension){
                    jQuery(this).css('width', max_dimension);
                    jQuery(this).css('height', the_height * max_dimension / the_width);
                }
                else if (ratio > 1 && the_height > max_dimension){
                    jQuery(this).css('height', max_dimension);
                    jQuery(this).css('width', the_width * max_dimension / the_height);
                }
            }
        });
    });
});

You can also download the file here. To install, edit the header.php file of your WordPress directory and add the following lines above the

<?php wp_head(); ?>

line:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="/path/to/img.js file" type="text/javascript"></script>

Then you’re done!

Liked what you read? I am looking for work.

3 thoughts on “Auto-lightbox images in WordPress

  1. Billy Tsapos

    can you extend this to actually automatically do the same with posts instead of images? I have a table that is populated automatically with posts from certain categories. I want whenever the users click to have that post appear to them in a lightbox view (post title, comments, practically everything except for the header and footer). I using lightbox plus but I think the shortcodes are the same. Thanks for the getting back to me with your opinion I have been busting my head for a solution…

    Reply
  2. kevin Post author

    Hi Billy, You want to put the code in a file called img.js or whatever – it’s Javascript code. Then you edit the header.php file to add a link to your Javascript img.js file as I showed above.

    The Lightbox plugin works with any link element that has a rel=”lightbox” attribute, and sets it up so it flashes when you click on it. So you can put your post content in a light box if you make the whole thing clickable and attach rel=”lightbox” to it. That doesn’t sound very usable though.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Comments are heavily moderated.