fancyapps / fancybox

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.
http://fancyapps.com/
7.29k stars 1.79k forks source link

How can I add an alt and a title attribute? #2558

Closed acwolff closed 3 years ago

acwolff commented 3 years ago

I know that I can use data-caption to add a description to the light-box image. But how can I add an alt and a title attribute? I can't find a data-alt or data-title attribute. description.

Edit:

I tried this:

            <a data-fancybox="S" href="slides/Vecht%20Sahara%20140328%201005.jpg" data-width="1920" data-height="1276" 
            data-alt='alt-attribute' data-title='title attribute' data-caption='Start of the walking'>
                <div class="box">
                    <img src="thumbs/Vecht%20Sahara%20140328%201005.jpg" width="241" height="160" alt="Vecht Sahara 140328 1005" title="1: Vecht Sahara 140328 1005<br> 2014-03-28" /><br>
                </div>
            </a>

    beforeShow: function(instance, current) {
        var alt = current.opts.$orig.data('alt');
        var title = current.opts.$orig.data('title');
        this.title = title;
        this.alt = alt;
        console.log("ält: " + alt + " title:" + title);

The consol;e logs the correct data, but no title or alt attribute is added. What should I change or add?

acwolff commented 3 years ago

I did find the solution:

   afterLoad: function(instance, slide) {
        slide.$slide.find('img').attr("alt", slide.opts.$orig.data('alt'));
        slide.$slide.find('img').attr("title", slide.opts.$orig.data('title'));
    },