LogoMark.png

Webデザイン/2020/0704

第10回 jQuery プラグイン

Webデザイン/2020造形短期大学部|2020.07.04

第10回目の展開と要件



以下、目次を見て演習の全体像を把握してから、順に説明を読み進めて下さい。



本日のメニュー


はじめに

Webサイトの演出方法に、複数の写真がスライド表示されるスライダー(カルーセル)や、クリックすると拡大表示される LightBoxなどがありますが、これらは、一般に「 jQuery プラグイン」として公開されていて、いずれも JavaScript、jQuery の基礎知識があれば、ファイルの組み込みとクラスの設定のみで、実装することが可能です。

今回の授業では、需要の多いスライダーの実装を紹介し、加えていくつかの事例をサンプルとともに紹介しますので、その組み込み方を経験して下さい。jQuery プラグインの利用方法は、いずれも同様のものです。いくつか体験すれば、その他多くのプラグインを、自力で組み込めるようになります。



事例演習|Slider プラグイン

定番スライダー bxSlider の事例を紹介します。bxSlider は、ファイルセットのダウンロードも可能ですが、公式サイトの Install > Easy Way に記載のとおり、CDN(ネットワークから直接取得する方法)で利用可能です。


準備

ファイル構成を確認

jQueryPluginフォルダの中には、以下の4つの項目が見えるはずです。

HTML で必要なファイルの読み込み

HTMLの <head> に以下の5行を追加してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<link rel="stylesheet" href="style.css" />

HTMLに画像掲載のためのコードを記載

HTMLのコンテンツ領域(場所は任意)に、以下のようなコードを書いて、画像が複数表示されるようにしてください。画像はすべて同一のサイズに調整済みであることが必要です。

<div id="slideContainer">
     <ul class="slider">
       <li><img src="images/01.jpg"></li>
       <li><img src="images/02.jpg"></li>
       <li><img src="images/03.jpg"></li>
     </ul>
</div>


CSSで表示設定

CSS ファイル(style.css)で、スライド部分の表示に関する設定を行って下さい。.slider に対して幅を定義してもうまくいきません。幅の定義等は .slider の親要素、この場合は slideContainer に指定します。

#slideContainer {
  max-width:800px;
  margin: 2em auto;
}


JavaScript でスライドの設定

JavaScript ファイル(script.js)に、スライド機能の適用と、その動きに関するパラメータ設定を記述します。使うのは、基本的に bx.Slider() というメソッドだけで、括弧の中に、動作パラメータを列挙すれば、設定は完了です。

$(function(){
   $('.slider').bxSlider({
      auto:true,
      speed:1000,
      pager:true
   });
});

全体の調整

GitHub へのアップロードと公開

演習は、新規のフォルダを作成して行なっていただきましたので、GitHub の方も同様に、新規のリポジトリを作成し、別サイトとして公開して下さい。

GitHubPagesNew.png
GitHubPages01.png
GitHubPages02.png
GitHubPages03.png


GitHubPagesSettings.png
GitHubPages05.png


特設サイトにリンクを追加




その他のプラグインの事例

以下、その他のプラグインをいくつか紹介します。時間に余裕があれば、サンプルを参考に、組み込みの体験と追加公開を行なってください。

なお、この先の事例を試す場合は、jQueryPlugin02、jQueryPlugin03・・など、それぞれ新規にフォルダを作成して GitHub に公開することをお勧めします。


LightBox プラグイン

クリックで画像が拡大する LightBox を紹介します。配布パッケージには不要なファイルが多く含まれているので、自分で0から構築する際は、必要なもののみを抽出する作業が少し大変かもしれません。以下のサンプルは、必要なファイルのみで構成しています。

以下、補足説明

Parallaxプラグイン

パララクスとは「視差」のことで、ボックス領域のスクロールスピードを調整することで、奥行きのある視覚空間を演出するものです。jQuery用のプラグインが多数ありますが、ここでは、parallax.min.js を使います。


Masonry プラグイン

大きさの異なる複数のブロックが、タイル状に自動整列されます。ウィンドウサイズが変更されると、アニメーションしながらレイアウトを変更します。

参考解説ページ:jQuery/Masonry




第10回目は、以上で終了とします。お疲れ様でした。
次回以降、3回に渡って各自のポートフォリオサイトの制作期間とします。





PAGES

GUIDE

DATA

Last-modified: 2020-07-04 (土) 11:06:24