javascript - 可能なすべての URL に Fancybox を使用する

Question

fanybox でページ上の可能なすべてのメディア コンテンツ リンクを開くようにします。

ページに 3 つのアンカー リンクがあるとします。

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 リンクなどであるかがわかりません。

開いているギャラリーに可能なものを空想させるか、どのリンクが表示されるかを教えてください。

デモ - 1

デモ - 2

Answer 1

これが私が問題を達成する方法です、

//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");
});

デモ

Answer 2

試す...

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