Changing script into html

Question

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

Iván Rodríguez Torres · Answer 1 · 2015-08-06T09:52:43.220

0

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

edited Aug 06 '15 at 09:52

answered Aug 06 '15 at 08:37

Iván Rodríguez Torres

4,293
3
31
47

I want to remove the var temp line completely.. If possible I would like to just have within my div. and then just a call to the plugin at the bottom. Sorry its hard to explain – lbollu Aug 06 '15 at 09:17
I want to add a lightbox functionality to the images, and also have them content managed so would like to be able to see the code rather than them being brought in via the script. – lbollu Aug 06 '15 at 09:18
I have tried it and its not giving the same effect. it doesnt fit the images in the same way as my link above. I have now got this in the div:
– lbollu Aug 06 '15 at 10:51
Sorry, but doing such a change with out a working app is difficult, even more if you aren't familiar using Javascript. I think that It's worth to you learning a bit of JS first – Iván Rodríguez Torres Aug 06 '15 at 11:21

Changing script into html

1 Answers1