Question

我一直在使用Freewall jQuery plugin来生成基于网格的响应式图片库。我不得不说，这样的工作。但是，我一直在努力寻找一种方法来使图片可链接，因为图库的图像是以自动方式检索的：

<script type="text/javascript">

        var temp = "<div class='cell' style='width:{width}px; height: {height}px; background-image: url(grid-images/photo/{index}.jpg)'></div>";
        var w = 280, h = 320, html = '', limitItem = 15;
        for (var i = 0; i < limitItem; ++i) {
            html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1);
        }
        $("#freewall").html(html);

        var wall = new freewall("#freewall");
        wall.reset({
            selector: '.cell',
            animate: true,
            cellW: 280,
            cellH: 320,
            onResize: function() {
                wall.refresh();
            }
        });
        wall.fitWidth();
        // for scroll bar appear;
        $(window).trigger("resize");
    </script>

在代码的其他版本中，Minh已将库中每张图片的代码放在html文件中。我发现特别有用的是自动检索JS代码，我想知道......是否有自动方式将每个图片关联到某个链接，从而使图片可链接？

那将是： 1 到 A ， 2 到 B ， 3 到 C 等等。

Answer 1

不是100％肯定你想看到的东西，但也许你可以做这样的事情（试着保持它和你一直这样做的方式）：

<script type="text/javascript">
        var links = ["A.html", "B.html", "C.html"];
        var titles = ["titleA", "titleB", "titleC"];
        var temp = "<a href='{link}' ><div class='cell' style='width:{width}px; height: {height}px; background-image: url(grid-images/photo/{index}.jpg)'><div class='showOnHover'>{title}</div></div></a>";
        var w = 280, h = 320, html = '', limitItem = 15;
        for (var i = 0; i < limitItem; ++i) {
            html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1).replace("{link}", links[i]).replace("{title}", titles[i]);
        }
        $("#freewall").html(html);

        var wall = new freewall("#freewall");
        wall.reset({
            selector: '.cell',
            animate: true,
            cellW: 280,
            cellH: 320,
            onResize: function() {
                wall.refresh();
            }
        });
        wall.fitWidth();
        // for scroll bar appear;
        $(window).trigger("resize");
    </script>

Answer 2

请使用此

var links = ["A.html", "B.html", "C.html"];
        var titles = ["titleA", "titleB", "titleC"];
        var temp = "<a href='{link}' title='{title}'><div class='cell' style='width:{width}px; height: {height}px; background-image: url(grid-images/photo/{index}.jpg)'></div></a>";
        var w = 280, h = 320, html = '', limitItem = 15;
        var index = 0;
        for (var i = 0; i < limitItem; ++i) {
            index = i % 3;
            html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1).replace("{link}", links[index]).replace("{title}", titles[index]);
        }
        $("#freewall").html(html);

按照变量索引

基于自动图像检索系统生成自动链接（Freewall.js - 网格布局）

2 个答案: