jQueryプラグイン活用講座

jSliderのダウンロードと設定

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
プラグインjSliderをダウンロードして、HTMLドキュメントに設定を加えます。
講師:
05:32

字幕

このレッスンでは 画像を切り替えるスライダーのプラグインjSlider のダウンロードと設定についてご紹介しますこれが ドキュメントのページなんですけれどもまず このページですねURL はというとvanity.enavu.com とこのページから来るといいでしょうダウンロードをいきなりすることもできるんですけれども 今開いていたのはdocumentation & demosのページですさてここで ダウンロードができますしそれからデモを見ることもできますデモを確認しましょうスライダーというのはこのスライドの切り替えですね画像を切り替えてますしかもこれは自動になっていますもちろんこの ← で戻ったりあるいは このラジオボタンのようなボタンで表示するページを画像を選ぶこともできますでは先ほどのページに戻ってダウンロードですねこの(download)ボタンでダウンロードができますダウンロードして開いたのがこの jSlider というフォルダですファイルの数はあまり多くありませんそして js ファイルが3つあるんですけれどもこの3つとも使用しますこの jSlider.js というのが1番メインなんですがeasing とか animation の設定も使えますのでこの3つを作業用のフォルダ今回はこちらですsample.html が作業用の練習用の HTML ドキュメントですそして lib というフォルダにライブラリは入れておくことにしますのでここ 今空っぽですけれどもここに この js ファイル3つ選んでコピーしますこれで ダウンロードからの設定はできました次は HTML ドキュメントの方の操作ですDreamweaver で作業用のHTML ドキュメントsample.html を開きましたjquery のプラグインですからjquery を script 要素で読み込んでおく必要がありますここで1つ注意なんですが現在 jquery の1の最新バージョンは1.11.3 なんですけれどもこの jSlider は 1.8 のバージョンまでしか対応してないようですプラグインの場合は このようにjquery のバージョンの対応が最新版でないこともありますので注意する必要がありますそしてこの後に プラグインをscript 要素で読み込みますsrc の属性でソースの設定ですね先ほどコピーしておいた3つですですから3回作業が必要なんですけれどもまず animations の方ですねcustom_animations.jsを読み込んで続けて2つ目src の属性で今度は easing ですcustom_easing.jsも読み込みますそして最後ですねscript 要素でsrc の「参照」を選んでこれが1番メインのライブラリになりますけどjSlider.js ですそして閉じますあともう1つスタイルシートの設定もしておいたほうが良いですではこの の後にですねまずは閉じてしまいましょうそしてここに何を設定するかというと先ほどの documentation のページからコピーしてきますdocumentation を下にスクロールしてこの css をベースとして使うといいよというふうに書いてありますので全部選択してあっ . が抜けてますね危ないです全部選択して コピーしますそして HTML ドキュメントのstyle 要素の中にペーストですだいぶ長いですが 量が少ないほうが良いので このままにしておきましょう改行1つ余計ですねそして保存をします「ファイル」を「保存」ですねこれで jSlider のダウンロードとそれから基本的な設定ができましたこのレッスンでは jSlider のプラグインのダウンロードの仕方とそれから 設定についてご説明しましたダウンロードはvanity.enavu.com のdocumentation & demosのページからダウンロードしましたそれから先ほど コピーしたcss もここですねHTML ドキュメントの方はライブラリの JavaScriptファイルが3つありますので3つとも script 要素で読み込みますそれから先ほどのdocumentation のcss ですねこれはそっくりそのままstyle 要素の中にペーストしました

jQueryプラグイン活用講座

jQueryは広く利用されているJavaScriptライブラリで、機能を拡張するプラグインも数多く公開されています。このコースではインターフェイスやアニメーションが簡単に作れるiQueryのプラグインを多数紹介します。パーティクルのアニメーションや切り替え効果を加えた写真表示、アニメーションするパーツなど多くの作例を実際にコードを書きながら詳しく説明します。

2時間36分 (31 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 1,990
発売日:2016年01月17日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。