freewall.jsとfancybox.jsをRailsプロジェクトでクリック可能な拡大画像に組み合わせる

Question

私はfreewall.jsを使って画像を表示したいギャラリーで作業していますが、唯一の問題はfreewall.jsには能力が含まれていないことですクリックすると画像が拡大されます。

fancybox.jsを追加しました。ファンシーボックスの仕事をするためにhrefが必要なので接続するのが面倒でしたが、freewall.jsは呼び出されるたびに乱数を作成して2回呼び出すと動作しませんでした。ここで私が始めたコードと以下の解決策を紹介します。私はこれが、他のコーダーが非常に洗練された、反応がよく、簡単にギャラリーを実装するのを助けてくれることを願っています。

ここは私の最初のhtmlです。ここで

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

私の開始の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

は2を組み合わせる方法については、最終的なJavaScriptのソリューションでした。

ご覧のとおり、各画像で作成されていた親divにクラス.itemを追加しました（これは単に.brickを使用することもできます）。私はその後、DOMをイメージタグに縮小し、hrefを追加して完全に機能させるためにjavascriptを使用しました。

もちろん、ホバリング効果を追加するなど、微調整を使用することができますので、他の誰かが推薦して調整することを楽しみにしています。

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