lightbox風のモーダルウィンドウについての質問です。
質問させて頂きます。
●状況
小さくサムネイルの画像をクリックすると本来の大きさの画像がポップアップ表示させるものを作りたいです。
まんまlightboxだけど、クライアントさんが変なエフェクト(ウィーンとか)はいらないとおっしゃってきます。
なので簡単なモーダルウィンドウ風のものを構築したいと思っています。
そこでどうしても解決できない問題がおきてしまったのでお聞きしたいです。
■HTML↓-----------------------------------
<a href="photo1.jpg" class="modal"><img src="photo1_thum.jpg" alt="画像" width="100" height="100" /></a>
■SCRIPT↓-----------------------------------
$(function(){
$("body").append("<div id='glayLayer'></div><div id='overLayer'></div><p id='notes'>あああ</p>");
$("#glayLayer").click(function(){
$(this).hide();
$("#overLayer").hide();
$("#notes").hide();
});
$("a.modal").click(function(){
$("#glayLayer").show();
$("#overLayer").show().html("<img src='"+$(this).attr("href")+"' />");
$("#notes").show();
return false;
});
if($.browser.msie && $.browser.version<7){
$(window).scroll(function(){
$("#glayLayer").get(0).style.setExpression("top","$(document).scrollTop()+'px'");
$("#overLayer").get(0).style.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'");
$("#notes").get(0).style.setExpression("top","($(document).scrollTop()+$(window).height()/2)+'px'");
});
}
});
■CSS↓-----------------------------------
div#glayLayer{
display:none;
position:fixed;
left:0;
top:0;
height:100%;
width:100%;
background: #000;
filter:alpha(opacity=60);
opacity: 0.60;
}
#overLayer{
display:none;
position: fixed;
top:50%;
left:50%;
margin-top:-***px; /*本来の画像の高さの半分*/ ←ココ
margin-left:-***px; /*本来の画像の横のサイズの半分*/ ←ココ
}
p {
display:none;
position: fixed;
top:50%;
left:50%;
margin-top:***px; /*本来の画像の高さの半分*/ ←ココ
margin-left:-***px; /*本来の画像の横のサイズの半分*/ ←ココ
}
* html div#glayLayer{ position:absolute; } /*FOR IE6*/
* html #overLayer{ position: absolute; } /*FOR IE6*/
* html #notes{ position: absolute; } /*FOR IE6*/
●質問
動き自体は完成しているのですが、本来の各画像のサイズがまちまちです。
そのため、CSSでブラウザの真ん中に表示させるために本来の画像の縦と横のサイズを取得したいと思うのですが
取得する方法はあるのでしょうか?
ひとつ解決策がのっているサイトを見つけたのですがコードがかなり長く理解不能でした。。
もし何か簡単な解決策を知っている方がいましたら教えて頂きたいです。
よろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- JavaScript アップロードファイルの種類によって処理を分岐させたいのですが書き方が分からずアドバイスお願いします 4 2023/06/17 19:12
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
jQueryで同じクラス名のものを...
-
複数bxsliderをタブで切り替え...
-
画像のフェードイン・フェード...
-
lightbox風のモーダルウィンド...
-
デフォルト非表示にしたい。【t...
-
画像の表示位置
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き
-
c++std::string型をTCHARに変換...
-
MFCで画像を表示させているので...
-
createElementで作成した要素を...
-
フッター上部に謎の隙間
-
jspでcssが読み込めない
-
どの<li><a> が押されたか判別...
-
スクロール可能なチェックボックス
-
1枚の画像をクリックすると複数...
-
読み込んだQRコードをフォーム...
-
jQueryで特定id以外の下にある...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
Javascript初心者|jQueryの.va...
-
画像マウスオーバーで、checkb...
-
アップロードファイルの種類に...
-
複数bxsliderをタブで切り替え...
-
JavaScriptでの画像切り替えを...
-
サムネイルにカーソルを合わせ...
-
時間差で画像を動作させたいjav...
-
マウスオーバーにて画像に虫眼...
-
「画像クリックで音声再生」を ...
-
JavaScriptでクレイアニメ。ち...
-
クリックでクリッカブルマップ...
-
JQueryでオープニングアニメー...
-
交互に入れ替わる画像を複数配置
-
JavaScript/CANVASでの画像読込...
-
VBAでIEを動かす場合、下記の①...
おすすめ情報