Fancybox: хотел бы использовать другой элемент, чем a/anchor.

Question

Я бы хотел использовать Fancybox для предварительного просмотра изображений на моем сайте, что немного сложнее, чем ведро изображений. Я хотел бы применить Fancybox к div вместо a/anchor и использовать другой атрибут для назначения URL-адреса изображения. Возможно ли это в Fancybox?

Формат Я хотел бы это, например:

<div fancyimage="URL" class="fancybox"> 
    <img src="THUMB" /> 
    <a href="STANDARD IMAGE LINK">CAPTION</a> 
<div> 

Таким образом, если пользователь не включен Javascript (или есть ошибка, и т.д.), они по-прежнему быть в состоянии для доступа к изображению. Заранее спасибо.

Answer 1

Хмм вы могли бы сделать что-то вроде этого

<div data-fancyimage="http://fancyapps.com/fancybox/demo/2_b.jpg" 
    data-thumbnail="http://fancyapps.com/fancybox/demo/2_s.jpg" 
    class="fancybox"> 
     <a href='http://fancyapps.com/fancybox/demo/2_b.jpg'> 
      <img src='http://fancyapps.com/fancybox/demo/2_s.jpg' /> 
     </a> 
</div> 

JS:

$("a").on("click", function(e) { 
    e.preventDefault(); 
}); 

$(".fancybox") 
    .attr('rel', 'gallery') 
    .fancybox({ 
    afterLoad: function() { 
     this.content.find("img").attr("src", this.content.data("fancyimage")); 
    }, 
    afterClose: function (current) { 
     this.content.find("img").attr("src", this.content.data("thumbnail")); 
     $(current.element).show(); 
    } 
}); 

Вот это fiddle вы можете проверить.

Answer 2

Вы можете связать FancyBox к любому элементу, кроме якоря (а div в примере ниже) использование data-fancybox-* атрибутов FancyBox как

<div class="fancybox" data-fancybox-href="http://fancyapps.com/" data-fancybox-type="iframe" data-fancybox-group="gallery"> 
    <img src='http://fancyapps.com/fancybox/demo/1_s.jpg' /> 
</div> 
<div class="fancybox" data-fancybox-href="http://fancyapps.com/fancybox/demo/2_b.jpg" data-fancybox-type="image" data-fancybox-group="gallery"> 
    <img src='http://fancyapps.com/fancybox/demo/2_s.jpg' /> 
</div> 

И используя простой сценарий без обратного вызова, как:

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

См JSFIDDLE