よろしくお願いします。
jQueryを使用して、「サムネイルにマウスを乗せると別のDiv内に大きい画像とtitle属性のテキストを表示させる」というものを作ろうとしています。
別のDiv要素には上下左右中央に画像を表示させたいと思い、見よう見まねで下記のようなコードを作成したのですが、表示される画像がサムネイル時の大きさに縮小されてしまい、元の大きさの画像として表示されません。(サムネイルには元画像をcssで縮小して表示しています)
やりたいことは以下の2つです。
・Div要素には元画像の大きさで表示させたい。
・できれば、フェードイン・アウトで画像を切り替えたい。
色々調べてみたのですが行き詰ってしまい、こちらに質問させて頂きました。
お分かりになる方がいらっしゃいましたら、お知恵をお貸し頂けませんでしょうか。
////スクリプト////
$(function(){
$('#contents li a').click(function(){
return false;
});
$('#contents li a').mouseover(function(){
var $title = $(this).children('img').attr('title');
var w = $(this).children('img').width();
var h = $(this).children('img').height();
$('#photo img').attr('src',$(this).attr("href"));
$('#photo span').text($title);
var mtop = (h/2)*(-1);
var mleft = (w/2)*(-1);
$('#photo img').css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ "px"});
});
});
////HTML////
<div id="contents">
<ul>
<li><a href="1.jpg"><img src="1.jpg" title="あああああああああああああああ" /></a></li>
<li><a href="2.jpg"><img src="2.jpg" title="いいいいいいいいいいいいいいい" /></a></li>
<li><a href="3.jpg"><img src="3.jpg" title="ううううううううううううううう" /></a></li>
</ul>
</div>
<div id="photo">
<img src="1.jpg" />
<span>テキストテキスト</span>
</div>
No.2
- 回答日時:
#1です。
>最初に表示していた画像の縦横の比率のまま、全ての画像が
>表示される症状に悩んでおります。
サムネイルのサイズを取得しても、サムネイルのサイズが返されます。(当然ですが)
どのようなHTML構成なのか不明ですが、適当に設定して(前回と異なります)書いてみるなら、
こんな感じでしょうか?(外側のdivを画像がはみ出すことは無いと仮定しています)
(全角空白は半角に)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
#contents img { width:50px; height:50px; }
#photo { width:600px; height:600px; text-align:center; background-color:#ccc; }
//-->
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>
<script type="text/javascript">
<!--
$(function(){
$("#contents img").mouseover(function(){
var img = $(this);
var photo = $("#photo img:first-child");
photo.fadeOut(500, function(){
photo.attr("src", img.attr("src")).fadeIn(1000).parent().next("span").html(img.attr("title"));
});
photo.css("marginTop", (photo.parent().height() - photo.height())/2|0);
});
});
//-->
</script>
</head>
<body>
<ul id="contents">
<li><img src="A.jpg" title="ああああああ" alt=""></li>
<li><img src="B.jpg" title="いいいいいい" alt=""></li>
<li><img src="C.jpg" title="うううううう" alt=""></li>
</ul>
<div>
<div id="photo">
<img src="A.jpg" alt="big_image">
</div>
<span>テキストテキスト</span>
</div>
</body>
</html>
ご回答ありがとうございます。お教え頂いたコードで上下左右中央に比率を保ちながら表示することが出来ました!
お手数をお掛けしてすみませんでした。
本当にありがとうございました!
No.1ベストアンサー
- 回答日時:
条件がいまいちよくわかりませんが、単純にこんなのでは?
(全角空白は半角に)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
<!--
#contents img { width:50px; height:50px; cursor:pointer; }
//-->
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>
<script type="text/javascript">
<!--
$(function(){
$("#contents img").mouseover(function(){
var img = $(this);
$("#photo img:first-child").fadeOut(500, function(){
$(this).attr("src", img.attr("src")).fadeIn(1000).next("span").html(img.attr("title"));
});
});
});
//-->
</script>
</head>
<body>
<ul id="contents">
<li><img src="A.jpg" title="ああああああ" alt=""></li>
<li><img src="B.jpg" title="いいいいいい" alt=""></li>
<li><img src="C.jpg" title="うううううう" alt=""></li>
</ul>
<div id="photo">
<img src="A.jpg" alt="big_image">
<span>テキストテキスト</span>
</div>
</body>
</html>
「cursor:pointer」はフェイクっぽいのでやめた方が良さそう。
この回答への補足
早々にご回答頂きありがとうございます!
お教え頂いたコードでフェードイン・アウトでの画像切替が出来ました!
ただ、画像の上下左右の中央表示についてなのですが、お教え頂いたコードに上下左右中央に表示させるためのスクリプトを追記したところ中央に表示させることはできたのですが、最初に表示していた画像の縦横の比率のまま、全ての画像が表示される症状に悩んでおります。
Div要素「#photo」は正方形のボックス状にしており、縦長・横長の画像問わずDivの中央に画像を表示したいと考えているのですが、マウスを乗せるたびにその画像のサイズを取得して中央に表示することはできるのでしょうか?
重ね重ね恐れ入りますが、差支えなければご教授頂ければ幸いです。
$(function(){
$("#contents img").mouseover(function(){
var img = $(this);
$("#photo img:first-child").fadeOut(500, function(){
$(this).attr("src", img.attr("src")).fadeIn(1000).next("span").html(img.attr("title"));
////追記した部分////
var w = $('#photo img').width();
var h = $('#photo img').height();
var mtop = (h/2)*(-1);
var mleft = (w/2)*(-1);
$('#photo img').css({"width": + w + "px" ,"height": + h + "px" , "top": "50%" , "left": "50%" , "margin-top": + mtop + "px" , "margin-left": + mleft+ "px"});
////追記ここまで////
});
});
});
ご回答ありがとうございます。お教え頂いたコードで上下左右中央に比率を保ちながら表示することが出来ました!
お手数をお掛けしてすみませんでした。
本当にありがとうございました!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- Perl RSSにdiv,ul classを付けたいのですがどのようにつけるのかわからないです 2 2022/03/28 01:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライドショー「Skitter」をカ...
-
jQueryでタブ、スライダーを使...
-
アコーディオンメニューが開い...
-
htmlの記述で link rel=styles...
-
複数bxsliderをタブで切り替え...
-
こんにちは、javascriptにてボ...
-
onmouseoverの表示切り替えが上...
-
画像をフォルダに入れれば表示...
-
クリックした<a>タグのみにClas...
-
画像の重なりの順序を代える方...
-
取得した要素がインライン要素...
-
フッターの上へのマージンがあ...
-
値の入った<li>要素の数をカウ...
-
【OpenCV】二値画像後、白の部...
-
jQueryで画像を重ねる
-
jspでcssが読み込めない
-
OpenCV での画素値の比較について
-
ラズパイでno module named zbar
-
removeEventListenerについて
-
prettyphotoの画像表示について
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
アコーディオンメニューが開い...
-
横並びの画像を3枚時間差でフェ...
-
html5に変えるとスライドショー...
-
キャラクターがぴょこんと飛び...
-
jsでグリッドデザインのサムネ...
-
Javaスクリプトで画像を縦にス...
-
複数の要素へ appendchild でき...
-
CSSでマウスオーバーした画像を...
-
【iOS及びAndroid】リンク画像...
-
スライドショー「Skitter」をカ...
-
Dreamweaver上とデバイスプレビ...
-
同一ページ内の複数のタグに同...
-
スライド機能について
-
チェックボックスと画像切替の連動
-
jqueryのプラグインslickの画像...
-
Javascriptを使用したスライド...
-
bxSliderのランダム表示について
-
Firefoxとクロームでフェードイ...
おすすめ情報