Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Link Captions to Lightbox

Important: This doc assumes you’re comfortable creating and/or editing PHP files in your WordPress installation and is intended for advanced users.

Note: This document is relevant only if you have a Developer or Master license and you’re using the Lightbox Addon.

You can link your slide captions, so they load the respective image in Lightbox, following this guide.

Step 1 – Create Plugin File

The first step is to create a new php file in the wp-content/plugins/ directory of your WordPress installation. The easiest way to do this is using your favorite FTP program or through your web hosting account’s file editor (if they provide one).

Once you’ve navigated to the wp-content/plugins/ directory, create a new file with the name soliloquy-link-caption-lightbox.php

Step 2 – Edit the New Plugin File

Next, you’ll want to copy and paste the following code into the soliloquy-link-caption-lightbox.php plugin file you’ve created:

<?php
/**
* Plugin Name: Soliloquy - Link Captions to Lightbox
* Plugin URI: https://soliloquywp.com
* Version: 1.0
* Author: Tim Carr
* Author URI: http://www.n7studios.co.uk
* Description: Link captions to display the image in a Lightbox on a Soliloquy slide.
*/

/**
* Link the caption to the hyperlink, if specified
*
* @param string $caption 	Current Slide Caption
* @param int 	$slideID 	Current Slide ID
* @param array 	$slide 		Current Slide Data
* @param array  $data		Slider Configuration
* @param int	$i			Current Slide Index in Slides
* @return string Caption
*/
function sol_soliloquy_link_caption_lightbox( $caption, $id, $slide, $data, $i ) {

	// If there is no lightbox, don't output anything.
    $instance = Soliloquy_Shortcode::get_instance();
    if ( ! $instance->get_config( 'lightbox', $data ) ) {
        return $caption;
    }

    // If the item has chosen not to enable the lightbox, pass over it.
    if ( isset( $item['lightbox_enable'] ) && ! $item['lightbox_enable'] ) {
        return $caption;
    }
	
	// Build lightbox link
	$caption = '<a href="' . $slide['src'] . '" class="soliloquy-link-caption">' . $caption . '</a>';
	return $caption;
	
}
add_filter( 'soliloquy_output_caption', 'sol_soliloquy_link_caption_lightbox', 10, 5 );

/**
* Load JS to trigger the lightbox when a caption is clicked
*
* @param array $data Slider Configuration
*/
function sol_soliloquy_link_caption_lightbox_js( $data ) {

	?>
	$('a.soliloquy-link-caption').on('click', function(e) {
		e.preventDefault();
		var slide = $(this).closest('li.soliloquy-item');
		$('a.soliloquy-link', $(slide)).trigger('click');
	});
	<?php

}
add_action( 'soliloquy_api_start', 'sol_soliloquy_link_caption_lightbox_js' );

Step 3 – Activate the New Plugin

The last step is to navigate to the WordPress Admin > Plugins screen, locate the plugin named Soliloquy – Link Captions to Lightbox and activate the plugin.

That’s it! You’ve successfully enabled caption links to open in lightbox!


Troubleshooting

  • The slider must have the Lightbox option enabled.
[i]
[i]