タグ別アーカイブ: プラグイン

jQuery：画像の拡大（ズーム）表示ができるプラグイン「elevatezoom.js」

Posted on by
返信

画像をマウスオーバーした時に、画像の一部をズームして拡大表示することができる
jQueryのプラグイン「elevatezoom.js」をご紹介します。

「elevatezoom.js」

jquery_elevatezoom

マウスオーバーした時に画像を拡大させて見せることができるので、
ショップなどの商品画像を見せる際などに利用できると思います。

下記にjQueryのプラグイン「elevatezoom.js」を使用して、画像の一部をズームさせて拡大表示したときの方法をメモします。

■ 「elevatezoom.js」の設置方法

下記URLより、ダウンロードします。

http://www.elevateweb.co.uk/image-zoom

ダウンロードした「jquery.elevatezoom.js」を読み込みます。

【共通で読み込むファイル】

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
<script src="jquery.elevatezoom.js" type="text/javascript"></script>

【JS】

<script type="text/javascript">
$(function() {
    $("#zoom").elevateZoom();
});
</script>

【HTML】

<img id="zoom" src="small_image.jpg" data-zoom-image="large_image.jpg" />

ページに表示する画像と拡大した時の画像の二つを用意するか、
ページに表示する画像のサイズを小さくして表示させます。

「src=””」に表示される画像を設置し、「data-zoom-image=””」に
拡大した時の画像を設置します。

 

サンプルページ：【jQuery】画像のズーム機能「elevatezoom.js」

 

また、オプションで表示の仕方などを変更することが可能です。

・画像の中でズームさせる場合

$("#zoom").elevateZoom({
	zoomType : "inner",
	cursor: "crosshair"
});

・虫眼鏡のレンズのように表示させる場合

$("#zoom").elevateZoom({
	zoomType : "lens",
	lensShape : "round",
	lensSize : 200
});

・フェードイン、フェードアウトさせる場合

$("#zoom").elevateZoom({
	zoomWindowFadeIn: 800,
	zoomWindowFadeOut: 800,
	lensFadeIn: 800,
	lensFadeOut: 800
});

・マウスホイールでズームの大きさを変更する場合

$("#zoom").elevateZoom({
	scrollZoom : true
});

・ズーム表示のサイズを変更する場合

$("#zoom").elevateZoom({
	zoomWindowWidth: 500,
	zoomWindowHeight: 200
});

他にも色々なオプションがありますので、ぜひチェックしてみてください。

 

jQuery：日本地図を表示するjQueryプラグイン「Japan Map」

Posted on by
返信

jQueryで日本地図を表示することができるプラグイン「Japan Map」をご紹介します。

「Japan Map ( jQuery plugin )」

jquery_japan_map_1

このプラグインを使用するとjQueryで簡単に日本地図をページに表示することができます。

また、都道府県ごとに選択できるようになっているので、
クリック後にリンクやアクションを追加したりなど活用できそうです。

下記にjQueryのプラグイン「Japan Map」を使用して、日本地図を表示させたときの設置方法をメモします。

■ Japan Mapの設置方法

下記URLより、「Japan Map」をダウンロードします。

http://takemaru-hirai.github.io/japan-map/

ダウンロードした「jquery.japan-map.js」を読み込みます。

【共通で読み込むファイル】

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="./jquery.japan-map.min.js"></script>

【HTML】

<div id="map-container"></div>

【JS】

<script>
$(function(){
    $("#map-container").japanMap({
        onSelect : function(data){
            // 処理を記述します
        }
    });
});
</script>

ホバーした時に処理をする場合は下記のように記述します。

<script>
$(function(){
    $("#map-container").japanMap({
        onHover : function(data){
            // 処理を記述します
        }
    });
});
</script>

上記の設定をし、ページにアクセスすると日本地図が表示され、
都道府県ごとに選択することができます。

jquery_japan_map_2

また、都道府県ごとではなく、地方ごとに選択することも可能です。

さらに色やサイズを変更したり、他にも色々なオプションがあるので、
日本地図を使ってページを作るときに利用できそうです。

WordPress：営業日カレンダーを設置するプラグイン「Biz Calendar」

Posted on by
返信

WordPressを使用して、店舗や会社（オフィシャル）サイトを構築することがあります。

そのようなサイトを作る場合は、営業日を知らせる為に営業日カレンダーを
サイトに表示したいと思います。

WordPressのプラグインで「Biz Calendar」を使用すれば簡単に営業日カレンダーを設置することができます。
また、イベントカレンダーとしても使用できます。

下記に「Biz Calendar」プラグインを使用した時の設置方法をメモします。

■ Biz Calendar

ウィジェットで営業日カレンダー、イベントカレンダーを
表示することができるプラグインです。
簡単に登録・設置することができ使いやすいです。

【特徴】

・曜日を指定して定休日に設定
・祝日を自動的に定休日に設定
・臨時休営業日を登録
・イベント日を登録でき、URLも設定可能
・ページを遷移せずに翌月・前月のカレンダーを表示

「Biz Calendar」ダウンロードページ

■ 「Biz Calendar」設定方法

1.「プラグイン」から新規追加で「Biz Calendar」で検索し、インストールします。

Biz_Calendar1

Biz_Calendar2

2.「プラグイン」からインストールした「Biz Calendar」を有効化します。

Biz_Calendar3

3.「設定」から「Biz Calendar設定」を選択すると、Biz Calendarの設定画面が表示されます。

Biz_Calendar4

4.定休日や臨時休営業日、イベントを設定します。

【定休日】

Biz_Calendar5

【臨時休営業日】

Biz_Calendar6

【イベント】

Biz_Calendar7

5.情報を入力後、「変更を保存」ボタンをクリックします。

Biz_Calendar8

6.設定が完了したら、「外観」から「ウィジェット」を選択します。

ウィジェットに「Biz Calendar」が表示されるので、サイドバー等に設置します。

Biz_Calendar9

↓

Biz_Calendar10

7.保存が完了するとサイトに営業日カレンダーが表示されます。

Biz_Calendar11

設定項目もシンプルなので簡単に営業日カレンダーを設置することができます。

また、イベント日を設定する場合はURLも指定することができるので便利です。

サイドメニューに簡単に作成したい場合はおすすめです。

jQuery：ウィンドウ内で画像の拡大表示をするプラグイン「Lightbox2」

Posted on by
返信

jQueryのプラグイン「Lightbox2」を使用したので設置方法を記載します。

Lightboxは画像やリンクなどをクリックした際に、
ウィンドウ内で画像を拡大表示することができるプラグインです。

「Lightbox2」

lightbox2_1

以前はLightboxを使用する場合、prototype.jsを使わなければいけなかった記憶がありますが、
今のバージョン（2.5以降）ではjQueryだけで設置できるようです。

prototypeとjQueryを共存させると動作がうまくいかないことがあり、
Lightboxをあまり使用していなかったのですが今後活用できそうです。

下記にjQueryのプラグイン「Lightbox2」を使用し、画像の拡大表示をさせた時の設置方法をメモします。

Lightboxのバージョンは「Lightbox v2.7.1」です。

■ Lightbox2の設置方法（使い方）

下記URLより、「Lightbox2」をダウンロードします。

http://lokeshdhakar.com/projects/lightbox2/

ダウンロードした「css」「js」「img」フォルダをサーバにアップロードします。

【共通で読み込むファイル】

jQueryと各ファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="./css/lightbox.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript"  src="./js/lightbox.js"></script>

【HTML】

Lightbox2を使用する画像のリンクに「rel=”lightbox”」を記述します。

<a href="./image/sample.jpg" rel="lightbox"><img src="./image/thumb.jpg" /></a>

また、下記のように記述してもOKです。
aタグに「data-lightbox=”sample”」を追加しています
※「sample」は個別の値で設定します。

<a href="./image/sample.jpg" data-lightbox="sample"><img src="./image/thumb.jpg" /></a>

上記の設定をするだけで、Lightbox2を設置することができます。

■ Lightbox2で画像をグループ化する方法

複数の画像をグループ化して表示させたい場合があります。
下記のように記述するとグループ化することが可能です。

【HTML】

「rel=”lightbox[group]”」を記述します。

<a href="./image/sample1.jpg" rel="lightbox[group]"><img src="./image/thumb1.jpg" /></a>
<a href="./image/sample2.jpg" rel="lightbox[group]"><img src="./image/thumb2.jpg" /></a>
<a href="./image/sample3.jpg" rel="lightbox[group]"><img src="./image/thumb3.jpg" /></a>

または、下記のように記述します。
グループ化する場合「data-lightbox=”group”」の「group」を同じ値で設定します。

<a href="./image/sample1.jpg" data-lightbox="group"><img src="./image/thumb1.jpg" /></a>
<a href="./image/sample2.jpg" data-lightbox="group"><img src="./image/thumb2.jpg" /></a>
<a href="./image/sample3.jpg" data-lightbox="group"><img src="./image/thumb3.jpg" /></a>

■ キャプションを入れる場合

【HTML】

「title=”キャプション”」を記述します。

<a href="./image/sample.jpg" rel="lightbox" title="キャプション"><img src="./image/thumb.jpg" /></a>

または、下記のように記述します。

<a href="./image/sample.jpg" data-lightbox="sample" data-title="キャプション"><img src="./image/thumb.jpg" /></a>

とても簡単に設置することができるので、
拡大して表示したい画像がある場合などはおすすめです。

jQuery：画像のスライドショーをするプラグイン「FlexSlider 2」

Posted on by
9

jQueryで画像のスライドショーを実装できるプラグインは色々ありますが、
今回「FlexSlider 2」を使用してみたので、設定方法をメモします。

「FlexSlider 2」

FlexSlider2_1

スライドショーさせる画像を用意し、jQueryで指定すれば
簡単に画像のスライドショーを実現することができます

下記にjQueryのプラグイン「FlexSlider 2」を使用して、
複数の画像をスライドショーさせた時の方法をメモします。

■ 「FlexSlider 2」を使用したスライドショーの使用方法

※下記、基本的な設定方法です。

下記URLより、「FlexSlider 2」をダウンロードします。

http://flexslider.woothemes.com/

【読み込むファイル】

jQueryと各ファイルを読み込みます。

<link rel="stylesheet" type="text/css" href="./flexslider.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript"  src="./jquery.flexslider.js"></script>

【JS】

クラスを指定し「flexslider」を使用します。

<script type="text/javascript">
$(function() {
    $('.flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: 5000
    });
});
</script>

画像をスライドさせる為に「animation: “slide”」を指定します。
animationは「slide」と「fade」で設定することが可能です。

スライドショーのスピード（間隔）を「slideshowSpeed: 5000」で設定しています。

他にも設定は色々あります。
ページ下部に一部記載します。

【HTML】

スライドショーをさせる要素に「class=”flexslider”」を記述します。

<div class="flexslider">
    <ul class="slides">
        <li>
            <a href="https://www.google.co.jp/"><img src="./img/sample1.jpg" /></a>
        </li>
        <li>
            <img src="./img/sample2.jpg" />
            <p>キャプション</p>
        </li>
        <li>
            <img src="./img/sample3.jpg" />
        </li>
        <li>
            <img src="./img/sample4.jpg" />
        </li>
    </ul>
</div>

画像にリンクを貼る場合は、画像にaタグを指定すればリンクを貼ることが可能です。
また、キャプションを付ける場合はimgタグの箇所にpタグで指定します。

上記の設定をするだけでスライドショーを行えます。
スタイルがデフォルトの状態なので、デザインを変更する場合はCSSで調整します。

他にも色々なカスタマイズをすることが可能です。

オプション 内容
animation スライドの種類を設定します。「fade」か「slide」で指定します。
direction スライドの方向を設定します。横の場合「horizontal」、縦の場合「vertical」で指定します。
reverse 逆方向にスライドさせる場合は「true」を指定します。
animationLoop スライドをループさせるかを設定します。ループさせない場合は「false」を指定します。
slideshow 自動でスライドショーを行うかを設定します。手動にする場合は「false」を指定します。
slideshowSpeed スライドショーのスピード（間隔）を設定します。
animationSpeed アニメーションのスピードを設定します。
randomize ランダムでスライドショーをさせる場合は「true」で設定します。
controlNav ページャーを表示するかを設定します。表示しない場合は「false」を指定します。
directionNav 次へと前へのナビゲーションを表示するかを設定します。表示しない場合は「false」を指定します。
prevText 前へナビゲーションのテキストを指定します。
nextText 次へナビゲーションのテキストを指定します。

※上記は一部のオプションです。

他にも色々なオプションがあるので、様々なカスタマイズができそうです。
ぜひ、試してみてください。