Combining freewall.js and fancybox.js for clickable enlarged images in a Rails project
<p>I am working on a gallery where I would like to display the images using freewall.js the only issue is that freewall.js does not include the ability to enlarge images on click. </p>

<p>So I added fancybox.js which took fenaggling to connect as you need an href to make fancybox work, however, the freewall.js creates a random number every time it was called so calling it twice wouldn't work. Here is the code that I started with and the solution below. I hope this helps other coders looking for a very sleek, responsive and easy to implement gallery. </p>

<p>Here is my starting html. </p>

<pre><code>&lt;div class="row"&gt;
&lt;div class="col-md-12"&gt;
&lt;div id="freewall" class="free-wall"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here is my starting Javascript</p>

<pre><code>$(document).ready(function() {
$(".fancybox").fancybox();
});

var temp = "&lt;div class='brick' style='width:{width}px;'&gt;&lt;a href='#' class='fancybox'&gt;&lt;img src='../assets/carousel/{index}.jpg' width='100%'&gt;&lt;/a&gt;&lt;/div&gt;";
var w = 1, h = 1, html = '', limitItem = 20;
for (var i = 0; i &lt; limitItem; ++i) {
    w = 1 + 3 * Math.random() &lt;&lt; 0;
    html += temp.replace(/\{width\}/g, w*160).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();
});
</code></pre>