Setting image title (or alt attributes) as the Fancybox pop-in title

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

Hi!

In Customizr (version less than 3.10), the title displayed at the bottom of the Fancybox popin is the post or page title instead of the image title.

customizr-fancybox-title

 

To fix this, here’s a quick javascript snippet that displays the image title (or the alt field if there’s no title) for the FancyBox popin title.

Copy this code in your functions.php file :

 

add_action ('wp_footer' , 'set_fancybox_title');

function set_fancybox_title() {
	?>
		<script id="tc-fancybox-title" type="text/javascript">
			jQuery(document).ready(function ($) {
			        $('a[rel*=tc-fancybox-group]').each( function() {
			            var title = $(this).find('img').prop('title');
			            var alt = $(this).find('img').prop('alt');
			            if ( typeof title !== 'undefined' && 0 != title.length) {
			                $(this).attr('title',title);
			            }
			            else if (typeof alt !== 'undefined' &&  0 != alt.length) {
			                $(this).attr('title',alt);
			            }
			        });
			});
	    </script>
    <?php
}

 I hope this will be useful for you guys!

Your comments and improvements are welcome as always.

 

Leave a comment

Your email address will not be published. Required fields are marked *

3 thoughts on “Setting image title (or alt attributes) as the Fancybox pop-in title”