How to add the alt for lightbox image?

[firealan]

Great plugin :) But how can we pass the alt= "" value for the images. Currently the pop up images have no alt . I would like to put the alt tag and title tag for the images.

Pls let me know

[marcandre]

Interesting problem. We currently have generic content filters that take one input and convert it into content, so it's not trivial to solve. Adding a second "alt" content filter would be too heavy. Maybe it makes sense to copy over the alt param from the source, if there is one and for anything else it would be roll your own...?

[firealan]

Hi Marcandre Thanks for the quick rely. if I want to copy over the alt param from from the source. What is the best way to do it and how? can we use something like data-alt="picture 1" in the tag. And it will carry it to the popup images?

[landwire]

So, is there a way to show the image title or alt text? All examples I have seen do not have any title or alt options. Thanks, Sascha

[marcandre]

@landwire Check out https://github.com/noelboss/featherlight/wiki/Gallery:-showing-a-caption

[cydoval]

@marcandre is there any example HTML for this gallery caption? I'm struggling to get it to work by adding an alt="Test" into the image tag and adding the script. Many thanks!

[marcandre]

@cydoval Should work easily. Why don't you make a fiddle?

[robneu]

+1 to this issue. It seems like it could be a bit of an accessibility problem to not have any alt text on the lightboxed images.

IMO a good default would be to just copy the alt param if it exists, as you suggested earlier. The only thing I could see being a problem there is that it might be confusing for people using screen readers to suddenly have an exact duplicate without any context about what's happening.

[glasswork]

I am adding both captions and alt tags to featherlight.

The gallery images links are written to have data-caption and data-alt values.

<a rel="lightbox" data-width="1024" data-height="768" href="path-to-img.jpg" data-caption="this is the caption text" data-alt="this is the alt text"><img src="path-to-img.jpg" /></a>

Then this script adds these values to the popover imgs.

// begin script to retroactively add captions and alt tags inside featherlight gallery popovers
/* <![CDATA[ */
$(window).load(function(){
	$('.responsive-container').featherlightGallery({ 
		filter: "a",
		afterContent: function() {
			this.$legend = this.$legend || $('<div class="legend"/>').insertAfter(this.$content);
			this.$legend.html(this.$currentTarget.attr('data-caption'));
			var alt = this.$currentTarget.attr('data-alt');
			$('.featherlight-content > img').attr('alt', alt );
		}
	});
});
/* ]]> */
// end script to retroactively add captions and alt tags inside featherlight gallery popovers

This could probably be cleaned up a bit, but it works.

[wetbadger]

@glasswork

doesn't work for me

jquery.min.js:2 Uncaught TypeError: e.indexOf is not a function at S.fn.init.S.fn.load (jquery.min.js:2) at imgAppend (art.js:56) // <-- this line: $(window).load(function(){ at Object.success (art.js:224) // <-- calling a function with your code at c (jquery.min.js:2) at Object.fireWith [as resolveWith] (jquery.min.js:2) at l (jquery.min.js:2) at XMLHttpRequest. (jquery.min.js:2)

[jtalbot77]

I am adding both captions and alt tags to featherlight.

The gallery images links are written to have data-caption and data-alt values.

<a rel="lightbox" data-width="1024" data-height="768" href="path-to-img.jpg" data-caption="this is the caption text" data-alt="this is the alt text"><img src="path-to-img.jpg" /></a>

Then this script adds these values to the popover imgs.

// begin script to retroactively add captions and alt tags inside featherlight gallery popovers
/* <![CDATA[ */
$(window).load(function(){
	$('.responsive-container').featherlightGallery({ 
		filter: "a",
		afterContent: function() {
			this.$legend = this.$legend || $('<div class="legend"/>').insertAfter(this.$content);
			this.$legend.html(this.$currentTarget.attr('data-caption'));
			var alt = this.$currentTarget.attr('data-alt');
			$('.featherlight-content > img').attr('alt', alt );
		}
	});
});
/* ]]> */
// end script to retroactively add captions and alt tags inside featherlight gallery popovers

This could probably be cleaned up a bit, but it works.

I was able to get the above to work but updating the above as:

afterContent: function() {
			var alt = this.$currentTarget.find('img').attr('alt');
			jQuery('.featherlight-content > img').attr('alt', alt );
		}