Question

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

所以我添加了fancybox.js，它需要一个href来进行连接，因为你需要一个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添加了一个类.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();
});

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

1 个答案: