Add Lightbox Script to Your WordPress Blog

Last Updated: January 11, 2021 | Reading Time: 2 minutes

There are bunch of WordPress plugins to handle Lightbox / popup / modal into your blog easily. But doing it manually is always a challenge. I love working with Magnific Popup recently, not just its fast and lightweight script, also it free to use. I also use this script in one of my plugin.

Get The Script and Upload

Now go get the script, visit the author’s page. You can also use the Build Tool to get the script in the minified and optimized version. Copy the code to a new file and save it as jquery.magnific-popup.min.js

Next, we should get the CSS file, you can get it here, and save it as magnific-popup.css.  The last one is to create custom call script, create new file and name it magnific-init.js. I added this code in it.

jQuery(document).ready(function($) {
$('.magn-popup').magnificPopup({type:'image'});
});

Above script says that if class name “magn-popup” found will run magnific popup script. As an example:

<a class="magn-popup" href="/link/to/image">
<img scr="/image/source.jpg" />
</a?>

Next thing is to upload it to your active theme. I put them all in a folder named “magnific”.

Integration to WordPress

After you have both files uploaded. Next thing is to add the script into theme and call it by modify the functions.php file. Create a function, add this script to the end of functions.php:

function add_magnific_popup() {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'magnific-popup', get_stylesheet_directory_uri().'/magnific/jquery.magnific-popup.min.js', 'jquery', '1.0.0', true );
wp_enqueue_script( 'magnific-popup-init', get_stylesheet_directory_uri().'/magnific/magnific-init.js', 'jquery', '1.0.0', true );
wp_enqueue_style( 'magnific-popup-style', get_stylesheet_directory_uri().'/magnific/magnific-popup.css' );
}
add_action( 'wp_enqueue_scripts', 'add_magnific_popup' );

The JS scripts above will be loaded in footer, but the css will be loaded in header.

Next is to set the call, there are methods to set the call by adding class to the tab manually,  set a filter to the_content, or even to add the hook to media library, but I will give you the simple and safest solution is by using jQuery.

The theory is to add the class name “magn-popup” to every image link. So every time some one click on it, it will trigger the magnific popup to run. Add the following function to  your functions.php file:

function add_magnific_popup_trigger_class() {
$magnific_call = '<script type="text/javascript">';
$magnific_call .= 'jQuery(document).ready(function($) {';
$magnific_call .= '$(\'a[href*=".png"], a[href*=".gif"], a[href*=".jpg"]\').addClass(\'magn-popup\');';
$magnific_call .= '});';
$magnific_call .= '</script>';

echo $magnific_call;
}
add_action( 'wp_head', 'add_magnific_popup_trigger_class' );

The above function will add class name “magn-popup” to all of your image links with png. gif, and jpg  file formats. The script must be called before jquery.magnific-popup.min.js, so I added it to the header.

The above method will also work on another lightbox scripts available, either Fancybox, FrescoJS, Pretty Photo, you name it.

Cheers.