Documentation /

Passing parameters to lightbox and fullscreen galleries

Since Themify Framework version 1.3.5, we rolled a new gallery system to all themes that includes both lightbox and fullscreen swipe solutions to display gallery images and also images linked to their file in the content.

The gallery receives several parameters for its initialization, and all of them are accessible and can be modified using a WordPress filter, 'themify_gallery_plugins_args'. Not only you can modify the existing parameters, but you can also add others, useful for example for the fullscreen gallery.

Basic filter usage

In this example we will show the image title in lightbox. By default this is turned off.

1. Create a file named custom-functions.php in your theme root folder

2. Edit it, and paste the following

<?php
function custom_themify_show_lightbox_title($args) {
	$args['show_title'] = true;
	return $args;
}
add_filter('themify_gallery_plugins_args', 'custom_themify_show_lightbox_title');
?>

3. Save the file. If you were editing it locally, upload it by FTP to the theme folder in your server.

Modifiable existing parameters

These are the parameters that can be modified and their corresponding default values:

'theme' 		=> 'pp_default'

Sets the lightbox theme. Can be set to

'social_tools' 		=> false

Shows basic social buttons in lightbox view

'allow_resize' 		=> true

Allows image resizing in lightbox view when viewport is smaller than image

'show_title' 		=> false

Shows lightbox title

'overlay_gallery' 	=> false

Shows mini gallery over the lightbox

'screenWidthNoLightbox' => 600

Screen width after the one lightbox is no longer triggered

Adding new parameters

This is an example for the fullscreen gallery. We will disable the zoom when user double clicks or double taps the image, change the slideshow delay, and the transition speed.

<?php
function custom_themify_fullscreen_params($args) {
	$args['allowUserZoom'] = false;
	$args['slideshowDelay'] = 7000;
	$args['slideSpeed'] = 700;
	return $args;
};
add_filter('themify_gallery_plugins_args', 'custom_themify_fullscreen_params');
?>

The fullscreen gallery supports all the parameters for Photoswipe.

Extending look up areas

As an advanced example, let's see how we can tell the gallery system to look up in areas other than the default ones. Note that we're appending these selectors, otherwise the original ones won't work anymore:

<?php
function custom_themify_gallery_areas($args) {
	// The links that will be lightboxed, by default, this is only .lightbox
	$args['lightboxSelector'] .= ', .extra-lightbox';

	// Add images support in highlights, for example on Bizco or Folo themes
	$file_extensions = array('jpg', 'gif', 'png', 'JPG', 'GIF', 'PNG');
	$content_images = '';
	foreach ($file_extensions as $ext) {
		$content_images .= ', .home-highlights-content a[href$='.$ext.']';
	}
	$args['lightboxContentImagesSelector'] .= $content_images;

	// Add a custom post type as another area for linked images
	$args['contentImagesAreas'] .= ', .type-somecustomposttype';

	return $args;
};
add_filter('themify_gallery_plugins_args', 'custom_themify_gallery_areas');
?>