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.

->> 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:
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