上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ちょっとずつ小出しにしていた簡易フォトギャラリーもさすがにマンネリ化してきたので今回で最終回



JavaScript

$(function(){
	var imgURL = "http://blog-imgs-32.fc2.com/s/o/m/soma1080/";
	var mainImgs = ["twitter.png","google.png","flickr.png","facebook.png"];
	
	for( i=0; i<=mainImgs.length-1; i++){
		image = new Image();
		image.src = imgURL + mainImgs[i];
	}
	
	$('#item_list li img').click(function(){
		if( $('#main_view img').attr('src').indexOf($(this).attr('id')) == -1 ){
			thisImg = imgURL + $(this).attr('id') + '.png';
			$('#main_view img').before("<img src='" + thisImg + "' alt='' />");
			$('#main_view img').eq(1).fadeOut("fast",function(){
				$(this).remove();
			});
		}
	});
})

HTML

<div id="main_view">
<img src="http://blog-imgs-32.fc2.com/s/o/m/soma1080/twitter.png" width="200" height="200" />
</div>
<ul id="item_list">
	<li><img id="twitter" src="http://blog-imgs-32.fc2.com/s/o/m/soma1080/twitter-thumb.png" width="48" height="48" /></li>
	<li><img id="google" src="http://blog-imgs-32.fc2.com/s/o/m/soma1080/google-thumb.png" width="48" height="48" /></li>
	<li><img id="flickr" src="http://blog-imgs-32.fc2.com/s/o/m/soma1080/flickr-thumb.png" width="48" height="48" /></li>
	<li><img id="facebook" src="http://blog-imgs-32.fc2.com/s/o/m/soma1080/facebook-thumb.png" width="48" height="48" /></li>
</ul>

CSS

#main_view{
	height: 200px;
	width: 230px;
	margin-bottom: 10px;
	position: absolute;
	top: 10px;
	left: 10px;
	border: 1px solid #999;
	padding-left: 30px;
}
#main_view img{
	position: absolute;
}
#item_list{
	position: relative;
	top: 222px;
}
#item_list li{
	float: left;
	list-style: none;
	border: 1px solid #999;
	margin: 0 10px 0;
}

今までずっとPureJSで書いてきたんですがステップアップとしてちょっとした演出を付けたかったのでjQueryで書き直しました。
参考記事:jQueryで作る画像ギャラリーのチュートリアル

今回のポイントはなんと言っても画像が切り替わる際の演出です。今までのPureJS版ではクリックする度にパッと変わっていた画像がjQueryのfadeOut()を使うことによってふわっとオーバーラップして切り替わっています。詳細な動作については参考記事を御覧下さい。

Comment
Trackback













管理者にだけ表示を許可する

Comment form

openclose

カテゴリ一覧

そま宗助

  • Author:そま宗助
  • タイ生まれのちょっと変な?日本人。
    農学博士の父とブラジル日系1世の母の間に生まれたため、普通の日本人とはちょっと違う視点で世界を見つめる男。

    最近、勉強会やカンファレンスにちょいちょい顔出ししてます。

    読書週間継続中?

    ストレングスファインダー
    1.収集心
    2.学習欲
    3.共感性
    4.指令性
    5.運命思考
プロフィール

※注意書き※
当ブログに掲載されているJavaScriptの動作確認はFirefoxでのみ行っております。他ブラウザでの動作に関しては保障できませんのでご注意ください。






1キロバイトの素材屋さん
フリーエリア
FC2カウンター

名前:
メール:
件名:
本文:

メールフォーム

Page Top

Powered by FC2 Blog |

FC2Ad

| Template Design by スタンダード・デザインラボ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。