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!
On Twitter : WordPress tip: How to automatically insert a list of related articles below the post http://t.co/zu07UU2AIj
WPRecipes.com is hosted by VidaHost. Use our exclusive coupon CATSWHOCODE to get a 10% discount on hosting! 
10 Responses
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)
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);
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?
this is what i use for adding lightbox and gallery
function lightbox_regex($content){
global $post;
$content = preg_replace(“/(]*?rel=['\"]lightbox.*)[^>]*?href=['\"][^'\"]+?\.(?:gif|jpg|jpeg|png)\?{0,1}\S{0,}['\"][^\>]*)>/i” , ‘$1 class=”lightbox” rel=”gallery['.$post->ID.']“>’, $content);
return $content;
}
add_filter(‘the_content’, ‘lightbox_regex’);
http://pastebin.com/gEA9te64
here is the code
Thank you very well Chris !
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. ^^
Can you show me a demo if you, so that i can check before i implement it.
Thanks
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.
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?
Trackbacks: