FancyBoxでサイトの画像をポップアップ表示

投稿日:

 
FancyBox,JavaScript,jQuery
FancyBox,JavaScript,jQuery

FancyBoxとは、JavaScriptコードを簡単に記述することができるJavaScriptライブラリ「jQuery」のプラグインです。サイト内の画像をクリックすると、ポップアップ表示してくれる機能になります。さらに、複数枚の画像をギャラリー表示することやポップアップ画像にタイトルを付けることもできる便利なプラグインです。

FancyBox:ライセンスについて

FancyBoxはバージョンによって、ライセンスが異なります。

  • 新バージョン(v2以降):商用利用の場合は有料
  • 旧バージョン(v1):MITライセンス

今回は旧バージョンのFancyBoxを紹介しています。

FancyBox:ダウンロード・アップロード

FancyBoxを使うには、ファイルをダウンロードしてサーバーにアップロードします。アップロードする際は、扱いやすいように必要なファイルのファイル名を変更しておきます。

1.ダウンロード

下記URLより、圧縮ファイルをダウンロードして解凍します。

http://fancybox.net/

ダウンロード

2.アップロード

解凍したフォルダ「jquery.fancybox-1.3.4」内の「jquery.fancybox-1.3.4」→「fancybox」をクリックし、その中の画像ファイル(.png)と下記3つのファイルを以下の名前に変更後、サーバーにアップロードします。

  • jquery.fancybox-1.3.4.pack.js → fancybox.js
  • jquery.fancybox-1.3.4.css → fancybox.css
  • jquery.easing-1.3.pack.js → easing.js

アップロード

FancyBox:HTMLの記述

HTMLのソースコードは、画像の表示・複数枚の画像の表示・タイトル付きの画像の表示のそれぞれのソースコードと共通のソースコードがあります。

1.共通コード

下記コードを<head> </head>内に記述します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="ホームページのURL/fancybox.css" media="screen" />

<script type="text/javascript" src="ホームページのURL /easing.js"></script>

<script type="text/javascript" src="ホームページのURL /fancybox.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$(".group").fancybox({

'hideOnContentClick': true,

'zoomSpeedIn' :              500,

'zoomSpeedOut':            500,

'zoomSpeedChange':     500,

'overlayShow' :               true,

'overlayOpacity' :           0.5,

'easingIn' : 'easeInOutBack',

'easingOut' : 'easeInOutBack',

'easingChange' : 'easeInOutBack'

});

});

</script>

共通コード

2.画像の表示

画像の表示

<a href="ホームページのURL /画像名.jpg" target="_blank" class="group">

<img src="ホームページのURL /画像名.jpg" alt="画像名" border="0" /><//a>

画像の表示

3.複数枚の画像の表示

複数枚の画像の表示

<a href="ホームページのURL /画像名.jpg" rel="group1" target="_blank" class="group">

<img src="ホームページのURL /画像名.jpg" alt="画像名" border="0" /><//a>

複数枚の画像の表示

4.タイトル付きの画像の表示

タイトル付きの画像の表示

<a href="ホームページのURL /画像名.jpg" title="画像名" target="_blank" class="group">

<img src="ホームページのURL /画像名.jpg" alt="画像名" border="0" /><//a>

タイトル付きの画像の表示

FancyBoxのまとめ

サイト内の画像をポップアップ表示してくれるjQueryプラグイン「FancyBox」を紹介しました。必要なファイルをアップロードし、head内に共通コードを記述したら、準備は完了です。本文の画像を表示する場所に、表示方法ごとに画像の指定コードを記述するだけです。サイトの見栄えが良くなるので是非、使ってみて下さい。

投稿者:

-コード, サムネイル, フォーム, プラグイン
-, ,

Copyright© FreesoftConcierge , 2018 All Rights Reserved.