![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
No.3ベストアンサー
- 回答日時:
#1、#2です。
>下記のソースで試しているのですが動作しなくなってしまいました^^;
単純に「{」を忘れているだけの、タイポではないでしょうか?
(最初のhover( )の中の、2番目のfunction{ }の部分)
>・マウスオーバーまたは選択している状態で半透明
(↑)の修正で、マウスオーバー/アウトについては動作すると思います。
選択状態の設定は、CSSに追加すればよろしいかと。
(スクリプトでやってもいいですけれど…)
>切り替わる際にフェードイン
画像が表示されている状態ですので、表示されているものにfadeIn( )メソッドを使っても、見た目に変化が無いだけだと想像します。
一旦、消してから表示するとかすればそれっぽく見えるようになると想像します。
hide().fadeIn("slow"); とか
でも、この順だと「画像入替え」→「非表示」→「フェードイン」の順になってしまうので、考え方として「非表示」→「画像入替え」→「フェードイン」とするほうがまっとうかも知れません。
上記の場合は実際の表示に差はないと思いますが、例えば、「フェードアウト」→「画像入替え」→「フェードイン」のような処理の場合だと、順序の違いで結果にも差がでますよね?
No.2
- 回答日時:
#1です。
拡大表示されている画像の元画像の要素は変数 t に、コメントの要素は変数 div に取得しています。
>サムネイルのマウスカーソルは通常で、選んでいる事が判別できるように
>borderを赤にし、選ばれていないものはマウスカーソルをポインターにし
>borderをグレーにしたいと思っております。
こんなかんじでしょうか?
* 選択されている画像用のclassとしてselectedを追加
* 初期状態に、スクリプトでリストの最初のimg要素を表示するように修正
/* CSS追加 */
#thumbnail img { border:1px solid #888; cursor:pointer; }
#thumbnail img.selected { border-color:#f00; cursor:default; }
/* スクリプト */
window.onload = function(){
set(document.getElementById("thumbnail").getElementsByTagName("img")[0]);
}
function change(evt){
var t = evt.target || evt.srcElement;
if(t.nodeName == "IMG") set(t);
}
function set(t){
var img, i, div = t.nextSibling;
while(div && !/\bcomment\b/.test(div.className)) div = div.nextSibling;
img = document.getElementById("thumbnail").getElementsByTagName("img");
for(i=0; i<img.length; i++)
img[i].className = img[i].className.replace(/ selected$/, "");
document.getElementById("enlarge_image").src = t.src;
t.className += " selected";
document.getElementById("comment").innerHTML = div?div.innerHTML:"";
}
前回失念していましたが、jqueryでとのご質問でしたので…
<ul id="thumbnail">のonclickをはずして、こんなかんじでしょうか
$(function(){
$("#thumbnail li img").click(function(){
$("#thumbnail li img").removeClass("selected");
var t = $(this).addClass("selected");
$("#enlarge_image").attr("src",t.attr("src"));
var com = t.nextAll(".comment");
if(com.length)
$("#comment").html(com.html());
else
$("#comment").html("");
});
$("#thumbnail li img:first").click();
});
この回答への補足
お返事ありがとうございます。
おかげ様で動作するようになりました!
動作の希望があり重ね重ね申し訳ないのですが下記のソースで試して
いるのですが動作しなくなってしまいました^^;
$(function(){
$("#thumbnail li img").hover(function(){
$(this).fadeTo(200, 0.5);
},function()
$(this).fadeTo(200, 1);
});
$("#thumbnail li img").click(function(){
$("#thumbnail li img").removeClass("selected");
var t = $(this).addClass("selected");
$("#enlarge_image").attr("src",t.attr("src"));
$("#enlarge_image").fadeIn(200);
var com = t.nextAll(".comment");
if(com.length)
$("#comment").html(com.html());
else
$("#comment").html("");
});
$("#thumbnail li img:first").click();
});
希望としては・・・
■サムネイル画像
・マウスオーバーまたは選択している状態で半透明
・マウスアウトまたは未選択の状態で通常表示
■拡大画像
切り替わる際にフェードイン
という事をしたいのですがjqueryのマニュアルをみてもどこが
誤っているのかわかりません・・・
No.1
- 回答日時:
ごく簡単な仕組みのサンプル。
拡大部分はid指定で取得しているので、表示位置レイアウトは自由に変更可能です。
サムネイルは<ul id=thumbnail>の中であれば数は自由。
<img>と対にあるclass="comment"の内容がコメントとして反映されます。
全体のレイアウトや表示時の効果などいろいろは、適当に修正してください。
(* あっとごめんなさい、jqueryを使ってなかった)
(全角空白は半角に)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>sample</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
#enlarge div { float:left; }
#enlarge img { width:400px; height:240px; }
#thumbnail { list-style-type:none; margin:0; padding:0; clear:left; }
#thumbnail li { float:left; }
#thumbnail img { width:100px; height:60px; }
#thumbnail .comment { display:none; }
</style>
<script type="text/javascript">
<!--
function change(evt){
var div, t = evt.target || evt.srcElement;
if(t.nodeName != "IMG") return;
div = t.nextSibling;
while(div && div.className != "comment") div = div.nextSibling;
document.getElementById("enlarge_image").src = t.src;
if(div)
document.getElementById("comment").innerHTML = div.innerHTML;
}
//-->
</script>
</head>
<body>
<div id="enlarge">
<div><img id="enlarge_image" src="A.jpg" alt=""></div>
<div id="comment">comment_A</div>
</div>
<ul id="thumbnail" onclick="change(event)">
<li>
<img src="A.jpg" alt="">
<div class="comment">comment_A</div>
</li>
<li>
<img src="B.jpg" alt="">
<div class="comment">comment_B</div>
</li>
<li>
<img src="C.jpg" alt="">
<div class="comment">comment_C</div>
</li>
<li>
<img src="D.jpg" alt="">
<div class="comment">comment_D</div>
</li>
</ul>
</body>
</html>
お返事ありがとうございます。
やりたい事はなんとか実現する事ができました。
質問なのですが現在拡大表示されている画像を判別しclass名を付加する事は
できますでしょうか?
カーソルをpointerで指定すればcssのみで解決できるのですが希望としては
Aの画像が拡大表示されていれば(初期状態も含み)、サムネイルのマウスカーソルは
通常で、選んでいる事が判別できるようにborderを赤にし、選ばれていないものは
マウスカーソルをポインターにしborderをグレーにしたいと思っております。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- X(旧Twitter) ツィッターの画像表示について 1 2023/08/17 09:28
- その他(プログラミング・Web制作) ホームページビルダー16で画像を保存したら画像がトップページ上に沢山出てきてしまいます 1 2022/12/06 14:50
- Excel(エクセル) エクセルを活用して受注表を作成中ですが関数が分からなく困ってました。 1 2022/07/22 09:14
- PDF 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 1 2022/03/31 19:09
- その他(IT・Webサービス) 画像調整してスクショし保存した画像をPC画面と同画質で印刷する方法 3 2022/03/31 19:11
- Excel(エクセル) Excelで質問です。 詳細(写真) ①黄色の部分を全てプルダウンを設定する。 ②リストはG列 ③リ 1 2023/06/16 21:54
- PDF 画像調整してスクショし保存した画像を印刷する方法 1 2022/03/31 18:42
- Excel(エクセル) Excelのマクロについてご教授ください 2 2023/02/25 09:43
- Excel(エクセル) エクセルにサムネイル画像組み込み 2 2022/09/02 17:13
- Windows 10 フォルダ内の全ての画像を矢印キーでスライドできるようにしたい 1 2022/10/21 12:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
画像マウスオーバーで、checkb...
-
複数bxsliderをタブで切り替え...
-
デフォルト非表示にしたい。【t...
-
bxsliderで最初に縦に複数表示...
-
Javascript初心者|jQueryの.va...
-
画像切り替え
-
jqueryで
-
サイトにコンテンツを並べる際...
-
MAX関数を使ってからLEFT JOIN...
-
jqueryのsortableで一部ソート...
-
javascriptテキストBOX色を元に...
-
フォームに入力された値により...
-
JSPでの画像ファイル表示
-
「jQuery」アコーディオンメニ...
-
日替わりで画像を変更したい
-
【java】背景画像を一定時間で...
-
Javascriptで画像を水面のよう...
-
Gifアニメ、最後のコマに行った...
-
キャッシュされた画像を使わず...
-
error LNK2019 未解決のシンボ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
Javascript初心者|jQueryの.va...
-
画像マウスオーバーで、checkb...
-
アップロードファイルの種類に...
-
複数bxsliderをタブで切り替え...
-
JavaScriptでの画像切り替えを...
-
サムネイルにカーソルを合わせ...
-
時間差で画像を動作させたいjav...
-
マウスオーバーにて画像に虫眼...
-
「画像クリックで音声再生」を ...
-
JavaScriptでクレイアニメ。ち...
-
クリックでクリッカブルマップ...
-
JQueryでオープニングアニメー...
-
交互に入れ替わる画像を複数配置
-
JavaScript/CANVASでの画像読込...
-
VBAでIEを動かす場合、下記の①...
おすすめ情報