jQuery：click（）函數不適用於PrettyPhoto

Question

我在網站中使用PrettyPhoto。它顯示單擊圖像時的內聯內容。

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

內聯要顯示的內容是：

<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 --> 

我想，當你在一個縮略圖（.thumbs李一）點擊模式窗口，它改變了上述圖像（#imgAmpliada IMG ）。我試過這個代碼，但沒有：

$(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？

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

Answer 2

如果ul.thumbs已經被放置在頁面上，你可以使用：

$(".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尚未綁定。使用現場版本，而不是：

$(".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

我剛剛解決了同樣的問題（註冊jQuery事件內聯發生PP）。 問題是PP克隆你的div代碼。所以你所有的JS代碼完美的工作，但在你的原始div，而不是在PP中的新的...

解決方案很簡單：只需一個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; 
});