0

わかりましたので、最近、jquery を使用してターゲット div の画像ソースを切り替える方法を学びましたが、結果の画像は壊れたリンクをロードします。しばらくの間、私はこれを試みる方法さえ知りませんでした。スクリプトが実際にターゲット div のイメージ ソースを変更するという事実は、私が求めているものですが、壊れたイメージを返す理由がわかりません。サムネイル バーの画像の 1 つは、メイン コンテンツ div にある元の画像ですが、壊れて表示されます。変更を処理するコードはチュートリアルからのもので、ほぼそのままです。

この問題を簡単に検索しましたが、見つけたものはすべて無関係のようです。私はPHPを学んでいないので、それが問題かもしれません。

HTML:

    <table id="thumb_row">
    <td><div class="thumb"><img src="../../../Documents/Blacktip-Reef-Shark.jpg" /></div>     </td>
    <td><div class="thumb"><img src="../about_clicked.png"/></div></td>
    <td><div class="thumb wide_thumb"><img src="../Web_Teaser_Images/Hyp_1.jpg"></div></td>


     <div id= "content_bar"><img src="../Web_Teaser_Images/Hyp_1.jpg"/></div>

CSS:

 .thumb{ position: relative;
    clear:both;
    background-color:#747474;
    z-index:201;
    height: 120px;
    width: 120px;
    margin: 5px 5px 5px 5px;
    opacity: 0;
    overflow:hidden;
 }

 .thumb img{width: auto;
        height: 120px;
        margin: 0px 0px 0px 0px;
 }

 .wide_thumb img{width: auto;
        height: 120px;
        margin: 0px 0px 0px -100px;
 }

 #thumb_row {clear:both;
        margin:665px 0px 0px 0px;
        position: absolute;
        z-index: 100;
        background-color: none;
        height: auto;
        width: 100%;
        float: right;

Jクエリ:

      $(".thumb").click(function(){
    var image = $(this).attr('rel');
    $('#content_bar').fadeOut("fast");
    /*THIS IS THE LINE THAT SHOULD SWAP IMG SRC*/
    $('#content_bar').html('<img src="'+image+'"/>');
    $('#content_bar').fadeIn("fast");

    });
4

1 に答える 1

0

このチュートリアルでは、使用するイベント ハンドラーが rel 属性を持つアンカー要素である .galImg に関連付けられているため、rel 属性を使用します。

 <a href="#" rel="http://farm1.staticflickr.com/148/369304411_917e112a9d.jpg" class="galImg"><img src="http://farm1.staticflickr.com/148/369304411_917e112a9d_s.jpg" class="thumb" border="0"/></a>

あなたが持っているクラス .thumb の div には rel 属性がないため、画像の src を undefined に設定することになります。.thumb クリック イベント ハンドラーは、代わりに、次のように、ネストされた画像の src 属性を検索する必要があります。

$(".thumb").click(function(){
    var image = $(this).find('img').attr('src'); // child element src
    $('#content_bar').fadeOut("fast");
    /*THIS IS THE LINE THAT SHOULD SWAP IMG SRC*/
    $('#content_bar').html('<img src="'+image+'"/>');
    $('#content_bar').fadeIn("fast");
});
于 2013-06-23T02:17:08.547 に答える