Image gallery with href tag

Question

I have a question

I have this code. The code used to display a gallery, and it works perfect. I want now that when you click on any picture I show it in bigger resolution. But when I put the href tag, the images not appear, if the link appears, but the images not appear.

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

Images may not appear when I put the tag 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>";

Appears the link, but not the images.

Any help I'm appreciate. Thanks

Answer 1

I think more easily you can do is.

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

add this class to your a tag

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

Hope that helps

Edited:

The problem seems here.

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

use this.

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