2017.01.21

ホームページに効果をつける!JQueryプラグインの紹介とオススメプラグイン3選

【javascriptを簡単に書ける!】J-Queryの紹介、導入方法
こちらの記事でJavaScriptを簡単にかけるプラグインとしてJQuery
紹介いたしました。

今回はJQueryが書けなくても、ホームページに効果や機能を与えることができるJQueryプラグインについてご紹介いたします。

JQueryプラグインとは?



上記の記事にも書いているのですが、
使用頻度の多い機能や効果を再利用しやすいようにまとめたものであり、こちらの知識があれば一からJavaScriptやJQueryが書けなくても、一通りの機能を実装する事ができます。

JQueryプラグインにはそれぞれ、対応するJQueryのバージョンが異なることがあるので注意してください。

オススメプラグイン3選

ここで初めてのJQueryプラグインにオススメな、
JQueryプラグインを3つご紹介いたします。



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

有名な画像のポップアップのプラグインです。
英語のページになりますが実装方法は簡単です。

1.上記のURLにアクセスしトップページの「DOWNLOAD」をクリックします。


2.ダウンロードしたファイルを解凍しdist→js→lightbox.min.jsとdist→css→lightbox.min.css、をディレクトリ配下に設置します。
※js、cssのフォルダを作成しそれぞれを格納することをオススメします。


3.LightBoxのプラグインはJQueryの1.7以降のバージョンで作動するため、バージョン1.7以降のJQuery本体をhtmlのheadタグ内に記述します。
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>


4.実装したいhtmlファイルのhead内に
・css
<link href="css/lightbox.min.css" rel="stylesheet">
・JQuery
<script src="js/lightbox.min.js"></script>
をそれぞれ記述します。


5.HTMLの効果を追加したいaタグに
<a href="表示したい画像のパス" data-lightbox="任意のdata属性(ex.image-1)" data-title="画像のタイトル">
を追加します。

「data-lightbox」に同じ名前を入れるとグループ化され矢印で画像の遷移ができます。
<a href="images/image-2.jpg" data-lightbox="roadtrip">Image #2</a>
<a href="images/image-3.jpg" data-lightbox="roadtrip">Image #3</a>
<a href="images/image-4.jpg" data-lightbox="roadtrip">Image #4</a>
以上で実装は完了です




●bxSlider
http://bxslider.com/

こちらはホームページのヘッダーなどでよく見かける、画像が切り替わるスライダーのプラグインです。

1.上記のURLにアクセスしトップページの「DOWNLOAD」をクリックします。


2.ダウンロードしたファイルを解凍しjquery.bxslider.min.jsとjquery.bxslider.css、imagesの中の画像をディレクトリ配下に設置します。
※js、css、imagesのフォルダを作成しそれぞれを格納することをオススメします。


3.bxSliderのプラグインはJQueryの1.8.2以降のバージョンで作動するため、バージョン1.8.2以降のJQuery本体をhtmlのheadタグ内に記述します。
<script src="<a href="https://code.jquery.com/jquery-1.8.2.min.js" target="_blank">https://code.jquery.com/jquery-1.8.2.min.js</a><br>"></script>


4.実装したいhtmlファイルのhead内に
・css
<link href="css/bxslider.min.css" rel="stylesheet">
・JQuery
<script src="js/jquery.bxslider.min.js"></script>
をそれぞれ記述します。


5.表示したい画像のグループをul、liタグで記述し、ulのclassにbxsliderを付与します。
<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>


6.最後にhead内に
<script>
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>
を記述して実装完了です。




・Raindrop.js
http://daniellaharel.com/raindrops/

このプラグインはホームページの区切り線に雨粒が落ちたような演出を加えるプラグインです。

1.上記のURLにアクセスしナビゲーションリンクの「Download」をクリック


2.「Github」をクリック


3.左の緑のボタン「Clone or download」をクリックし、その中の「Download ZIP」をクリック


4.ダウンロードされたファイルの中の「raindrops.js」をディレクトリ配下に設置します
※jsのフォルダを作成しその中に格納することをオススメします。


5.htmlファイルのhead内にJQuery、JQueryUI(JQueyの拡張機能)、Raindrops.jsを読み込みます。

JQuery本体
<script src="<a href="https://code.jquery.com/jquery-1.10.1.min.js" target="_blank">https://code.jquery.com/jquery-1.10.1.min.js</a><br>"></script>

JQuery UI
<script src="<a href="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js" target="_blank">http://code.jquery.com/ui/1.12.1/jquery-ui.min.js</a><br>"></script>

Raindrop.js
<script src="js/raindrops.js"></script>


6.表示したい場所のdiv要素またはsection要素に任意のidを記述します。
ここでは「divにidをexample」とします。

HTML
<div id=”example”></div>


7.CSSで指定したdiv要素(example)に「width」、「height」、「background-color」を指定します。
ここでは「width:300」「height:200」「background-color:#FFFFFF」とします。

CSS
#example{
width:300px;
height:200px;
background-color:#FFFFFF;
}


8.最後にhead内に「raindrop.js」を有効化するスクリプトを記述します。
  <script>
  $(function(){
    $('#sample').raindrops();
  });
  </script>

以上で実装完了です。


まとめ
いかがでしたでしょうか?

WEBデザイン初心者の方は最初はあまり技術がなくても
高度な技術をすぐに自分で作ったホームページに組み込むことができ、
プロのような高品質なサイトを構築することができるので必ず覚えておきたい技術です。

上記の3つのプラグインはここでは簡単な実装方法を紹介しましたが
たくさんの方がカスタマイズの方法をWEB場で説明しているので、興味のある方は是非調べてみてください。

記事をシェアする

fb_logoシェア tw_logoツイート

タグ

PAGE
TOP
  • home
  • BLOG
  • ホームページに効果をつける!JQueryプラグインの紹介とオススメプラグイン3選