画像マップ付きファンシーボックスギャラリー - jquery、fancybox

私は fancybox 画像マップを使用してギャラリー。の html/iframes 開くことはできますが、ギャラリーを機能させることはできません。

私は試した：

<area class="fancybox" data-fancybox-group="gallery"

また試しました：

<area class="fancybox" rel="gallery"

ただし、[前へ]ボタンと[次へ]ボタンは表示されません。

以下は私のJavaScriptです。

 $("map > area.fancybox").click(function(e) {
e.preventDefault();
var url = $(this).attr("href");
$.fancybox({
"href" : url,
"type" : "iframe"
});
});

自分のギャラリーを手動でグループとして追加してもうまくいくように見えることに気づきましたが、ギャラリーの順序を機能させるには少し手を加える必要がありますか？

$("map > area.fancybox").click(function(e) {
e.preventDefault();
var url = $(this).attr("href");
console.log($(this).attr("rel"));
$.fancybox([{
"href" : url,
"type" : "iframe"
},
{
"href" : "class.cfm",
"type" : "iframe"
},
{
"href" : "explore.cfm",
"type" : "iframe"
}]
);
});

回答：

回答№1は0

これを試して：

$(document).ready(function(){
$("map").find("area.fancybox").click(function()
{
var self = this;
if( $(self).attr("href") != undefined || $(self).attr("href").length > 1 )
{
$.fancybox({
href    :    $(self).attr("href"),
type    :    "iframe"
});
}
else
{
console.log("Ups!!");
}
return false;
});
});

さようなら！

---

回答№2の場合は0

私はこれが古いことを知っていますが、多分それは誰かを助けるでしょう。

最新バージョンのfancyboxでは、「groupAttr"オプション：

$("#img_map area").fancybox({
groupAttr : "alt"
});

relの代わりに "grouper"としてaltを使用してください。これはイメージマップに対して機能します。

乾杯。

---