DISCLAIMER: this post is older than one year and may not be up to date with latest WordPress version.

The well known jQuery plugin Lightbox is a very simple way to open images in fancy full-screen boxes. It is very easy to use, but you have to add a rel=”lightbox” attribute to each image you want to open in a lightbox. Here’s a cool code snippet to automatically add the rel=”lightbox” attribute to all images embedded in your posts.

Paste the following code snippet in your functions.php file. Once done, a rel=”lightbox” attribute will be automatically added to all images embedded in a post.

add_filter('the_content', 'my_addlightboxrel');
function my_addlightboxrel($content) {
       global $post;
       $pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
       $replacement = '<a$1href=$2$3.$4$5 rel="lightbox" title="'.$post->post_title.'"$6>';
       $content = preg_replace($pattern, $replacement, $content);
       return $content;
}

Thanks to Tyler Longren for the snippet!

Tags

10 Comments

  1. Hi

    Great tip !!!

    Is there any way to detect if we’ve existant rel attributes ?

    On my photoblog, I’ve sometimes small “galleries” (several pictures with a rel=”lightbox[thema]” for example)

  2. This isn’t very fast way to do this. It’s better to add this then the image inserted. that way you don’t need to run this on every single time a post is shown. Although it won’t work on already existing posts, you could run you script on the DB to replace that once.

    This script adds a ‘img-lightbox’ class on the A tag when inserting an image to a post.


    function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
    $classes = 'img-lightbox'; // separated by spaces, e.g. 'img image-link'
    //
    // check if there are already classes assigned to the anchor
    if ( preg_match('//', $html) ) {
    $html = preg_replace('/(
    )/', '$1 ' . $classes . '$2', $html);
    } else {
    $html = preg_replace('/(
    /', '$1 class="' . $classes . '" >', $html);
    }
    return $html;
    }
    add_filter('image_send_to_editor','give_linked_images_class',10,8);

  3. Not sure how this works. Does WordPress have something built in that uses this extra code? Or now that the rel=”lightbox” is there I need to do something?

  4. Thank you very well Chris !

  5. Hey, nice snippet. Worked well. Just on the title tag, what if I want the caption of the image to appear instead of the post title? Thanks. ^^

  6. Can you show me a demo if you, so that i can check before i implement it.
    Thanks

  7. Not sure if anyone else has run into this not working on galleries, but if you do than you may want to try changing the priority of the add_filter function.

    Basically change this:

    add_filter(‘the_content’, ‘my_addlightboxrel’);

    to this:

    add_filter(‘the_content’, ‘my_addlightboxrel’, 50);

    so it will fire after the gallery short code creates linked images.

    Note: I just randomly picked 50 to give it a later execution than the default 10, as I’m not sure when the gallery creation happens.

  8. Hi

    I’m trying to customise wp-property plugin and this doesn’t seem to add the rel lightbox tag to images being rendered in a property page but it does work on posts and pages

    Any ideas on how to do this?

Leave a Comment

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