Adding a lightbox to WordPress without using a plugin

There are a lot of lightbox projects one can download and figure out the needed code to get it working in WordPress.
In general the code will look similar to this default example.

1. Download project files usually from Github.
2. Add the .css, .min.js and create an init.js file.
3. Enqueue the files in functions.php or a code plugin.
4. Go to a post/page and create a link in the image to the media file. Test to see if it works. If not search online and find the solution and e-mail me to adjust this tutorial.

—-I am working on getting additional lightboxes working. Please contact me if you have some helpful advice. —

Colorbox

–> The following instructions for Colorbox works.

After clicking the image the lightbox might look similar to this image.

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. I am testing example 3.
3. In the root of the child theme folder add a new folder and call it colorbox.
4. Copy the images folder and the colorbox.css from the master colorbox example (you want to use) into the new colorbox folder.
5. From master colorbox folder duplicate the jquery.colorbox-min.js to the new colorbox folder.

6. Make a new js file and call it colorbox-init.js. Save it to the new colorbox folder. This file will then initialize colorbox telling it how it is to be used. Add the following code to the colorbox-init.js file:

/* 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.

Move the new colorbox folder containing: colorbox.css, jquery.colorbox-min.js, colorbox-init.js and
the images folder into the root of your child theme.

Settings I used.
I decided not to use any transition.
Rel groups images together. This option 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 or a code plugin. Add the following.

/* 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.

NB! The last step. In WordPress backend, be sure to link the image to the Media File, so when clicking the image on the frontend the popup/lightbox will be seen.

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 WP colorbox plugin in 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.

Lightbox2

–> The following instructions for Lightbox2 works.

Go to https://github.com/lokesh/lightbox2 and download the project files zip.

Unzip and open. Go to the dist folder.
Create a new folder and call it lightbox2. In this folder we will place the following.
Duplicate lightbox.css (from the css folder), lightbox.min.js (from the js folder) and images folder into the new lightbox2 folder.
Open lightbox.css and change the various mentions of the link (should be 4 links) to the images folder. An example,
url(../images/loading.gif) to url(images/loading.gif) so that the various icons show up in the lightbox.

Add the following code to the functions.php file or a code plugin.

add_action( 'wp_enqueue_scripts', 'themeslug_scripts' );
function themeslug_scripts() {
wp_enqueue_style( 'lightbox', get_template_directory_uri() . '/lightbox2/lightbox.css', array(), '4.3.0' );
wp_enqueue_script( 'lightbox', get_template_directory_uri() . '/lightbox2/lightbox.min.js', array( 'jquery' ), '3.3.0', true );
}

add_filter('the_content', 'lightbox2');
function lightbox2 ( $content ) {
global $post;
$pattern = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i";
$replacement = '<a$1 data-lightbox="post-image" href=$2$3.$4$5$6</a>';
$content = preg_replace($pattern, $replacement, $content);
//$content = str_replace("%LIGHTID%", $post->ID, $content);
return $content;
}

Code came from this Github comment: https://github.com/lokesh/lightbox2/issues/342#issuecomment-91997716
It could use an improvement to show how to use the various options that exist with lightbox2.

Fancybox 3

–> I believe I was able to get this to work.

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

Fancybox 4

–> Not yet working.

https://github.com/fancyapps/ui
https://fancyapps.com/docs/ui/fancybox/

Go to one of the CDN links. I went to:
https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/

Right clicked and select “Save Link As…” (Download):
fancybox.css and fancybox.umd.js

I made a new folder I called fancybox. Added both files into it.

Create a new fancybox-init.js file to initialize fancybox. Add it to the fancybox folder.
Add the following code:

<script>
$(document).ready(function() {
$('.fancybox').fancybox({
padding : 0,
openEffect : 'elastic'
});
});
</script>

With the above code one will need to add the CSS class to the image it will be used with. Another approach is to add fancybox to all images:

<script>
$(document).ready(function() {
$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();
padding : 0,
openEffect : 'elastic'
});
});
</script>

As it seems like I am mixing up two different Github repos. In this issue I was told about the following code:

Fancybox.bind('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]') {
// Your options
});

Resource: https://github.com/Feoni4/fancybox

Add the fancybox folder containing fancybox.css, fancybox.umd.js and fancybox-init.js into the root of your child theme.
Add the following code to your functions.php file or a code plugin.

/* Enqueue Fancybox */
add_action( 'wp_enqueue_scripts', 'enqueue_fancybox' );
function enqueue_fancybox() {
wp_enqueue_style( 'fancybox-css', get_template_directory_uri(). '/fancybox/fancybox.css' );
wp_enqueue_script( 'fancybox',get_template_directory_uri() . '/fancybox/fancybox.umd.js', array( '' ), '', true );
wp_enqueue_script( 'fancybox-init', get_template_directory_uri() . '/fancybox/fancybox-init.js', array( 'fancybox' ), '', true ); 
}

In WordPress go to a post/page. Add an image and link it to the media file. Test the frontend and see if the lightbox shows up.

glightbox

https://biati-digital.github.io/glightbox/

–> Not yet working.

https://github.com/biati-digital/glightbox
I opened this issue which was closed by the author. No help there: https://github.com/biati-digital/glightbox/issues/274

Download the zip at Github repo for glightbox.
Create a new folder named glightbox.

Open the dist folder and duplicate the following files:
glightbox.min.js
and
glightbox.css
into the newly created glightbox folder.

Create a new init.js file. I named it: glightbox-init.js

Currently I do not know what code to add to the init js file. As I believe the code would be somewhat similar to other init.js files I have mentioned above.

An example:

const glightbox = GLightbox({
openEffect: 'zoom',
closeEffect: 'fade',
cssEfects: {
// This are some of the animations included, no need to overwrite
fade: { in: 'fadeIn', out: 'fadeOut' },
zoom: { in: 'zoomIn', out: 'zoomOut' }
}
});

(The code above needs to be adjusted.)

Add the following code to the functions.php or a code plugin.

/* Enqueue Glightbox */
add_action( 'wp_enqueue_scripts', 'enqueue_glightbox' );
function enqueue_glightbox() {
wp_enqueue_style( 'glightbox-css', get_template_directory_uri(). '/glightbox/glightbox.css' );
wp_enqueue_script( 'glightbox',get_template_directory_uri() . '/glightbox/glightbox.min.js', array( '' ), '', true );
wp_enqueue_script( 'glightbox-init', get_template_directory_uri() . '/glightbox/glightbox-init.js', array( 'glightbox' ), '', true ); 
}

Resources:
https://www.npmjs.com/package/glightbox
https://opensourcelibs.com/lib/glightbox

PhotoSwipe

https://photoswipe.com/

—> Is not yet working.
I made this issue: https://github.com/dimsemenov/PhotoSwipe/issues/1803

https://github.com/dimsemenov/PhotoSwipe

Download the PhotoSwipe-master zip at Github repo for PhotoSwipe. (To get the beta of version 5 go to: https://github.com/dimsemenov/PhotoSwipe Click the Master branch drop down and select v5 beta: https://github.com/dimsemenov/PhotoSwipe/tree/v5-beta )

Using the current version.
Create a new folder named photoswipe. Duplicate the following files inside the dist folder into the new photoswipe folder.

photoswipe.css
photoswipe-ui-default.min.js
photoswipe.min.js
and
the default-skin folder with contents.

Create a new init.js file and add it to the photoswipe folder. I named the js file: photoswipe-init.js.
Add the following code:

/* Initialize PhotoSwipe */
var options = ('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"]') {
// optionName: 'option value'
// for example:
index: 0 // start at first slide
};

Move the photoswipe folder into the root of the child theme you are using.
Add the following code to your child theme functions.php file or a code plugin.

/* Enqueue PhotoSwipe */
add_action( 'wp_enqueue_scripts', 'enqueue_photoswipe' );
function enqueue_photoswipe() {
wp_enqueue_style( 'photoswipe-css', get_template_directory_uri(). '/photoswipe/photoswipe.css' );
wp_enqueue_script( 'photoswipe',get_template_directory_uri() . '/photoswipe/photoswipe.min.js', array( '' ), '', true );
wp_enqueue_script( 'photoswipe ui default',get_template_directory_uri() . '/photoswipe/photoswipe-ui.default.min.js', array( '' ), '', true );
wp_enqueue_script( 'photoswipe-init', get_template_directory_uri() . '/photoswipe/photoswipe-init.js', array( 'photoswipe' ), '', true ); 
}

I hope to also add a working version of  fslightbox.com to this tutorial, along with a bunch of other working lightbox examples as well.

I have also been testing out Fast Image Zoom Github project.
It should be a simple one to add but it is not working for me yet.

WordPress Lightbox Plugins

A search on lightbox at wordpress.org plugins section:

https://wordpress.org/plugins/wp-video-lightbox/
https://wordpress.org/plugins/responsive-lightbox/

https://wordpress.org/plugins/foobox-image-lightbox/
https://wordpress.org/plugins/wp-lightbox-2/
https://wordpress.org/plugins/wp-jquery-lightbox/
https://wordpress.org/plugins/simple-lightbox/

https://huge-it.com/lightbox/

wordpress.transformnews.com/tutorials/how-to-implement-fancybox-in-wordpress-creating-your-own-plugin-84
https://wpdatatables.com/wordpress-lightbox-plugins-you-should-know-of/

github.com/blueimp/Gallery