てことで（←なにが？）、今日から２月ですね！１ヶ月たつの早っ！！！
いま、悩み中なんです・・・人生における一大決心をしようか、どうか・・・。いちおう、今年のリミットまであと2ヶ月あるので、少し悩んで結論をだします。
ども、いろいろと模索中のスタッフのコダマです。
前回、「ショッピングサイトなどで使える、JavaScriptのイメージギャラリー」の記事でご紹介しましたスクリプトを改造してみました。
「Webクリエイター養成科」の受講生にも「実習の時間が余ったら、やってね！」って言ってた実習課題ですが、誰一人としてやってなかった・・・授業中に時間がなかったら家でやってきて、「先生！見て！やってきたよ！！」くらいのアピールと根性を見せてほしいものですね。
で、一応、解答のような感じですが、jQueryを使って、ギャラリーのサムネイル画像をクリックしたときにメインの画像がフェードイン・フェードアウトで入れ替わるような感じのスクリプトを作成しました。
フェードアウトしている間に次の画像がフェードインしてくるような、クロスフェード効果にするにはソースが複雑になりそうだったので、やめました。今回は、前の画像が完全にフェードアウトしたら、次の画像がフェードインしてくるというものです。
では、サンプルを見てみましょう。
（※サンプルを見るには【記事の続きを読む】をクリック）
では、ソースを解説します。
■HTML（head） - JavaScript
</script>
<script type="text/javascript"><!--
$(function() {
$(".thumb img").click(function(){
var thumbSrc = $(this).attr("src");
$(".main_photo").fadeOut(1300, function(){
$(".main_photo").attr("src", thumbSrc);
});
$(".main_photo").fadeIn(1300);
});
});
//-->
</script>
HTMLのheadタグ内にjQueryライブラリを呼び出す記述をします。で、その下（または、外部JSファイル）に、上記のJavaScriptを記述します。簡単に説明すると、まず、サムネイルをクリックした時、変数thumbSrcにクリックしたサムネイル画像の「src」属性を代入します。そして、表示画像を1300ミリ秒でフェードアウトしているときに、メインの画像の「src」属性の値をクリックしたサムネイル画像の「src」属性の値と入れ替えてしまいます。入れ替えたら、その画像をフェードインで1300ミリ秒で表示します。
■HTML（body）
<p class="thumb">
<a href="javascript:void(0);"><img src="images/photo1.jpg" width="76" /></a>
<a href="javascript:void(0);"><img src="images/photo2.jpg" width="76" /></a>
<a href="javascript:void(0);"><img src="images/photo3.jpg" width="76" /></a>
<a href="javascript:void(0);"><img src="images/photo4.jpg" width="76" /></a>
<a href="javascript:void(0);"><img src="images/photo5.jpg" width="76" /></a>
</p>
HTMLのbody内は、少し改良を加えました。まず、clickイベントがJavaScript内にあるので、サムネイル画像のonclickイベントがなくなりました。それに加え、リンクだと分るようにマウスポインタを手の画像にするために今回はCSSを使わず、aタグで「href」属性にどこにもリンクさせないよっていうJavaScript「javascript:void(0);」を記述しました。
■CSS
border:none;
}
CSSでは、サムネイル画像にリンクが設定されているので、デフォルトの設定だと青い枠線が出てしまうので、それを消すための「border:none;」を記述しました。
以外に短いソースで済んだので、無料ブログや無料ショッピングカートなど、外部ファイルを呼び出しづらいWebサービスに使用するのに最適だと思います。自分でもショッピングカートで使ってみる予定です♪
スタイルを変更したいときは、ご自身でCSSなどを追加してください。
サンプルを用意しましたので、コチラからダウンロードしてください。
コメント (0)