Fancyboxの設定

電脳備忘録

モーダルウィンドウをlightboxからFancyboxに変更しました。 画像以外も処理できるので便利なのですが、記事に関しては画像に対してのみ有効にしたかったので下記のようなコードを追記しました。

例えばentry-bodyのjpegおよびpngでaタグが付いているものに対して有効にする場合はこんな感じに書けばいいみたいです。

<script type="text/javascript">
$(document).ready(function() {
$(".entry-body a[href$='.jpg'],.entry-body a[href$='.png']").fancybox({
'hideOnContentClick': true
});
});
</script>

使い方はこんな感じ

<div class="entry-box">
<p>
<a href="1_b.jpg" title="test1"><img src="1_s.jpg" alt="test1" /></a>
<a href="2_b.jpg" title="test2"><img src="2_s.jpg" alt="test2" /></a>
<a href="3_b.jpg" title="test3"><img src="3_s.jpg" alt="test3" /></a>
<a href="4_b.jpg" title="test4"><img src="4_s.jpg" alt="test4" /></a>
</p>
</div>

広告

ブログの維持費に充てるでございます・・・。