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 Li а) в модальном окне, он изменяет изображение выше (#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] 

Я не уверен, если Довольно Photo плагин должен делать что-то с этим, но если его уважительным переменным, определенным в сценарии, может быть, вы можете использовать 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 клонирует ваш код div. Таким образом, весь ваш JS-код работает отлично, но в вашем оригинальном div, а не в новом внутри PP ...

Решение довольно просто: просто возьмите идентификатор элемента кода PP (я лично использовал #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; 
});