Fancybox的Div-fired画廊 [英] Div-fired galleries in Fancybox

问题描述

我使用Fancybox二，而不是使用< a> 标签来激发Fancybox我正在使用 div 标签并在我的Javascript中使用此代码：

  $（'＃portfolio> #project'）。点击（function（）{
 $ background_image = $（this）.css（background-image）; 
 $ background_image = $ background_image.replace（'url（'，''）。replace '）'，''）; 
 $ .fancybox（{
 href：$ background_image 
}）; 
}）; 
  

但是，通过遵循Fancybox文档创建图库（通过添加 rel =gallery1到你的图片，或在我的情况下， div s），没有幻灯片显示，你不能从一个图像当Fancybox被触发并且出现图像时。

解决方案

由于没有人真的对我的问题有过答案，我决定请坐下来仔细看看我的代码;我决定创建一个插件来实现它。

当我开发我的投资组合（ 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 = $（本）的CSS（ 背景图片）; 
 $ background_image = $ background_image.replace（'url（'，''）。replace（'）'，''）; 
 $ b $（this）.attr（{
data-fancybox-group：$ gallery_name，
data-fancybox-href：$ background_image 
} ）; 
}）; 
}; 
  

I'm using Fancybox two and instead of using the <a> tags to fire Fancybox I'm using div tags and within my Javascript I'm using this code:

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

However, by following the Fancybox documentation to create a gallery (by adding rel="gallery1" to your images, or in my case, divs), there is no slideshow and you can't navigate from one image to the other when the Fancybox is fired and an image appears.

解决方案

Since nobody really had the answer to my question I decided to sit back and take a long and hard look at my code; I came to the decision that I needed to create a plugin for this to work.

When I was developing my portfolio (http://mrconnor.co.uk) I developed it so that instead of Fancybox being fire from <a> tags I'd fire it from <div> tags: I did this so that my code could be cleaner, plus it would be easier for me to good back and edit and style.

However, I came across the problem (which is why I posted) that making a gallery or a slideshow from this cannot work the normal way by adding rel="gallery1" to all items that I want in my gallery, so I created a jQuery plugin.

Test it here: 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
        });     
    });
};

这篇关于Fancybox的Div-fired画廊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！