Adding a lightbox to WordPress without using a plugin
Sometimes one wants more control over how features are added to the site. Giving the option to either use a plugin or a jQuery scripts creates better control over the site one is working with. Most of the below jQuery lightbox – popup scripts also have a WordPress plugin available.
Adding a lightbox is one of areas I choose to use jQuery probably because I can. When I find a lightbox/gallery plugin that offers a lot more features then what I show below I might instead use it to cover my needs in this area. I might also create an article for the lightbox/gallery plugin as well.
Colorbox
jacklmoore.com/colorbox
There are mulitple demos available. Go to the above link and check them out.

Using Colorbox.
->> A clicked image which shows a title top left, image 1 of 8 (depends how many images are on the page), Arrows left and right. There are different styles to choose from.
1. Go to the Colorbox web site and download the colorbox master zip file.
2. Check out the various examples and find one you want to modify.
3. In the root of the child theme folder add a new folder and call it colorbox.
4. Copy the images folder along with the content and the colorbox.css from the master colorbox example into the new colorbox folder.
5. From master colorbox folder also copy over the jquery.colorbox-min.js to the child theme colorbox folder.
6. Make a new js file and call it colorbox-init.js. Save it in the colorbox folder. This file will then initialize colorbox telling it how it is to be used. Add the following code:
/* Initialize jQuery Colorbox*/ jQuery(function( $ ){ $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]').colorbox({ transition:'none', rel: 'gallery', opacity:.85, title: function() { return $(this).find('img').attr('alt'); } }); });
For additional options see: www.jacklmoore.com/colorbox/ -> Settings.
In the root folder of your child theme there should now be a colorbox folder containing:
An images folder (with content), colorbox.css, jquery.colorbox-min.js and the colorbox-init.js.
Options that I used:
I decided not to use any transition.
Rel groups images together. Adding this also adds the arrows to go left and right.
Adjusted the opacity so one can see through the black background.
Title function is there so the title is added above the opened image.
7. In the child theme folder: functions.php file. Add the following code.
/* Enqueue Colorbox */ add_action( 'wp_enqueue_scripts', 'enqueue_colorbox' ); function enqueue_colorbox() { wp_enqueue_style( 'colorbox-css', get_template_directory_uri(). '/colorbox/colorbox.css' ); wp_enqueue_script( 'colorbox',get_template_directory_uri() . '/colorbox/jquery.colorbox-min.js', array( 'jquery' ), '', true ); wp_enqueue_script( 'colorbox-init', get_template_directory_uri() . '/colorbox/colorbox-init.js', array( 'colorbox' ), '', true ); }
8. Here is the CSS that I modified in the colorbox.css file:
#cboxOverlay { background:#000; opacity: 0.9; filter: alpha(opacity = 90); cursor: zoom-out !important; /* ADDED */ }
I added the zoom-out icon which shows up when moving the cursor outside of the lightbox image. To make it clear that one can click outside to exit the lightbox.
Colorbox resources:
Sitepoint: adding a stylish lightbox effect to the WordPress gallery
code.tutsplus.com: quick tip integrating colorbox into the native gallery shortcode
If you want to check out the plugin there is a Lightbox Plus Colorbox plugin and WP colorbox at the WordPress repository.
The following is some extra info regarding wp_enqueue_script and style.
wp_enqueue_script( $handle, $source, $dependencies, $version, $in_footer );
wp_enqueue_style( $handle, $source, $dependencies, $version, $media );
handle: unique name for script or style.
Example:’colorbox‘
source: the url of the script/style.
Example: get_template_directory_uri() . ‘/colorbox/jquery.colorbox-min.js
dependencies: An array of assets the script/style depends on. Loaded before the enqueued script.
Example: array(‘jquery’)
version: A version number which will be appended to the query. To make sure that the user receives the correct version.
Example: ‘1.0.0’
in_footer: For loading scripts in the wp_footer() at the bottom of the page.
Example: true
media: How the media should be displayed.
Example: screen, print. handheld etc.
Magnific popup
dimsemenov.com/plugins/magnific-popup/
There are examples on the above link to see what the lightbox – popups look like.
A magnific popup image. Stand alone images do not contain arrows. Gallery images do.
1. Download the jQuery plugin zip from Github: github.com/dimsemenov/Magnific-Popup
2. Unzip and go to the dist folder.
Copy the jquery.magnific-popup.min.js and the magnific-popup.css. Create a a new folder you can call magnific-popup in the root of your theme folder paste the two files there.
3. Create a new js file and call it jquery.magnific-popup-init.js. It is to initialize the lightbox.
Save the file into the newly created magnific-popup folder inside the child theme folder.
This is the code I am using.
jQuery(document).ready(function($) { $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]').each(function(){ if ($(this).parents('.gallery').length == 0) { $(this).magnificPopup({ type:'image', closeOnContentClick: true, mainClass: 'mfp-with-zoom', // this class is for CSS animation below image: { markup: '<div class="mfp-figure">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-img"></div>'+ '<div class="mfp-bottom-bar">'+ '<div class="mfp-title"></div>'+ '<div class="mfp-description" style="text-align: left;font-size: 12px;line-height: 16px;color: #f3f3f3;word-break: break-word;padding-right: 36px;"></div>'+ '<div class="mfp-counter"></div>'+ '</div>'+ '</div>', titleSrc: function(item) { return '<strong>' + item.el.find('img').attr('alt') + '</strong>'; } }, zoom: { enabled: true, duration: 300, easing: 'ease-in-out', // By default it looks for an image tag: opener: function(openerElement) { return openerElement.is('img') ? openerElement : openerElement.find('img');} } }); } }); // initialize magnific popup galleries with titles and descriptions $('.gallery').magnificPopup({ callbacks: { open: function() { $('.mfp-description').append(this.currItem.el.attr('title')); }, afterChange: function() { $('.mfp-description').empty().append(this.currItem.el.attr('title')); } }, delegate: 'a', type: 'image', image: { markup: '<div class="mfp-figure">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-img"></div>'+ '<div class="mfp-bottom-bar">'+ '<div class="mfp-title"></div>'+ '<div class="mfp-description" style="text-align: left;font-size: 12px;line-height: 16px;color: #f3f3f3;word-break: break-word;padding-right: 36px;"></div>'+ '<div class="mfp-counter"></div>'+ '</div>'+ '</div>', titleSrc: function(item) { return '<strong>' + item.el.find('img').attr('alt') + '</strong>'; } }, gallery: { enabled: true, navigateByImgClick: true } }); });
The second line says that the various images are to use magnific lightbox when clicked on.
Then a section for single images and then for galleries. There is a lot of code and I am looking into improving it and making it shorter.
4. In the child theme folder – functions.php file. Add the following code:
/* Magnific popup - https://dimsemenov.com/plugins/magnific-popup/ */ add_action('wp_enqueue_scripts', 'enqueue_magnificpopup_styles'); function enqueue_magnificpopup_styles() { wp_enqueue_style('magnific_popup_style', get_stylesheet_directory_uri().'/magnific-popup/magnific-popup.css', array()); } add_action('wp_enqueue_scripts', 'enqueue_magnificpopup_scripts'); function enqueue_magnificpopup_scripts() { wp_enqueue_script('magnific_popup_script', get_stylesheet_directory_uri().'/magnific-popup/jquery.magnific-popup.min.js', array('jquery')); wp_enqueue_script('magnific_init_script', get_stylesheet_directory_uri().'/magnific-popup/jquery.magnific-popup-init.js', array('jquery')); }
5. Since I have some images that are taller then the vertical viewpoint. To be able to scroll while seeing the tall image I have to add some extra CSS to the magnific-popup.css file. Scroll to where you see the img.mfp-img css class. Add the max-height:100% !important for all the images to show their original size.
/* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; max-height: 100% !important; /* ADDED */ display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; }
Magnific Resources:
gehrcke.de/2014/02/how-to-add-magnific-popup-to-your-wordpress-blog/
gist.github.com/ajtroxell/5808855#file-titlesdescriptions-js-L3
There is also a WP Magnific lightbox WordPress plugin.
Check out Lightbox 2: github.com/lokesh/lightbox2/issues/342#issuecomment-394879827
(I still need to try it out.)
Fancybox 3
fancyapps.com/fancybox/3/
github: /fancyapps/fancybox
The process is very similar to colorbox and Magnific.
1. Download 3.0.zip from one of the above links.
2. Unzip and open fancybox-3.0 -> dist and copy jquery.fancybox.css and jquery.fancybox.min.js.
3. Create a new folder (I called mine lightbox) in the root of the theme you are using. Paste in the css and js files.
4. Create a new js file save it as jquery.fancybox-init.js.
Add the following js to the init file:
jQuery(function( $ ){ $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]').fancybox({ }); });
The above is the bare bones code to get it to work.
5. Add the following code to your functions.php file:
/* Fancybox 3 - https://fancyapps.com/fancybox/3/ */ add_action('wp_enqueue_scripts', 'enqueue_fancybox_styles'); function enqueue_fancybox_styles() { wp_enqueue_style('fancybox_style', get_stylesheet_directory_uri().'/lightbox/jquery.fancybox.css', array()); } add_action('wp_enqueue_scripts', 'enqueue_fancybox_scripts'); function enqueue_fancybox_scripts() { wp_enqueue_script('fancybox_script', get_stylesheet_directory_uri().'/lightbox/jquery.fancybox.min.js', array('jquery')); wp_enqueue_script('fancybox_init_script', get_stylesheet_directory_uri().'/lightbox/jquery.fancybox-init.js', array('jquery')); }
FancyBox WordPress plugins:
easy-fancybox and fancybox-for-WordPress
The Nivo Lightbox
Titles and descriptions are not showing up. But the rest seems to work fine.
1. Download the jQuery lightbox from Nivo. docs.dev7studios.com/jquery-plugins/nivo-lightbox or github.com/Codeinwp/Nivo-Lightbox-jQuery
Unzip.
2. Copy the nivo-lightbox.css, nivo-lightbox.min.js and the themes folder.
Create a a new folder you can call nivo-lightbox in the root of your theme folder and paste the files and folder into it.
3. Create a new js file and call it nivo-lightbox-init.js. To initialize the lightbox.
Save the file into the newly created nivo-lightbox folder inside the child theme folder.
This is the code I am using.
jQuery(document).ready(function($) { $('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]').nivoLightbox({ effect: 'slideUp', // Options slideUp, slideRight, slideDown, slideLeft, fall, fadescale. theme: 'default', // The lightbox theme to use keyboardNav: true, // Enable/Disable keyboard navigation (left/right/escape) }); });
4. In the child theme functions.php file add the following code:
/* -------- Nivo Lightbox ---------- */ /* Enqueue Nivo - https://dev7studios.com/ */ add_action( 'wp_enqueue_scripts', 'enqueue_nivoLightbox' ); function enqueue_nivoLightbox() { wp_enqueue_style( 'theme-default-lightbox-css', get_stylesheet_directory_uri(). '/nivo-lightbox/themes/default/default.css' ); wp_enqueue_style( 'nivolightbox-css', get_stylesheet_directory_uri(). '/nivo-lightbox/nivo-lightbox.css' ); wp_enqueue_script( 'nivolightbox', get_stylesheet_directory_uri(). '/nivo-lightbox/nivo-lightbox.min.js', array( 'jquery' ), '', true ); wp_enqueue_script( 'nivolightbox-init', get_stylesheet_directory_uri() . '/nivo-lightbox/nivo-lightbox-init.js', array( 'jquery' ), '', true ); }
Nivo Lightbox resources:
www.davidtiong.com/add-nivo-lightbox-to-wordpress-using-shortcode-function/
github.com/logoscreative/Nivo-Lightbox
js-tutorial.com/nivo-lightbox-jquery-responsive-lightbox-229
Click the following link if you instead would like to get a hold of the WordPress plugin (costs $39 and up): dev7studios.com/products/nivo-lightbox-wordpress-plugin
Fluidbox
terrymun.github.io/Fluidbox/demo/index.html
(Find examples in the above link.)
Fluidbox is more limited then Colorbox and Magnific lightbox.
It does not add a specific gallery feature, or captions and limits the height of taller images to fit into the viewport.
1. Download the jQuery Fluidbox. github.com/terrymun/Fluidbox
Unzip.
2. Create a new folder inside the root folder of your child theme and name it fluidbox.
Copy and paste the following files to the new folder.
Go to dist -> js and copy the jquery.fluidbox.min.js.
Go to dist -> css and copy the fluidbox.min.js.
3. Create a new js file and name it fluidbox-init.js. To initialize the lightbox.
Save the file into the newly created fluidbox folder inside the child theme folder.
Add the following code into the fluidbox-init.js file.
jQuery(document).ready(function($) { $('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]').fluidbox(); $('.gallery a').fluidbox(); });
4. In the child theme functions.php file add the following code:
/* -------- Fluidbox ---------- */ /* Enqueue Fluidbox - https://terrymun.github.io/Fluidbox/demo/index.html */ add_action( 'wp_enqueue_scripts', 'enqueue_fluidbox' ); function enqueue_fluidbox() { wp_enqueue_style( 'fluidbox-css', get_stylesheet_directory_uri(). '/fluidbox/fluidbox.min.css' ); wp_enqueue_script( 'fluidbox', get_stylesheet_directory_uri(). '/fluidbox/jquery.fluidbox.min.js', array( 'jquery' ), '', true ); wp_enqueue_script( 'fluidbox-init', get_stylesheet_directory_uri() . '/fluidbox/fluidbox-init.js', array( 'jquery' ), '', true ); }
Fluidbox resources:
github.com/peiche/fluidbox-wp
eichefam.net/2014/06/26/implementing-fluidbox/
Additonal Plugins:
sachinchoolur.github.io/lightGallery/
https://photoswipe.com/
WordPress Plugins
A search on lightbox at wordpress.org plugins section:
responsive-lightbox
simple-lightbox
wp-lightbox-2
wp-featherlight
lightbox
lightbox-gallery
wp-video-lightbox
Photoswipe
simple-lightbox-gallery
foobox-image-lightbox
Resources:
https://wpdatatables.com/wordpress-lightbox-plugins-you-should-know-of/
wordpress.transformnews.com/tutorials/how-to-implement-fancybox-in-wordpress-creating-your-own-plugin-84
github.com/lokesh/lightbox2/issues/342#issuecomment-91997716
demosthenes.info/blog/996/A-Progressively-Enhanced-Lightbox-with-srcset-and-CSS-Animation
demosthenes.info/blog/962/A-HTML5-Lightbox-in-12-Lines-of-JS
Resources I want to take a closer look at.
unheap.com/media/dialogs-lightboxes/mediumlightbox/
github.com/blueimp/Gallery
https://codegeekz.com/responsive-jquery-lightbox-libraries/
https://www.stripjs.com/
https://js-tutorial.com/nivo-lightbox-jquery-responsive-lightbox-229
jQuery(function( $ ){
$(‘a[href*=”.jpg”], a[href*=”.jpeg”], a[href*=”.png”], a[href*=”.gif”]’).fancybox({
selector : ‘.blocks-gallery-item figure a’
});
});
Hi Paal,
Did you manage to integrate in WordPress “Lightgallery Lightbox” (https://sachinchoolur.github.io/lightGallery/index.html)?
If so, could you pass me the code or tell me how you did it?
Thanks
Hey Alvaro
I never did figure it out. But the author is selling a premium WordPress plugin though here:
https://dzine.io/products/lightgallery-wp-plugin/
Btw the author replied to an issue I created on github:
https://github.com/sachinchoolur/lightGallery/issues/272#issuecomment-365154532
(I have not tried it yet.)
Thanks for nice snippet & tutorial that is easy to understand for beginners
I could implement gallery with colorbox effects without any plugins!
Is it possible to make it conditional?, ie. load only for the post/page that having image thumbnails with links
Hi
I am thinking that you will need to add some jQuery code to the colorbox-init.js. Do some searching on using conditionals in jQuery.
If you decide to figure it out. Please post back here with your discovery..:)
Have a great day!
Hey!
Very nice and easy to follow tutorials.
Could you also walk me through adding PhotoSwipe to WordPress?
Hi Krislynde
I will look into it and update this comment on the progress.
Edit:
Try out this plugin:
https://wordpress.org/plugins/photo-swipe/
(As I have not yet figured out how to get it working using the js files.)
Thank you so much! This helped me finally get my WP gallery to not redirect to a new page with Nivo Lightbox.
Can I look at a sample of this?
Hey Elaine.
I have links to examples on using Colorbox, Magnific Popup and FancyBox.
The other tutorials and not fully working yet.