WebデザイナーのためのjQuery実践講座

「次の画像」「前の画像」ボタンの実装

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「スライドショー機能」に画像送りをする為の「次の画像」「前の画像」ボタンを実装する方法について、解説致します。
講師:
04:24

字幕

このレッスンでは スライドショー機能に 画像送りをする為の次の画像― 前の画像ボタンを実装する方法について 解説していきます まずは ダウンロードしてきた こちらの slideshow-arrow― というフォルダーの中に入っている こちらの index.html ファイル― そして css フォルダーの中に入っている こちらの style.css ファイル― そして 更にこちらの js フォルダーの中に入っている― こちらの javascript.js ファイルをエディターで開いて下さい そして これがそれらのファイルを 開いた状態です これらのファイルを使って今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう 以前のレッスンでご説明した通り― こちらのスライドショー部分の html タグの中には― 次の画像へ 若しくは前の画像へ を表すようなボタンの配置は行っていません この次の画像へ 若しくは前の画像へ のボタンを作成する為には― jKit プラグインのスライドショー機能の 設定項目で行う必要があります それでは その部分を 確認してみたいと思います こちらの javascript.js ファイルを開きます そして 今回 注目して頂きたい部分は こちらの部分ですね 前回のレッスンで設定した設定項目の下に 更に二つの設定項目を付けています 一つは prevhtml そして もう一つは nexthtml ― という設定項目です これらはそれぞれ prevhtml は 前の画像を表示させる為の html タグ― そして もう一つの nexthtml は 次の画像を表示させる為の html タグ― を表しています 今回はこちらの部分に 画像ファイルを設定しています 前の画像を表示させる html には 左矢印の画像 そして― 次の画像を表示させる為の html には 右矢印の画像を設定しています この様に設定してあげる事で 次の画像へのボタンや― 前の画像へのボタンを自由に デザインしてあげる事が可能です ただ これだけでは少し不十分と なってしまいますので― 後は CSS を使って 綺麗に調節してあげましょう こちらの右側部分の css ファイルを見てみましょう そして 注目して頂きたい部分は こちらのスライドの中にある― こちらの部分となります 実は こちらで設定した このイメージタグですが― この様に設定する事によって jKit プラグインが自動で― このイメージタグを挟むように a タグを生成してきます そして その a タグには それぞれクラスが付いてきて― 一つは jkit-carousel-prev というもの これは前の画像へボタンに付加されます そして もう一つは jkit-carousel-next これは次の画像へボタンに付加されます これらの a タグとクラスが 自動的にこちらのイメージタグに― 追加されてきますので それらに対して CSS でスタイルを調節してあげます ここまで出来れば スライドショーの完成です それでは index.html ファイルを ブラウザで開いてどの様に表示されてくるか― 確認してみましょう はい これが index.html ファイルをブラウザで開いた状態です この様に次の画像へ そして 前の画像へのボタンがきちんと― 追加されているのが分りますね きちんとこちらから 指定した画像で表示されています それでは クリックしてみましょう まずは 前の画像へ すると このように逆順で 画像を表示してくれますね そして 次に次の画像へ この様にクリックする事で ドンドンと次の画像を表示してくれます これで jQuery と jKit プラグインを使った― スライドショー機能の実装は完了となります 以上でレッスンは終了です 今回はスライドショー機能に 画像送りをする為の― 次の画像 前の画像ボタンを 実装する方法について解説致しました 以降のレッスンからは jQuery と jKit プラグインを使って― タブ切替機能を実装する方法について 解説していきますので― そちらも合わせてご覧下さい

WebデザイナーのためのjQuery実践講座

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

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

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

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

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