Kombination von freewall.js und fancybox.js für anklickbare vergrößerte Bilder in einem Rails-Projekt

Question

Ich arbeite an einer Galerie, wo ich die Bilder mit freewall.js anzeigen möchte das einzige Problem ist, dass freewall.js die Fähigkeit nicht enthält um Bilder bei Klick zu vergrößern.

Also fancybox.js hinzugefügt, die Fenaggling zu verbinden, wie Sie eine href benötigen, um fancybox Arbeit zu machen, aber die freewall.js erstellt eine zufällige Zahl jedes Mal, wenn es aufgerufen wurde, so zweimal aufrufen würde nicht funktionieren. Hier ist der Code, mit dem ich begonnen habe und die Lösung unten. Ich hoffe, dass dies anderen Programmierern hilft, die eine sehr schlanke, reaktionsfähige und einfach zu implementierende Galerie suchen.

Hier ist meine Startseite html.

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

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

Answer 1

Hier war die letzte Javascript-Lösung, wie die beiden zu kombinieren.

Wie Sie sehen können, habe ich eine Klasse .item dem Eltern-Div hinzugefügt, das mit jedem Bild erstellt wurde (ich hätte auch einfach .brick verwenden können). Ich habe dann Javascript verwendet, um das dom auf das Image-Tag herunterzuskalieren und eine href hinzuzufügen, die es nun voll funktionsfähig macht.

Natürlich könnte es eine Feinabstimmung verwenden, einen Schwebeeffekt hinzufügen und so weiter, also freue ich mich darauf zu sehen, was andere Empfehlungen und Verbesserungen sonst noch machen können.

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