Image gallery with thumbnails element – click instead of hover

Hey ilowelife,
Thank you for your patience the file that controls this is \wp-content\themes\enfold\config-templatebuilder\avia-shortcodes\gallery\gallery.js and I did some testing but while the thumbnail mouseover behavior can be changed to click this also affects the behavior of the rest of the element and breaks large image popup because of how the script is written, unfortunately it would require a rewrite that is more than we can offer here.
If you really want this customization, we can recommend Codeable for their experience and expertise with Enfold. Please follow the link to discuss your project and time frame with them.

Best regards,
Mike

Hi,
I have submitted this request to the Dev Team for their review, perhaps in the future it will be added as an option, thank you for using Enfold.

Best regards,
Mike

Hi,

Thank you for your patience.

While the devs are working on a solution, try to edit the gallery element and set the Advanced > Link Settings > Image Link settings to the last option (no links) to disable the links completely. We will also have to modify the enfold/config-templatebuilder/avia-shortcodes/gallery/gallery.js file directly to replace mouse hover with click. Look for this code around line 33..

gallery.on('mouseenter','.avia-gallery-thumb a', function()

,.. and replace it with.

gallery.on('click','.avia-gallery-thumb a', function()

After that, add this code in the functions.php file to re-enable the lightbox for the gallery.

function av_popup_gallery(){
	?>
	<script type="text/javascript">
	(function($) {
		$(document).ready(function(){
			$('.avia-gallery-big').removeClass('noLightbox avianolink fakeLightbox');
			$('.avia-gallery-big').magnificPopup({
				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-counter"></div>'+
								'</div>'+
							'</div>', // Popup HTML markup. <code>.mfp-img</code> div will be replaced with img tag, <code>.mfp-close</code> by close button

					cursor: 'mfp-zoom-out-cur', // Class that adds zoom cursor, will be added to body. Set to null to disable zoom out cursor.

					titleSrc: 'title', // Attribute of the target element that contains caption for the slide.
					// Or the function that should return the title. For example:
					// titleSrc: function(item) {
					//   return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
					// }

					verticalFit: true, // Fits image in area vertically

					tError: '<a href="%url%">The image</a> could not be loaded.' // Error message
				}
			});
		});
	})(jQuery);
	</script>
	<?php
	}
add_action('wp_footer', 'av_popup_gallery');

Please do not forget to toggle or temporarily disable the Enfold > Performance > File Compression settings after doing the steps above.

Best regards,
Ismael

Hi,

Thank you for the info @Guenni007.

The user wanted the big thumbnail to change on click instead of hover or mouseover, so the changes in the gallery.js file may still be necessary

Best regards,
Ismael