jQuery：click（）関数がPrettyPhotoで機能しない

Question

ウェブサイトでPrettyPhotoを使用しています。イメージをクリックすると、インラインの内容が表示されます。

<a href="#verObra" rel="prettyPhoto">Work name.</a> 

表示するインラインコンテンツである：私はあなたがモーダルウィンドウにサムネイル（.thumbs李のA）をクリックしたときに、それは上の画像（#imgAmpliada IMGを変えることを望ん

<div id="verObra1" class="verObra"> 
    <div class="galObra"> 
     <div id="imgAmpliada"> 
      <img src="images/showObra.jpg" alt="" /> 
     </div><!-- /#Ampliada --> 

     <ul class="thumbs"> 
      <li><a href="#" rel="prettyPhoto[pp_gal]"><img src="images/thumb.jpg" alt=""/></a> 
      <li><a href="#" rel="prettyPhoto[pp_gal]"><img src="images/thumb.jpg" alt=""/></a> 
     </ul> 
    </div><!-- /.galObra --> 
     <div class="descObra"> 
      <h3>Titulo de la obra</h3> 
      <p>The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains.</p> 
     </div><!-- /.descObra --> 
</div><!-- /#VerObra1 --> 

）。私はこのコードを試してみたが、何も：それは働いていない理由

$(function() { 
    $(".thumbs li a").click(function() { 
     var image = $(this).attr("rel"); 
     $('#imgAmpliada').hide(); 
     $('#imgAmpliada').fadeIn('slow'); 
     $('#imgAmpliada').html('<img src="' + image + '"/>'); 
     return false; 
    }); 
}); 

$("a[rel^='prettyPhoto']").prettyPhoto({show_title: false, default_width: 800}); 

、誰かが私に説明していない可能性がありますか？ありがとう！

Answer 1

イメージsrcはURLであるはずですが、何らかの表現に見えるものに設定しています。プリティ写真プラグインはそれで何かを行うことになっている場合

prettyPhoto[pp_gal] 

は私はわからないんだけど、そのいくつかの有効な変数は、スクリプト内で定義されている場合は、多分あなたはevalを使用することができますか？

$(".thumbs li a").click(function() { 
    var imagepath = $('img', this).attr('src'); 
    // get only the filename I suspect you dont want to display the thumb image itself in #imgAmpliada but a lrger version in a different folder 
    var filename = imagepath.replace(/^.*\\/, '') 
    $('#imgAmpliada').hide(); 
    $('#imgAmpliada img').attr('src', filename); 
    $('#imgAmpliada').fadeIn('slow'); 
    return false; 
}); 

するか、div要素を動的に配置されている場合divがまだバインドされていません。

var image = eval($(this).attr("rel")); 

Answer 2

ul.thumbsがすでにページ上に配置されている場合は使用することができます。代わりに、ライブバージョンを使用してください：

$(".thumbs li a").live('click', function() { 
    var imagepath = $('img', this).attr('src'); 
    // get only the filename I suspect you dont want to display the thumb image itself in #imgAmpliada but a lrger version in a different folder 
    var filename = imagepath.replace(/^.*\\/, '') 
    $('#imgAmpliada').hide(); 
    $('#imgAmpliada img').attr('src', filename); 
    $('#imgAmpliada').fadeIn('slow'); 
    return false; 
}); 

Answer 3

が、私はちょうど（PPのインライン出現内側jQueryのイベントを登録する）同じ問題を解決しました。 問題はPPがあなたのdivコードを複製していることです。だからあなたのすべてのJSコードは完全に動作しますが、PP内の新しいコードではなくオリジナルのdivにあります。

解決策は簡単です：PPコードの要素のidを取るだけです。（私は個人的に#pp_full_resいずれのidも動作します）、jQueryの子孫セレクタを使用してイベントを正しい要素にバインドします。あなたの場合、それは次のようなものになります：

$("#pp_full_res .thumbs li a").live('click', function() { 
    var imagepath = $('img', this).attr('src'); 
    // get only the filename I suspect you dont want to display the thumb image itself in #imgAmpliada but a lrger version in a different folder 
    var filename = imagepath.replace(/^.*\\/, '') 
    $('#imgAmpliada').hide(); 
    $('#imgAmpliada img').attr('src', filename); 
    $('#imgAmpliada').fadeIn('slow'); 
    return false; 
});