A popular jQuery plugin for displaying images, galleries and videos in a lightbox is the Nivo Lightbox. It's simple to use and responsive which is great for making sure that your photos look great on any device including phones and tablets.There are some easy to follow instructions on the Dev7Studios website for how to setup, otherwise they also offer a WordPress plugin for purchase.But if you feel like adding Nivo Lightbox to your WordPress website without using a plugin, you can create a shortcode function and include the required jQuery files following the procedure below. Before you start though, make sure that your theme doesn't already have a lightbox feature that you can use.
How to add lightbox to your WordPress website
Step 1: Download the filesDownload zip file from https://github.com/gilbitron/Nivo-LightboxStep 2: Extract files and add to your websiteCreate a folder called "js" inside of your childtheme folder (if you have followed along in some of my other tutorials you might have already setup this folder). Inside this "js" folder create a new folder called "nivolight", where you will be adding the required Nivo Lightbox files.Extract the downloaded zip file. Find the following:
- "themes" folder
- "nivo-lightbox.css"
- "nivo-lightbox.min.js"
and FTP upload them to your "nivolight" folder.Step 3: Setup optionsCreate a javascript file to setup the lightbox options and choose the selector for Nivo Lightbox. Inside the file put the following code, and amend as you feel like based on the options available./* Nivo Lightbox Scripts */
var nivoeffect = nivolightboxing2.effect;
jQuery(document).ready(function ($) {
$('a.nivolight').nivoLightbox({
effect : nivoeffect
});
});
Save the file as "nivolightboxjs.js" and then FTP upload that file into the "nivolight" folder also.Notes: the selector 'a.nivolight' is to target the <a> links with a class of "nivolight", and the variable "nivoeffect" is being set to contain a parameter passed from shortcode using wp_localize_script.Step 4: Create shortcode functionYou will need to setup 2 functions, one is for registering the scripts and styles. The second one is for creating the shortcode. Add these functions to your childtheme's "functions.php" file, or otherwise an mu-plugin file.function nivolightbox_scripts() {
wp_register_style('nivolightboxcss',get_stylesheet_directory_uri().'/js/nivolight/nivo-lightbox.css');
wp_register_style('nivolightboxdefaultcss',get_stylesheet_directory_uri().'/js/nivolight/themes/default/default.css');
wp_register_script('nivolightbox',get_stylesheet_directory_uri().'/js/nivolight/nivo-lightbox.min.js',array('jquery'),'',true);
wp_register_script('nivolightboxjs',get_stylesheet_directory_uri().'/js/nivolight/nivolightboxjs.js',array('nivolightbox'),'',true);
}
add_action('wp_enqueue_scripts','nivolightbox_scripts');
function nivolightbox_sc($atts, $content = null){
$nivolightboxing = shortcode_atts(array(
'effect' => 'fade',
'url' => '',
'thumb' => '',
'alt' => '',
'title' => '',
'type' => '',
'gallery' => '',
'text' => ''
),$atts);
wp_enqueue_style('nivolightboxcss');
wp_enqueue_style('nivolightboxdefaultcss');
wp_enqueue_script('nivolightbox');
wp_enqueue_script('nivolightboxjs');
wp_localize_script('nivolightboxjs','nivolightboxing2',$nivolightboxing);
$n_effect = esc_attr($nivolightboxing['effect']);
$n_url = esc_url($nivolightboxing['url']);
$n_alt = esc_url($nivolightboxing['alt']);
$n_thumb = esc_url($nivolightboxing['thumb']);
$n_title = esc_attr($nivolightboxing['title']);
$n_type = esc_attr($nivolightboxing['type']);
$n_gallery = esc_attr($nivolightboxing['gallery']);
$n_text = esc_attr($nivolightboxing['text']);
if ($n_type === '' && $n_gallery === '') {
$lightboxoutput = '<a class="nivolight" href="'.$n_url.'" title="'.$n_title.'" ><img src="'.$n_thumb.'" alt="'.$n_alt.'" /></a>';
}
elseif ($n_type === '' && $n_gallery !== '') {
$lightboxoutput = '<a class="nivolight" href="'.$n_url.'" title="'.$n_title.'" data-lightbox-gallery="'.$n_gallery.'" ><img src="'.$n_thumb.'" alt="'.$n_alt.'" /></a>';
}
elseif ($n_type == 'iframe' || $n_type == 'inline') {
$lightboxoutput = '<a class="nivolight" href="'.$n_url.'" title="'.$n_title.'" data-lightbox-type="'.$n_type.'" >'.$n_text.'</a>';
}
else {
$lightboxoutput = '';
}
return $lightboxoutput;
}
add_shortcode('nivobox','nivolightbox_sc');
Notes: the first function registers the scripts and styles, which are only enqueued when the shortcode is included on a page.Step 5: Using the shortcodeIf you simply want to add an image onto your page that will open in the lightbox, then use:
[nivobox url="IMAGE URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL"]
If you want to create a gallery of images, then include a classname for eg, "gallery1":
[nivobox url="IMAGE URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery1"][nivobox url="IMAGE URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery1"][nivobox url="IMAGE URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery1"]
If you want to include video(s) in the gallery such as a YouTube or Vimeo URL, then use:
[nivobox url="IMAGE URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery2"][nivobox url="VIDEO URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery2"][nivobox url="VIDEO URL" title="TITLE" alt="ALT TEXT" thumb="THUMBNAIL URL" gallery="gallery2"]
If you want to include an iframe to another page, then use:
[nivobox url="WEB PAGE URL" title="TITLE" text="LINK ANCHOR TEXT" type="iframe"]
Clicking on the link below loads a page in the iframe lightbox.
[nivobox url="http://www.example.com" title="Iframe on a webpage" text="This link opens up in an iframe lightbox" type="iframe"]
If you want to include some inline content, such as content in a hidden div, then use:
[nivobox url="DIV ID" title="TITLE" text="LINK ANCHOR TEXT" type="inline"]
Clicking on the link below loads the hidden div content in the lightbox.
[nivobox url="#inline-div-lightbox" title="Shows inline hidden content" text="This link opens up a hidden div" type="inline"]
This is some content hidden in a div. Could be useful to show some extra information on your webpages
A lightbox can be a great tool when used on a website, especially when it comes to displaying photo galleries. Do you use a lightbox on your website?
Comments: