カテゴリーアーカイブ: jQuery

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

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

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

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 次へナビゲーションのテキストを指定します。

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

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

jQuery：テキスト入力の候補を表示するプラグイン「Completer」

Posted on by
返信

jQueryのプラグイン「Completer」を使用してみたので、使用方法をメモします。

「Completer」はフォームのテキスト入力時に、入力の候補を表示することができるプラグインです。

「Completer」

http://fengyuanchen.github.io/completer/

jquery_Completer

メールアドレスやURLなど、形式が決まっている場合は、
テキスト入力時に候補が表示されると使いやすいと思います。

下記にjQueryのプラグイン「Completer」を使用して、テキスト入力時に候補を表示し、
入力の補助（オートコンプリート）をした時の方法をメモします。

■ テキスト入力の候補を表示する「Completer」

【読み込むファイル】

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

<link rel="stylesheet" type="text/css" href="./completer.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="./completer.js"></script>

【JS】

使用するテキストボックスのidを指定して、Completerを使用します。

<script type="text/javascript">
$(function() {
    $("#completer-email").completer({
        separator: "@",
        position: "bottom",
        source: ["gmail.com", "yahoo.co.jp", "infoseek.jp"]
    });
});
</script>

「separator」に値との間に使用する文字を指定します。
「source」に候補で表示する値を設定します。
「position」で候補が表示される位置を指定することができます。デフォルトは「”bottom”」です。
inputタグに直接「data-position=”top”」と指定しても大丈夫です。
（”top”、”right”、”bottom”、”left”）

【HTML】

Completerを使用する為にidを指定します。

<input type="text" id="completer-email" />

また、inputタグに直接指定することも可能です。

【HTML】

<input type="text" completer data-separator="@" data-source="['gmail.com', 'yahoo.co.jp', 'infoseek.jp']" />

下記のように入力候補を表示することが表示させることができます。

jquery_Completer_demo

他にもオプションを使って、色々な使い方ができるようです。
ユーザにとって入力しやすくなるので、活用できそうなプラグインです。