Можно ли добавить fancybox в галерею изображений портфолио?

Question

Плагин portfoliojs был моим выбором для создания портфолио в стиле карусели. Тем не менее, я обнаружил, что нет встроенной функции масштабирования, встроенной в подключаемый модуль. Из-за относительной сложности кода jquery я затрудняюсь как вручную добавить функциональность галереи (точнее, fancybox). Параметр «lightbox = true» инициализации просто уменьшает другие изображения в галерее, но не увеличивает изображение по выбору.

В идеале я хотел бы добавить функциональность fancybox в мою галерею, например. мой HTML будет выглядеть следующим образом:

<div id="gallery"> 
     <a href="someimage.jpg" class="fancybox"> <img src="someimage.jpg></img> </a>    
     <a href="someimage2.jpg" class="fancybox"> <img src="someimage2.jpg></img> </a> 
    </div> 

Однако галерея portfoliojs работает только тогда, когда является дочерним элементом (без уровня между ними):

<div id="gallery"> 
     <img src="someimage.jpg></img>    
     <img src="someimage2.jpg></img> 
    </div> 

Я попытался обернуть <img> элементы в <a>, но это не сработало.

Есть ли способ объединить функции двух плагинов (portfoliojs и fancybox) без существенной перезаписи кода? Каким будет альтернатива?

Answer 1

Это то, что я буду делать.

Имея HTML как это:

<div id="gallery"> 
    <img src="images/01.jpg" alt=""/> 
    <img src="images/02.jpg" alt=""/> 
</div> 

где src атрибут указывает на изображение, чтобы показать в FancyBox, используйте этот код:

var images = []; 
$("#gallery").find("img").each(function(i){ 
    images[i] = $(this).attr("src"); 
    $(this).bind("click", function(){ 
     $.fancybox(images,{ 
      index: i 
     }); 
    }) 
}); 

См JSFIDDLE

ПРИМЕЧАНИЕ: Вы можете использовать .on() (предпочтительный) вместо .bind():

$(this).on("click", function(){ ... 

это требует JQuery 1.7+ хотя. См. Обновленный JSFIDDLE