从 figcaption 获取 Imagelightbox 中 Ligthbox 的标题

Question

我正在使用此处 https://osvaldas.info/image-lightbox-responsive-touch-friendly 中的 Imagelightbox 作为灯箱，并试图改变图像标题的来源。默认情况下，Imagelightbox 使用 die Alt-Attribute 作为他的标题。

我最初的 html 是这样的：

<figure>
    <a href="file.jpg" class="lightbox" rel="lightbox-1" data-imagelightbox="lightbox-1">
        <img src="file.jpg" alt="foo">
    </a>
    <figcaption>bar</figcaption>
</figure>

所以 Imagelightbox 会显示 "foo" 作为标题，但我想获取 figcaption 的内容作为灯箱的标题。

这是否可以在不改变 alt-attribute 本身的情况下实现？

Answer 1

由于缺少配置选项，我在 javascript 中覆盖了 captionOn-function。也许它可以帮助某人：

var instanceImagelightbox = $(selectorImagelightbox).imageLightbox({
    onLoadEnd: function () {
        //Override original captionOn() to use figcaption instead of alt-attr
        captionOn = function() {
            var description = $( 'a[href="' + $( '#imagelightbox' ).attr( 'src' ) + '"]' ).next('figcaption').text();
            if( description.length > 0 )
                $( '<div id="imagelightbox-caption">' + description + '</div>' ).appendTo( 'body' );
        };
        captionOn();            
    }
});

从 figcaption 获取 Imagelightbox 中 Ligthbox 的标题

Get caption for Ligthbox in Imagelightbox from figcaption

javascript

jquery

jquery-plugins