blog

BLOGブログ

ARCHIVES

vax

簡単 モーダルウインドウ を使ってそれっぽく写真を拡大させてやろうず

eycatch全国1000万5人のみなさま。

 

お待たせいたしております。
Vaxだょ。

 

 

 

季節は10月だというのになかなか秋が深まっていかない謎。

 

 

毎日おでんと鍋の素敵ローテーションに移行させてくれない。。。
この時期のデートと言えばおでんと鍋しかないはずなのに!
これが噂の異常気象なのか。
よし、
せっかくなので今日は異常気象というものについて調べるふりをします(^ω^)

 
それではタイトルの件。
モーダルウインドウを作ってみたいと思います。

 
モーダルウインドウとは

エフのメンバーページなんかでもやってるアレです。

 

img1001_1

 


 

 

img1001_2

 

では

 

 

js


 

 

jQuery(function($){

//リスト選択時に発動
$('.img-list li').click(function(){


var img_src = $(this).find('img').attr('src');


//overlay 中央寄せ


var s_position = $(window).scrollTop();
var h_html = $('body').outerHeight();
var h_window = $(window).height();
var w_width = $(window).width();
var w_overlay_box = $('#overlay_box').width();


//window高さ調整
if ( s_position == 0 ) {
s_position= '30%';
} else {
s_position= s_position + 'px';
}


if ( h_window > h_html ) {
var height = h_window;
} else {
var height = h_html;
}


$('#overlay').css({'width': w_width + 'px','height': height + 'px'},1000).fadeIn();
$('#overlay_box').css({'top': s_position,'left': ((w_width - w_overlay_box)/2)+ 'px'}).fadeIn();
$('#overlay img').attr({'src': img_src});
});


//外枠判定
var flag = false;
$('#overlay_box').hover(function(){
flag = true;
},function(){
flag = false;
});


//外枠クリック時
$('#overlay').click(function(){
if( flag == false ){
$('#overlay').fadeOut();
}
});


});

 

 

html


 

 

<ul class="img-list">
<li><img src="images/sam01.jpg" alt="" /></li>
<li><img src="images/sam02.jpg" alt="" /></li>
<li><img src="images/sam03.jpg" alt="" /></li>
</ul>
<div id="overlay">
<div>
<p id="lightbox_close"><span>×</span></p>
<img src="" width="500"  />
</div>
</div>

 

 

css


 

 

body,html{ margin:0; padding: 0;}

ul { width: 300px; margin:100px auto; padding:0;; }
li { list-style:none; margin-bottom: 10px;}

#overlay {
display:none;
background: rgba(0,0,0,0.8);
position:absolute;
top:0;
z-index:9999;
}
#overlay_box {
position:absolute;
width: 500px;
}

 

 

demo

 

まとめ


 

 

これにページャーなんかも付けてあげるとより親切ですね。

そのちょっとした気遣いが気になるあの子にも伝わればきっといいことがあることでしょう。
きっとそうだよ!!

。。。

今日は かにを食べる予感がします。(^^)

 

 

 

 

この人が書いた記事

VAXの記事をもっと見る

関連する記事