Fancybox-2: Прекращает работу при обновлении исходного элемента динамически

Question

Итак, вот сценарий: Я пытаюсь создать галерею, где есть «основное» изображение с включенным Fancybox (с классом .fancybox) и ниже этого основного изображения есть несколько эскизов, которые при щелчке обновляют href и src основных <a> и <img> элементов соответственно.

Теперь, когда страница загружается, если вы нажимаете основное изображение, Fancybox срабатывает без проблем, как ожидалось. Однако, когда я нажимаю один из миниатюр ниже, основное изображение и обновление ссылок с содержимым эскизов - если я сейчас нажимаю основное изображение, оно просто переходит к указанному URL-адресу; нет Fancybox.

Даже если я должен был повторно позвонить $('.fancybox').fancybox(); после обмена; ничего еще.

Во всяком случае, вот код и jsFiddle:

---

Fiddle

http://jsfiddle.net/sbeliv01/jRsjK/4481/

---

HTML

<!-- The "Main" Photo --> 
<a rel="gallery" class="fancybox" href="http://fancyapps.com/fancybox/demo/1_b.jpg"> 
    <img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt=""/> 
</a> 

<!-- The thumbnails that update the main photo --> 
<ul> 
    <li> 
     <a class="update" href="http://placekitten.com/600/300" title="This is the test title."> 
      <img src="http://placekitten.com/150/150" width="45" width="45" title="This is the test title." /> 
     </a> 
    </li> 
    <li> 
     <a class="update" href="http://placekitten.com/600/300" title="This is the test title."> 
      <img src="http://placekitten.com/150/149" width="45" width="45" title="This is the test title." /> 
     </a> 
    </li> 
    <li> 
     <a class="update" href="http://placekitten.com/600/300" title="This is the test title."> 
      <img src="http://placekitten.com/g/150/150" width="45" width="45" title="This is the test." /> 
     </a> 
    </li> 
</ul> 

---

JS

$(".fancybox").fancybox({ 
    live: true 
}); 

$('.update').on('click', function(e) { 

    e.preventDefault(); 

    var main  = $('.fancybox'), 
     href  = $(this).prop('href'), 
     title  = $(this).prop('title'), 
     img_src = $(this).find('img').prop('src'), 
     img_title = $(this).find('img').prop('title'); 

    main 
     .prop('title', title) 
     .prop('href', href) 
     .find('img') 
     .prop('src', img_src) 
     .prop('title', img_title); 

    $(".fancybox").fancybox(); 

}); 

---

я, вероятно, слишком много внимания, чтобы подобрать что-нибудь очевидное так что спасибо за любую помощь.

Answer 1

Причина, по которой fancybox работает в первый раз, заключается в том, что URL первого URL-адреса нацелен на image, например. :

http://fancyapps.com/fancybox/demo/1_b.jpg 

... в то время как другие в более месте, например, :

http://placekitten.com/600/300 

... без изображений расширения. Во втором URL-адресе fancybox не знает, что нужно обрабатывать type, и поэтому ссылка открывается в новом окне/вкладке.

Вы должны заставить type содержания в image как

$(".fancybox").fancybox({ 
    type : "image" 
}); 

Вы на самом деле не нужно re-call the $('.fancybox').fancybox(); after the swap has taken place

См jsfiddle