• Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

Easy Web Design Tutorials

WordPress Tutorials and more

  • Home
  • WordPress
    • How To
    • Plugins
    • Themes
      • Genesis
      • Themify
      • Mysite myway
    • Security
    • Developer
    • Teaching
    • Conference
    • Chat
  • Blog
  • About
  • Freelance
    • Plugins
    • Teaching
    • Need help?
    • CV og ref.
  • Contact

6 September - 2014 By Paal Joachim 10 Comments
Last updated on: October 3, 2018

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.

Paal Joachim Romdahl

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.

Color Box Paal Joachim

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.

Using Magnific lightbox

Using Magnific lightbox

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

Share this:

  • Email

Categories: Featured, WordPress

Paal Joachim Romdahl

I enjoy teaching and creating tutorials. As well creating web sites.
I help people gain WordPress knowledge through my easy to follow tutorials and specialized training. Contact me for more information on how I can improve your WordPress skills and to help get your web site quickly up and running.

Comments

  1. nenadzero says

    11 March - 2019

    jQuery(function( $ ){
    $(‘a[href*=”.jpg”], a[href*=”.jpeg”], a[href*=”.png”], a[href*=”.gif”]’).fancybox({
    selector : ‘.blocks-gallery-item figure a’
    });
    });

    Reply
  2. Álvaro says

    5 February - 2018

    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

    Reply
    • Paal Joachim says

      6 February - 2018

      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.)

      Reply
  3. narendra says

    24 June - 2017

    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

    Reply
    • Paal Joachim says

      7 July - 2017

      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!

      Reply
  4. Krislynde says

    8 March - 2017

    Hey!

    Very nice and easy to follow tutorials.

    Could you also walk me through adding PhotoSwipe to WordPress?

    Reply
    • Paal Joachim says

      8 March - 2017

      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.)

      Reply
  5. Shirley says

    29 September - 2015

    Thank you so much! This helped me finally get my WP gallery to not redirect to a new page with Nivo Lightbox.

    Reply
  6. Elaine Faye says

    21 May - 2015

    Can I look at a sample of this?

    Reply
    • Paal Joachim says

      27 May - 2015

      Hey Elaine.

      I have links to examples on using Colorbox, Magnific Popup and FancyBox.
      The other tutorials and not fully working yet.

      Reply

Leave a Comment Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2021 · By Easy Web Design Tutorials · Built on the Genesis Framework · WordPress · Log in · ⇪

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.