在 Rails 项目中组合 freewall.js 和 fancybox.js 以获得可点击的放大图像

Question

我正在画廊工作，我想在其中使用 freewall.js 显示图像，唯一的问题是 freewall.js 不包括点击放大图像的功能。

所以我添加了 fancybox.js，因为你需要一个 href 来使 fancybox 工作，所以需要费力才能连接，但是，freewall.js 每次被调用时都会创建一个随机数，所以调用它两次不会工作。这是我开始使用的代码和下面的解决方案。我希望这可以帮助其他编码人员寻找非常时尚、响应迅速且易于实施的画廊。

这是我的开始 html。

<div class="row">
<div class="col-md-12">
<div id="freewall" class="free-wall"></div>
</div>
</div>

这是我的起点Javascript

$(document).ready(function() {
$(".fancybox").fancybox();
});

var temp = "<div class='brick' style='width:{width}px;'><a href='#' class='fancybox'><img src='../assets/carousel/{index}.jpg' width='100%'></a></div>";
var w = 1, h = 1, html = '', limitItem = 20;
for (var i = 0; i < limitItem; ++i) {
    w = 1 + 3 * Math.random() << 0;
    html += temp.replace(/\{width\}/g, w*160).replace("{index}", i + 1);
}
$("#freewall").html(html);

var wall = new Freewall("#freewall");
wall.reset({
    selector: '.brick',
    animate: true,
    cellW: 150,
    cellH: 'auto',
    onResize: function() {
        wall.fitWidth();
    }
});

var images = wall.container.find('.brick');
images.find('img').load(function() {
    wall.fitWidth();
});

Answer 1

这是关于如何结合两者的最终 javascript 解决方案。

如您所见，我向每个图像创建的父 div 添加了一个 class .item（我也可以简单地使用 .brick）。然后我使用 javascript 将 dom 缩小到图像标签并添加一个 href，现在它可以完全正常工作了。

当然它可以使用一些微调，添加悬停效果等等，所以我期待看到其他人可以提出的其他建议和调整。

$(document).on('page:change',function() {
    $(".item").find("img").each( function() {
        $(this).attr("href",$(this).attr("src"));
    });

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

var temp = "<div class='brick item' style='width:{width}px;'><img src='../assets/carousel/{index}.jpg' width='100%' class='fancybox'></div>";
var w = 1, h = 1, html = '', limitItem = 30;
for (var i = 0; i < limitItem; ++i) {
    w = 1 + 3 * Math.random() << 0;
    html += temp.replace(/\{width\}/g, w*160).replace("{index}", i + 1);
}
$("#freewall").html(html);

var wall = new Freewall("#freewall");
wall.reset({
    selector: '.brick',
    animate: true,
    cellW: 150,
    cellH: 'auto',
    onResize: function() {
        wall.fitWidth();
    }
});

var images = wall.container.find('.brick');
images.find('img').load(function() {
    wall.fitWidth();
});

在 Rails 项目中组合 freewall.js 和 fancybox.js 以获得可点击的放大图像

Combining freewall.js and fancybox.js for clickable enlarged images in a Rails project

javascript

jquery

ruby-on-rails

fancybox

freewalljs