【jQuery Masonry】画像にリンクを設定する方法

Masonryについてはこちらを参照。

画像を手軽に列挙したい際に何かと便利なjQueryのmasonryですが、画像にリンクも設定できます。その際は設定する画像がブロック要素であることを維持しなければいけません。
##インライン要素からブロック要素へ
基本の形

<div class="js-masonry">
    <div class="item"><a href="" class="toBlock" target="_blank"><img src="img/1.jpg"></a></div>
    <div class="item"><a href="" class="toBlock" target="_blank"><img src="img/2.jpg"></a></div>
    <div class="item"><a href="" class="toBlock" target="_blank"><img src="img/3.jpg"></a></div>
</div>

imgタグをaタグで囲っています。この場合、aタグはインライン要素であるため、Masonryが正常に作動しなくなります。以下のCSSを追加すれば解決です。

.toBlock{
    display: block;
}

###まとめ
インライン要素、ブロック要素はウェブデザインの基本中の基本なので、jQueryやbootstrapをさらによく理解するために勉強しましょう。

######<追記>
画像にオーバーマウスした際に虫眼鏡のアイコンになるのが気になる方はimgタグに以下のCSSを適用させましょう。

.cursor(任意のclass名){
    cursor: pointer !important;
}