【jQuery】画像の拡大を簡単に実装する方法

こんにちは、ハル@haru_elpisです。

jQueryで画像の拡大を簡単に実装する備忘録です。

 

画像の拡大を簡単に実装する方法

ダウンロード

https://www.jacklmoore.com/colorbox/

解凍するといくつかファイルが出てきますが、query.colorbox-min.js のみ使用するので他は必要ありません。プラグインをコピーして、jsフォルダなど任意の場所へ移動しておきましょう。

head

<link rel="stylesheet" href="colorbox.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>

html

<a href="images/img01.jpg" class="ex" title="">
<img src="images/img01.jpg" width="300" alt="">
</a>

javascript

<script>
$(document).ready(function(){
$(".ex").colorbox({rel:'ex'});
});
</script>

 

他にもいろいろオプションが用意されているようです。
下記公式サイトを参考にカスタマイズしてみるのもいいかもしれません。

公式サイト

 

[affi id=23]