CODEWITHSUNDEEP
javascriptjqueryhtmlfreewalljs
lbollu
lbollu

Reputation: 269

Changing script into html

I am creating a masonry style image page and using the FreeWall script. However the way that it brings in the images seems to be that it is linking to the folder - i/photo/{index}.jpg. I need it to just be static img tags within the #freewall div so that I can apply some other effects to each image.

I have tried to copy out the img HTML from the script and paste it within the div but it doesn't keep the same style for the masonry effect. Basically, I just need the plugin called but thats it.

You can see the code here: http://pagedev.co.uk/flex-grid/flex-grid.html

I am not familiar with javascript that well so would really be grateful for any help! I hope all this makes sense.

Here is the html:

<head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/freewall.js"></script>
    <style type="text/css">
        .free-wall {
            margin: 15px;
        }
        .brick img {
            margin: 0;
            display: block;
        }
    </style>
</head>
<body>
    <div id="freewall" class="free-wall"></div>
</body>
</html>

Here is the script on the page:

var temp = "<div class='brick' style='width:{width}px;'><img src='i/photo/{index}.jpg' width='100%'></div>";
var w = 1, h = 1, html = '', limitItem = 49;

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

Upvotes: 0

Views: 131

Answers (1)

Iv&#225;n Rodr&#237;guez Torres
Iv&#225;n Rodr&#237;guez Torres

Reputation: 4451

If you want to take the variable you are going to have to put the img tags on your HTML file. You can do it, there is any problem with that. Just change your script to be like this:

(function() {    
    $("#freewall").html(html);

    var wall = new Freewall("#freewall");
    wall.reset({
        selector: 'img',
        animate: true,
       cellW: 150,
       cellH: 'auto',
       onResize: function() {
            wall.fitWidth();
       }
    });

    var images = wall.container.find('img');
    wall.fitWidth();
})();

Upvotes: 0

Related Questions