javascript - 带有 href 标签的图片库

Question

我有一个问题

我有这个代码。该代码用于显示画廊，并且效果完美。我现在希望当您单击任何图片时我会以更大的分辨率显示它。但是，当我放置 href 标签时，如果链接出现，但图像不出现，则图像不会出现。

<div class="container">

    <div id="freewall" class="free-wall"></div>

    <script type="text/javascript">

        var temp = "<div class='brick' style='width:{width}px;'><img src='img/col1/{index}.jpg' width='100%'></div>";
        var w = 1, h = 1, html = '', limitItem = 24;
        for (var i = 0; i < limitItem; ++i) {
            w = 1 + 3 * Math.random() << 0;
            html += temp.replace(/\{width\}/g, w*150).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();
        });

    </script>

</div>

当我放置标签 href 时，图像可能不会出现

var temp = "<div class='brick' style='width:{width}px;'><a href='img/col1/{index}.jpg'><img src='img/col1/{index}.jpg' width='100%'></a></div>";

显示链接，但不显示图像。

任何帮助我都很感激。谢谢

Answer 1

我认为您可以更轻松地做到这一点。

.style1{
display:block;
width:100%;
}

将此类添加到您的 a 标记

<a class="style1" href='img/col1/{index}.jpg'>

希望有帮助

编辑:

问题似乎在这里。

.replace("{index}", i + 1);

用这个。

.replace("/{index}/g", i + 1);