どもです。
小さい画像をクリックしたら大きい画像が表示される、というのは、よく欲しくなるプログラムです。
が、ライトボックスにはしたくない場合がままあります。
特にスマホサイト。
スマホサイトでライトボックスされると割と鬱陶しい。
ので、Googleの画像検索の如く、クリックしたら下に大きな画像が出てくる感じにしようと思います。
$(function(){
$(".photo a").click(function(){
var base = $(this);
var href = base.attr('href'); //クリックされたaのhrefを取得
var element = '<div class="imageZone"><img src="'+href+'"></div>'; //挿入されるタグを登録（画像のsrcをhrefにする）
if($('.imageZone').length){ //既に.imageZoneが存在するとき（aをクリックするのが2度め以降のとき）
var src = $('.imageZone img').attr('src'); //.imageZoneの画像のsrcを取得
if($('.imageZone img').attr('src') != href){ //.imageZoneの画像とhrefが同じでないなら
$('.imageZone').slideUp('fast',function(){ //既存の.imageZoneを閉じる
$(".imageZone").remove(); //閉じた.imageZoneを削除
base.parents(".one").append(element); //先に作った挿入タグを.oneの最後に挿入
$('.imageZone').slideDown('fast'); //挿入したタグをスライド表示
});
}else{ //.imageZoneの画像とhrefが同じなら
$('.imageZone').slideUp('fast',function(){ //既存の.imageZoneを閉じる
$(".imageZone").remove(); //閉じた.imageZoneを削除（新しい.imageZoneを表示せず、閉じて終了）
});
}
} else { //ソース上に.imageZoneが存在しない時
base.parents(".one").append(element); //先に作った挿入タグを.oneの最後に挿入
$('.imageZone').slideDown('fast'); //挿入したタグをスライド表示
}
return false;
})
});
これに対応したHTMLはこんな感じです。
<div class="photo">
<div class="one">
<a href="/image/actual/image01.png"><img src="/image/thumbnail/image01.png"></a>
<a href="/image/actual/image02.png"><img src="/image/thumbnail/image02.png"></a>
<a href="/image/actual/image03.png"><img src="/image/thumbnail/image03.png"></a>
</div>
<div class="one">
<a href="/image/actual/image04.png"><img src="/image/thumbnail/image04.png"></a>
<a href="/image/actual/image05.png"><img src="/image/thumbnail/image05.png"></a>
<a href="/image/actual/image06.png"><img src="/image/thumbnail/image06.png"></a>
</div>
</div>
CSSは最低限この辺が必要かな？
.imageZone{
display:none;
height:500px;
width:100%;
padding:20px;
line-height:450px;
background:#000;
text-align:center;
clear:both;
}
.imageZone img{
vertical-align:middle;
max-width:100%;
max-height:100%;
width:auto;
height:auto;
}
jsの解説はソース上に書いた通りです。
大きな画像は.oneの最下部に表示されるため、.oneを小分けにしておくのがおすすめ。
Googleのようにレイアウトを崩さず画像のすぐ下に出てきてくれます。
.imageZoneのCSSですが、必須なのは初期のdispayをnoneにしておくこと。
これをしないと表示されるときにスライドで出てきてくれません。
あと、heightを設定しないと、slideDownのときの動作がガタつきます。
Googleのように、画像以外のメタ情報も表示したい！という場合は、
imgのalt辺りに情報を記載してクリック時に取得、elementの中に出力してしまうと良いでしょう。
このCSSは画像のみの場合のものなので、displayとheightのことだけ忘れずに残りは全部変えてしまいます。