Soliloquy Documentation

Documentation, Reference Materials, and Tutorials for Soliloquy

Enable Links in 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.

Follow this guide if you want to ensure that slide images always open in a Lightbox (instead of going to the slide’s hyperlink, if specified), and then allow the visitor to click that image in the lightbox to be taken to the slide’s hyperlink.

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-enable-links-lightbox.php

Step 2 – Edit the New Plugin File

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

<?php
/**
* Plugin Name: Soliloquy - Enable Links in Lightbox
* Plugin URI: https://soliloquywp.com
* Version: 1.0
* Author: Tim Carr
* Author URI: http://www.n7studios.co.uk
* Description: Ensures that slide images always display in the Lightbox (vs. going to the target URL). When displayed in the Lightbox, clicking the image will then load the target URL
*/

/**
 * Force slide images to link to the Lightbox (i.e. the full size image), regardless
 * of whether the slide has a hyperlink.
 *
 * @param array $item Slider Item
 * @param int $id Slider ID
 * @param array $data Slider Config
 * @param int $i Slide Index
 * @return array Slider Item
 */
function sol_soliloquy_enable_links_change_link( $item, $id, $data, $i ) {

	$item['link'] = $item['src'];
	return $item;

}
add_filter( 'soliloquy_lightbox_item_data', 'sol_soliloquy_enable_links_change_link', 10, 4 );

/**
* Adds the hyperlink as a data- attribute to the slider image
*
* @param string $atts HTML Attributes
* @param int $id Slider ID
* @param array $item Slider Item
* @param array $data Slider Config
* @param int $i Slide Index
* @return string HTML Attributes
*/
function sol_soliloquy_enable_links_lightbox_image_attr( $atts, $id, $item, $data, $i ) {

	// Check slider type
	switch ( $data['config']['type'] ) {
		/**
		* Featured Content
		*/
		case 'fc':
			$link = get_permalink( $id );
			break;
		
		/**
		* Default
		*/
		default:
			$link = $data['slider'][ $item['id'] ]['link'];
			break;
	}

	// Add link to data- attribute
	$atts .= ' data-soliloquy-link="' . $link . '"';
	return $atts;

}
add_filter( 'soliloquy_output_image_attr', 'sol_soliloquy_enable_links_lightbox_image_attr', 10, 5 );

/**
* Force slide images to link to the Lightbox (i.e. the full size image), regardless
* of whether the slide has a hyperlink.
*
* @param array $item Slide Item
* @param array $fc Featured Content Posts
* @param array $data Slide Data
* @return array Slide Item
*/
function sol_soliloquy_enable_links_fc_change_link( $item, $fc, $data ) {

	$item['link'] = $item['src'];
	return $item;

}
add_filter( 'soliloquy_fc_image', 'sol_soliloquy_enable_links_fc_change_link', 10, 3 );

/**
 * Links the Lightbox image to the item's hyperlink
 *
 * @param array $data Slider Config
 */
function sol_soliloquy_lightbox_api_before_show_link_image( $data ) {

	?>
	var link = $('img', $(this.element)).data('soliloquy-link');
	if (link !== '') {
		$('img.soliloquybox-image').wrap('<a href="' + link + '"></a>');
	}
	<?php

}
add_action( 'soliloquy_lightbox_api_after_show', 'sol_soliloquy_lightbox_api_before_show_link_image' );

Step 3 – Activate the New Plugin

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

That’s it! You’ve successfully enabled in the lightbox for your image slides!

Troubleshooting

  • Make sure that the Enable Lightbox Arrows? optin in the Lightbox tab is disabled, otherwise these elements will cover the linked image in the lightbox and make it difficult for the user to click the image hyperlink.
[i]
[i]