Bootstrap Lightbox：显示来自title属性的图片字幕

Question

Javascript和jQuery仍然非常新颖，所以这对我来说很难。

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

尝试使用在这个网站上（WIP）：http://lastdetailwd.com/modernmetalfabricators/furniture.html

我期待使用来自该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

作者也只更新到包括字幕。关闭这个。