WebデザイナーのためのJavaScript & jQuery入門

イメージギャラリーを作ってみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像のサムネイルをクリックすることで、拡大画像と切り替わるギャラリーを作ってみましょう。
講師:
08:10

字幕

このレッスンでは jQuery で簡単なイメージギャラリーを作ってみましょう。まず final のファイルをブラウザで開いてギャラリーを確認してみましょう。final のファイルを開くとこの様に画像のサムネールがあってクリックすることで次々と画像を表示切り替えができるようになっています。それでは begin のファイルを開いていきましょう。begin フォルダの中に入っているindex.html を Chrome で開きます。また、同じ index.html をSublime text でも開いて編集をしていきましょう。それではまず begin の状態を確認しておきます。既に画像の配置などは終わってるのですがクリックしてしまうと、この様にリンクが貼られた画像に直接飛んで行ってしまいます。まずはこれを jQuery で解除しておきましょう。HTML の下の方にあるスクリプトの場所を見てみます。この様に (document).ready(function) で囲まれた箇所はそのドキュメント、ファイルが読み込まれたら一回実行するというようなおまじないです。そして、ここにすでにクリックのイベントが登録してあります。 クリックのイベントはgallery の中の a というのはこのサムネールがそれぞれa タグで包まれています。この a をクリックしたらという内容です。ではその中身ですが、まずa タグのリンクの動作をキャンセルするためにe.prevent そして default ( ) と打ちます。そして上書き保存をしてブラウザを更新そしてサムネールをクリックしたときに何も起こらなくなれば OK です。これはデフォルトの動作をprevent、妨げるというような命令です。そして変数を宣言しましょう。変数は材料になります。材料まずその1はimaSrc と書いて =そしてその中にセレクタを書いていきます。( this ).attrそして ( 'href' ) ; です。まず this というのはクリックされたもの、と同じ意味です。そして attributeattr は属性という意味でHTML におけるダブルクォテーションで囲まれた属性のことを指しています。今回は href 属性が指定されてるのでhref と書かれた後の後ろこの部分を取得つまりリンク先を取得することが可能です。では次の変数を宣言しましょう。imgMain として大きな画像の部分はクォテーションを忘れないようにしましてクラス main-image の中に入っている img です。 main-image という中に入っている画像ということになります。そしてもう1つ宣言をします。imgNow =$(' ')これは .gallery の中に入っているa としておきましょう。そしてセミコロンにして行末を閉じておきます。そして、このサムネールの枠線はクラスを付けることで実現していますのでそのクラスに関する命令も先に書いておきます。$(imgNow) に.removeClass としてactive のクラスが最初から付いているのでそれを外しますという remove ですね。そして(this).toggleClassそして active とします。こうすることで、現在のボーダーを remove して他の画像にボーダーを付けるといったようなことが可能になります。それでは img の切り替え部分について記述をしていきましょう。まずif を使って条件を指定して画像を切り替えたいと思います。if 文は ( ) の中に条件{ } の中に当てはまる時の内容を書いていきます。それでは、imgSrc これが = ではない時!= で = ではない時という条件でimgMain の属性がsrc、この様にsrc 属性が imgSrc と同じではないこれは何かというとクリックしたものが自分の画像である時には何もしないそして自分の画像ではない時は別の画像に差し替えるという処理をここに書きたいと思います。 $(imgMain) のfadeOut つまり当てはまらない時はフェードアウトで画像をまず消していきます。フェードアウト 0.3 秒でかけてそしてこの後ろに function というコールバック関数というものを付けることができます。ここにフェードアウトした後にフェードインをする、といったような連続した関数を設定することが可能です。そして function( ) の後ろには{ } を付けて Enter を押してここに内容を書いていきます。$(this).これが属性の attrそして ( )そしてこの attr のメソッドは属性を書き換えることも可能ですのでsrc 属性、img には画像を指定するsrc 属性がありますのでこの src 属性を imgSrc に差し替えて下さい。そして fadeIn をして下さい。そしてそのスピードは1秒でという風に命令を記述しました。それでは上書き保存をしてブラウザを更新そしてサムネールをクリックしてみると無事に画像が切り替わったかと思います。少し長い属性などを使ったりとかif 文を使って判定をしてみましたが基本的な文章を組み合わせることでこの様なイメージギャラリーも作ることが’できます。 このレッスンではイメージギャラリーの作り方を学びました。

WebデザイナーのためのJavaScript & jQuery入門

jQueryはJavaScriptをあまりよく知らない人でも効率良く記述できるように作られたライブラリです。jQueryを使用すると、インタラクティブな演出や仕掛けを効率良くウェブサイトに実装することができます。このコースではJavaScriptとjQueryの基本を学んだうえで、それぞれの実際の応用の仕方について学んでいきます。

2時間49分 (27 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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