Question

我的/js/global.js文件中的此部分代码会在单击时激活每个图像以在新窗口中打开。是否可以更改此代码以使每个代码在FancyBox中打开？我已经为我正在运行的Vanilla论坛下载了一个FancyBox插件，它目前只针对帖子中嵌入的图片。在主页面上，单击图像将打开一个新窗口。

// Shrink large images to fit into message space, and pop into new window when clicked.
// This needs to happen in onload because otherwise the image sizes are not yet known.
    jQuery(window).load(function() {
       var props = ['Width', 'Height'], prop;
       while (prop = props.pop()) {
          (function (natural, prop) {
             jQuery.fn[natural] = (natural in new Image()) ? 
             function () {
                return this[0][natural];
             } : 
             function () {
                var 
                   node = this[0],
                   img,
                   value;
                if (node.tagName.toLowerCase() === 'img') {
                   img = new Image();
                   img.src = node.src,
                   value = img[prop];
                }
                return value;
             };
          }('natural' + prop, prop.toLowerCase()));
       }
       jQuery('div.Message img').each(function(i,img) {
          var img = jQuery(img);
          var container = img.closest('div.Message');
          if (img.naturalWidth() > container.width() && container.width() > 0) {
             img.wrap('<a href="'+$(img).attr('src')+'"></a>');
          }
       });
       // Let the world know we're done here
       jQuery(window).trigger('ImagesResized');
    });

Answer 1

为包装的图片添加特定的类，修改此行

img.wrap('<a href="'+$(img).attr('src')+'"></a>');

......进入这个：

img.wrap('<a class="fancybox" href="'+$(img).attr('src')+'"></a>');

然后在自定义脚本中将fancybox绑定到该选择器（“.fancybox”），如：

$(".fancybox").fancybox();

这假设你已经正确加载了fancybox js和css文件。

使用FancyBox打开嵌入的图像，而不是在新窗口中打开

1 个答案: