クリエイター:コーディング備忘録ブログ

コーディング

画像を拡大表示させるjQuery[fancybox]

fancy0

写真等の画像をさせる事ができる、
JQueryのfancyboxの使い方です。

下記サイトでファイルをダウンロードします。
http://fancybox.net/

ダウンロードして
解凍したフォルダ内の「fancybox」フォルダを読み込みたいサイトにコピーします。
fancy1

今回は「common」の「js」フォルダに入れています。

ますヘッダー内に下記コードを記述してfancyboxを読み込みます。

次にスクリプトタグも記述します。

「.group」の箇所には任意のグループ名を付けてください。

「cyclic: true」の箇所はループ表示するかどうかを指定しています。
この場合はtrueなのでループ表示がONになっています。

そして下記のようにHTMLを組むとクリックすると拡大画像が表示されます。

「rel」で任意の名前を付けた同一のグループ名を付ける事によって
拡大表示した時に同じグループ名内でループ表示されます。

コメント

この記事へのコメントはありません。

RELATED

PAGE TOP