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

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);

跟随变量index