How to automatically add rel=”lightbox” to all images in wordpress

Here i gonna show you how to add lightbox Effect to your wordpress Post Images.


The simple and easy to use jQuery plugin Lightbox is applying effect to open images in fancy full-screen boxes. It is very easy to use.Integrate this files with your wordpress theme.
Download From Here

For that you have to add a rel=”lightbox” attribute to each image you want to open in a lightbox. Here’s a code that will help you to automatically add the rel="lightbox" attribute to all images embedded in your Wordpress posts.

Paste the Following code For applying rel="lightbox" to every image of your page or post.

Add this code in your functions.php file of your Theme.


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;
}


Thats it, Enjoy Your Image Light box.

Comments

  1. Very cool, Syed. Could you help me modify it to apply the replacement only if the link does not already have a "rel" tag?

    (I want to add lightbox functionality to old posts but my new posts already contain prettyPhoto calls that I don't want to overwrite)

    ReplyDelete

Post a Comment