ad

How to add Lightbox Effect in Embedded Photos in WordPress Without Any Plugin

lightbox

There are many websites based on WordPress which comes with lightbox effect. Clicking on post images opens Images in a cool lightbox. If your theme does not have this lightbox effect for images, you can manually add this effect in theme with few lines of code

Lightbox effect in WOrdPress

For this, we are going to use popular lightbox plugin by lokesh Dhakar. I also used this lightbox plugin in my recently launched free personal portfolio template. Download the lightbox plugin from official website. Now upload the js file and css file of the plugin to themes folder. Include both JS and CSS files in header.php of your theme. Be sure to check the path of files.

<script src="lightbox/js/lightbox-2.6.min.js"></script>
<link href="lightbox/css/lightbox.css" rel="stylesheet" />

Next step is to add rel=”lightbox” in all images which you want to open in lightbox. You can use the following code to automatically add rel=”author” in all post images.

Now add this code in functions.php file of your theme.

add_filter('the_content', 'add_lightboxrel');
function add_lightboxrel($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;
}

If you do not want to edit theme manually, you can install freely available plugins for this. There are many WordPress plugins which automatically add lightbox effect in WordPress websites.

Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

0 Comments

Leave a comment

Comment policy: We love comments and appreciate the time that readers spend to share ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

2020 UseThisTip Developed By Deepanker