LINK-GOTO-BACK(元のページに戻る)


jQueryのattr()で属性を変更して画像表示 デモ


jQueryのattr()で属性を変更して画像表示の記事を追加して、そのデモを掲載します。
2015/05/16 新規


DEMO jQueryのattr()で属性を変更して画像表示の追加デモ


画像表示サンプル (show-image.js)

画像サムネールはJSで動的に作り、append しています。<img />ですのでそのままで、画像を表示します。

画像を縮小してサムネール表示。「クリック」で該当画像表示。(フエードアニメ中はクリックが機能しません)

 

 

● デモページは [ jqury-1.9 ] で動作しています。

 

 

LightBoxの表示

LightBoxのテスト表示です。詳細などは有りませんテストのみです。

● 下の画像またはリンクをクリックすると、「OverlayつきのLightBox」形式で表示します。


 

 

[ 画像を表示 1 ]

a要素に popslightbox クラスを指定しています。

 

 

show-image.js HTML JS CSS


参考HTML



<div id="box-bases-wrap">
<div id="box-base2">
	<div id="btm-image-box2"><img /></div>
	<div id="top-image-box2"><img /></div>
</div>
<div id="btn-box2"></div>
</div>

JS

show-image.js


//show-image.js
//Loader使用しない
(function($){

	$(function(){

		var fade_time=800;//400-1000
		//ボタン使用
		var btnUse=true;
		//delay調整
		var delay_time=2000;
		//画像の大きさ
		var img_W=640;
		var img_H=300;
		//------------------------------

		//未使用もあり

		var image_src;
		var loadimg_W=[];
		var loadimg_H=[];
		var assets=[];
		var assets_url=[];
		var imageload_count=0;
		var loadImage_len=0;
		var image_no=0;
		var image_max=0;
		var globalflag=false;
		var clickbtn=[];

		var imagelist=[
			"/main/images/toyota_car10.jpg",
			"/main/images/toyota_car11.jpg",
			"/main/images/toyota_car12.jpg",
			"/main/images/toyota_car13.jpg",
			"/main/images/toyota_car16.jpg"
		];

		image_max=loadImage_len=imagelist.length;
		assets_url=imagelist;

		//オブジェクト保存一旦非表示
		var btmBox=$('#btm-image-box2').css({'display':'none'});
		var topBox=$('#top-image-box2').css({'display':'none'});
		var btnBox=$('#btn-box2').css({'display':'none'});

		//delay調整
		setTimeout(function() {

			//パーツ類のセット
			parts_set();

		},delay_time);

		//------------------------------

		//画像表示
		function draw_image(){

			globalflag=false;

			//ボタンactive
			btnBox.find('span').each(function(i){
				$(this).removeClass('active');
				if(i == image_no) {$(this).addClass('active');}
			});

			image_src=assets_url[image_no];

			//画像を表示
			topBox.css({'opacity':0}).children("img").attr({'src':image_src});
			topBox.css({'display':'block'});
			//アニメ実行
			topBox.animate({'opacity':1},fade_time,function(){

				//アニメ完了
				finshtween();
			});

		}

		//アニメ全て完了
		function finshtween () {

			//Tween全てが完了してから下画像表示
			btmBox.children("img").attr({'src':image_src});
			btmBox.css({'display':'block'});
			topBox.css({'display':'none'});

			//フラグを戻す
			globalflag=true;

		}

		//パーツ類のセット
		function parts_set() {

			var html="";
			for (var i=0; i < image_max; i++) {
				var btn='<span><img /></span>';
				clickbtn[i]=btn;
				html=html+btn;
			}
			html='<p>'+ html +'</p>';
			//append
			btnBox.append(html);
			//action
			btnBox.find('span').each(function(i){
				$(this).children("img").attr({'src':imagelist[i],'width':'64px','height':'30px'});
				$(this).click(function(){clickhandle(i)});
			});
			btnBox.css({'display':'block'});

			//Hoverサムネールaction
			//action
			btnBox.find('span').each(function(i){
				var no=i;
				$(this).hover(
					function(){
						//
					},
					function(){
						//
					}
				);
			});

			//画像表示に進む
			draw_image();

		}

		//click-action
		function clickhandle(no) {

			//アニメ中は機能しない
			if(!globalflag) {return false};
			var id=no;
			//同じ画像は機能しない
			if(id == image_no) {return false};

			image_no=id;
			draw_image();

		}

	});

})(jQuery)

参考CSS

画像パスは当方の場合の記載です。


/* SlideShow3 */
#box-bases-wrap{
width:auto;
height:350px;
}
#box-base2{
position:relative;
display:block;
width:640px;
height:300px;
margin:0;
padding:0;
background:#000000 url("/main/images/welcome_back.jpg") no-repeat;
}
#btm-image-box2{
position:absolute;top:0;left:0;
display:block;
width:640px;
height:300px;
margin:0;
padding:0;
}
#top-image-box2{
position:absolute;top:0;left:0;
display:block;
width:640px;
height:300px;
margin:0;
padding:0;
}

#mess-box2{
position:absolute;top:5px;left:0;
display:block;
width:620px;
height:16px;
margin:0 10px;
padding:0;
font-size:12px;
line-height:1;
color:#CCCCCC;
}
#btn-box2{
position:relative;
display:block;
width:640px;
height:40px;
margin:5px 0 0 0;
padding:0;
}
#btn-box2 p{
position:relative;
width:auto;
margin:0 auto;
text-align:center;
}
#btn-box2 p span{
display:inline-block;
width:auto;
margin-left:5px;
padding:2px;
text-align:center;
color:#FFFFFF;
/*border:1px #EEEEEE solid;*/
background-color:#555555;
cursor:pointer;
}
#btn-box2 p span.active{
background-color:#8B0000;
}


 

 

 

 

 

[ サンプル使用画像の表示 ]

 

 

詳細説明などは、記事ページを参照ください。

 

以上。

 

LINK-GOTO-BACK(元のページに戻る)