javascript - Bootstrap Lightbox: title 属性からの画像キャプションの表示

Question

Javascript と jQuery に関してはまだ非常に新しいので、これは私にとっては大変です。

この Bootstrap Lightbox プラグインを使用しています: https://github.com/duncanmcdougall/Responsive-Lightbox

このサイト (WIP) で使用しようとしています: http://lastdetailwd.com/modernmetalfabricators/furniture.html

このライトボックスのキャプションとして、A タグの title 属性を使用したいと考えています。これを行う方法の手がかりはありますか？

jQuery :

(function ($) {

'use strict';

$.fn.lightbox = function (options) {

    var opts = {
        margin: 50,
        nav: true,
        blur: true,
        minSize: 0
    };

    var plugin = {

        items: [],
        lightbox: null,
        image: null,
        current: null,
        locked: false,
        selector: "#lightbox",

        init: function (items) {
            plugin.items = items;
            plugin.selector = "lightbox-"+Math.random().toString().replace('.','');

            if (!plugin.lightbox) {
                $('body').append(
                  '<div id="lightbox" class='+plugin.selector+' style="display:none;">'+
                  '<a href="#" class="lightbox-close lightbox-button"></a>' +
                  '<div class="lightbox-nav">'+
                  '<a href="#" class="lightbox-previous lightbox-button"></a>' +
                  '<a href="#" class="lightbox-next lightbox-button"></a>' +
                  '</div>' +
                  '</div>'
                );

                plugin.lightbox = $("."+plugin.selector);
            }

            if (plugin.items.length > 1 && opts.nav) {
                $('.lightbox-nav', plugin.lightbox).show();
            } else {
                $('.lightbox-nav', plugin.lightbox).hide();
            }

            plugin.bindEvents();

        },

        loadImage: function () {
            if(opts.blur) {
                $("body").addClass("blurred");
            }
            $("img", plugin.lightbox).remove();
            plugin.lightbox.fadeIn('fast').append('<span class="lightbox-loading"></span>');

            var img = $('<img src="' + $(plugin.current).attr('href') + '" draggable="false">');

            $(img).load(function () {
                $('.lightbox-loading').remove();
                plugin.lightbox.append(img);
                plugin.image = $("img", plugin.lightbox).hide();
                plugin.resizeImage();
            });
        },

        resizeImage: function () {
            var ratio, wHeight, wWidth, iHeight, iWidth;
            wHeight = $(window).height() - opts.margin;
            wWidth = $(window).outerWidth(true) - opts.margin;
            plugin.image.width('').height('');
            iHeight = plugin.image.height();
            iWidth = plugin.image.width();
            if (iWidth > wWidth) {
                ratio = wWidth / iWidth;
                iWidth = wWidth;
                iHeight = Math.round(iHeight * ratio);
            }
            if (iHeight > wHeight) {
                ratio = wHeight / iHeight;
                iHeight = wHeight;
                iWidth = Math.round(iWidth * ratio);
            }

            plugin.image.width(iWidth).height(iHeight).css({
                    'top': ($(window).height() - plugin.image.outerHeight()) / 2 + 'px',
                    'left': ($(window).width() - plugin.image.outerWidth()) / 2 + 'px'
                }).show();
            plugin.locked = false;
        },

        getCurrentIndex: function () {
            return $.inArray(plugin.current, plugin.items);
        },

        next: function () {
            if (plugin.locked) {
                return false;
            }
            plugin.locked = true;
            if (plugin.getCurrentIndex() >= plugin.items.length - 1) {
                $(plugin.items[0]).click();
            } else {
                $(plugin.items[plugin.getCurrentIndex() + 1]).click();
            }
        },

        previous: function () {
            if (plugin.locked) {
                return false;
            }
            plugin.locked = true;
            if (plugin.getCurrentIndex() <= 0) {
                $(plugin.items[plugin.items.length - 1]).click();
            } else {
                $(plugin.items[plugin.getCurrentIndex() - 1]).click();
            }
        },

        bindEvents: function () {
            $(plugin.items).click(function (e) {
                if(!$("#lightbox").is(":visible") && ($(window).width() < opts.minSize || $(window).height() < opts.minSize)) {
                    $(this).attr("target", "_blank");
                    return;
                }
                var self = $(this)[0];
                e.preventDefault();
                plugin.current = self;
                plugin.loadImage();

                // Bind Keyboard Shortcuts
                $(document).on('keydown', function (e) {
                    // Close lightbox with ESC
                    if (e.keyCode === 27) {
                        plugin.close();
                    }
                    // Go to next image pressing the right key
                    if (e.keyCode === 39) {
                        plugin.next();
                    }
                    // Go to previous image pressing the left key
                    if (e.keyCode === 37) {
                        plugin.previous();
                    }
                });
            });

            // Add click state on overlay background only
            plugin.lightbox.on('click', function (e) {
                if (this === e.target) {
                    plugin.close();
                }
            });

            // Previous click
            $(plugin.lightbox).on('click', '.lightbox-previous', function () {
                plugin.previous();
                return false;
            });

            // Next click
            $(plugin.lightbox).on('click', '.lightbox-next', function () {
                plugin.next();
                return false;
            });

            // Close click
            $(plugin.lightbox).on('click', '.lightbox-close', function () {
                plugin.close();
                return false;
            });

            $(window).resize(function () {
                if (!plugin.image) {
                    return;
                }
                plugin.resizeImage();
            });
        },

        close: function () {
            $(document).off('keydown'); // Unbind all key events each time the lightbox is closed
            $(plugin.lightbox).fadeOut('fast');
            $('body').removeClass('blurred');
        }
    };

    $.extend(opts, options);

    plugin.init(this);
};

})(jQuery);

Answer 1

著者は、キャプションを含めるように更新しました。これを閉じます。