Combining freewall.js and fancybox.js for clickable enlarged images in a Rails project

Question

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.

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.

Here is my starting html.

<div class="row">
<div class="col-md-12">
<div id="freewall" class="free-wall"></div>
</div>
</div>

Here is my starting Javascript

$(document).ready(function() {
$(".fancybox").fancybox();
});

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

Juan Pablo Ugas · Accepted Answer · 2016-03-23T16:48:10.067

Here was the final javascript solution on how to combine the two.

As you can see, I added a class .item to the parent div that was being created with each image (I could've also simply used .brick). I then used javascript to scale down the dom to the image tag and add an href which now makes it fully functional.

Of course it could use some fine tuning, adding a hovering effect and so on so I look forward to seeing what other recommendations and tweaks anyone else can come up with.

$(document).on('page:change',function() {
    $(".item").find("img").each( function() {
        $(this).attr("href",$(this).attr("src"));
    });

    $(".fancybox").fancybox();
});

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

Combining freewall.js and fancybox.js for clickable enlarged images in a Rails project

1 Answers1