引导灯箱:显示标题属性中的图像说明

Bootstrap Lightbox: Showing image captions from title attribute

本文关键字:属性 图像 说明 标题 显示      更新时间:2023-09-26

在Javascript和jQuery中仍然很新,所以这个对我来说很难。

我正在使用这个引导灯箱插件:https://github.com/duncanmcdougall/Responsive-Lightbox

尝试在此站点上使用它 (WIP):http://lastdetailwd.com/modernmetalfabricators/furniture.html

我希望使用 A 标签中的标题属性作为此灯箱的标题。关于如何完成此操作的任何线索?

j查询

(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);

作者只是更新了它以包含标题。关闭这个。