Div пламенной галереи в FancyBox

Question

Я использую FancyBox два, и вместо того, чтобы использовать <a> тег, FancyBox Я использую div тег и в моей JavaScript, я использую этот код:

$('#portfolio>#project').click(function(){ 
    $background_image = $(this).css("background-image"); 
    $background_image = $background_image.replace('url(','').replace(')',''); 
    $.fancybox({ 
     href: $background_image 
    }); 
}); 

Однако , следуя документации Fancybox, чтобы создать галерею (добавив rel="gallery1" к вашим изображениям, или в моем случае, div s), нет слайд-шоу, и вы не можете перемещаться с одного изображения на другое, когда Fancybox уволен, и появляется изображение.

Answer 1

Поскольку никто не имел ответа на мой вопрос, я решил сесть и принять долго и упорно смотреть на мой код; Я пришел к тому, что мне нужно было создать плагин для этого.

Когда я разрабатывал свой портфель (http://mrconnor.co.uk) Я разработал его так, что вместо того, чтобы быть FancyBox огнем из <a> тегов я стрелять из <div> тегов: Я сделал это так, что мой код может быть чист, плюс это будет мне легче справиться, редактировать и стилизовать.

Однако я столкнулся с проблемой (именно поэтому я и разместил), что создание галереи или слайд-шоу из этого не может нормально работать, добавив rel="gallery1" ко всем элементам, которые я хочу в своей галерее, поэтому я создал jQuery плагин.

Попробуй здесь: http://jsfiddle.net/cranavvo/u3U23/

$.fn.fancyGallery = function($gallery_name){ 
    $(this).each(function(){ 
     $background_image = $(this).css("background-image"); 
     $background_image = $background_image.replace('url(','').replace(')',''); 

     $(this).attr({ 
      "data-fancybox-group": $gallery_name, 
      "data-fancybox-href": $background_image 
     });  
    }); 
}; 

Answer 2

Вы всегда можете связать любой HTML элемент FancyBox кроме <a> тега (и создать галерею без атрибута rel), используя специальные data-fancybox-* атрибуты FancyBox как:

<div data-fancybox-group="gallery" data-fancybox-href="#inline1" class="fancybox">open first fancybox item</div> 

См JSFIDDLE

BTW, если привязка fancybox к нескольким элементам, используйте классы вместо идентификаторов

ПРИМЕЧАНИЕ: если вы используете метод .click() для запуска fancybox, галерея должна быть передана вручную в fancybox внутри скрипта. Вы можете все еще свяжите click к элементу (для заполнения содержимого целевого элемента) перед переплетом FancyBox ему нравится:

$(".fancybox").click(function(){ 
    // populate the target inline element here 
}).fancybox();