对所有可能的 URL 使用 Fancybox答案

【问题标题】：Use Fancybox for all possible Urls对所有可能的 URL 使用 Fancybox
【发布时间】：2013-09-08 11:04:59
【问题描述】：

我希望 fanybox 打开页面上所有可能的媒体内容链接。

假设我在页面上有三个锚链接，

HTML

<a href="https://www.google.com">Google (Just a link to google)</a>
<a href="http://fancyapps.com/fancybox/demo/1_b.jpg">Image 1</a>
<a href="http://fancyapps.com/fancybox/demo/2_b.jpg">Image 2</a>

第一个只是到 google 的链接（不是图片），其他的是图片链接 (jpg)，可以是 vimeo、youtube 或任何其他 fancybox 可以显示的内容链接。

Javascript

// Fancybox initializing
$("a")
    .attr('rel', 'gallery')
    .fancybox();

/*
   When I try to trigger first link of gallery, 
   it doesn't open the gallery, because it's not a media content 
   that fancybox can open.
   Demo: http://jsfiddle.net/Py2RA/1599/
*/
$("button").click(function() {
    $("a").eq(0).trigger("click");
});

/*
   But when I trigger second or third one gallery shows up.
   Demo: http://jsfiddle.net/Py2RA/1600/
*/
$("button").click(function() {
    $("a").eq(1).trigger("click");
});

问题：

实际上内容是动态的，假设我在页面上有 50 个链接，但我不知道哪个只是指向另一个页面的链接、youtube 链接、图片链接、vimeo 链接或其他链接。

我只是想将打开的画廊与可能的画廊一起幻想一下，或者让我知道它可以显示哪个链接。

Demo - 1

Demo - 2

【问题讨论】：

您是否能够对更多的 html 进行硬编码，或者您希望脚本为您完成所有工作？ ...顺便说一句，您永远不会在fancybox（或任何其他灯箱）中打开谷歌，因为与许多其他网站一样，它不能包含在 iframe 中
我知道，我无法在fancybox 中打开google，只是希望fancybox 忽略google 链接并显示下一个。我找到了使用 $.fancybox.helper.media 来解决这个问题的解决方案。有时间我会放在这里的。

标签： javascript jquery fancybox fancybox-2

【解决方案1】：

试试……

$("button").click(function() {
    $("a").gt(0).trigger("click");
});

【讨论】：

如果你的意思是 $("a:gt(0)").trigger("click") 或 $("a").get(0) 我想你没有得到我的问题。
我想我没有得到你的问题。而且，是的，我的意思是a:gt(0)

【解决方案2】：

这就是我解决问题的方法，

//this part of code check if the link can be shown in fancybox and set fancybox-group data attribute.
$("a").each(function() {
    var url   = this.href || '',
        mediaDefaults = $.fancybox.helpers.media.defaults,
        type  = false,
        what,
        item,
        rez,
        params;
    if ($.fancybox.isImage(url) || $.fancybox.isSWF(url)) {
        $(this).attr("data-fancybox-group", "fancyboxlinks");
    } else {
        for (what in mediaDefaults) {
            if (mediaDefaults.hasOwnProperty(what)) {
                item = mediaDefaults[what];
                rez  = url.match(item.matcher);

                if (rez) {
                    $(this).attr("data-fancybox-group", "fancyboxlinks");
                }
            }
        }
    }
});

// Now here you can initialize fancybox here
// Selector just select the link that can be used for fancybox.
$("a[data-fancybox-group]").fancybox();

$("button").click(function() {
    $("a[data-fancybox-group]").eq(0).trigger("click");
});

DEMO

【讨论】：