使用Fancybox和圖像映射

Question

我想知道是否有方法使用fancybox和圖像映射？

<img src="\path\" usemap="#Map"> 
    <map name="Map" id="Map" > 
     <area shape="poly" coords="0,0,0,328,145,328" href="#" /> 
     <area shape="poly" coords="0,0,180,0,328,328,142,328" href="#" />   
     <area shape="poly" coords="328,328,328,0,180,0" href="#" />  
    </map> 

Answer 1

所以，你想顯示一個圖像在fancybox與圖像映射？

它可以將地圖添加到的fancybox的圖像中的幾種方法，

例如，你可以把它添加到一旦其加載的圖像，該圖像與ID fancybox-img加載，所以使用oncomplete()回調，我們可以有機會獲得地圖添加到圖像：

HTML：

<a href="/path/to/large/image" class="fancybox" title="Single image with a map"> 
    <img src="/path/to/small/image"/> 
</a> 
<map name="Map" id="Map"> 
    <area shape="poly" coords="0,0,0,328,145,328" href="#" /> 
    <area shape="poly" coords="0,0,180,0,328,328,142,328" href="#" />   
    <area shape="poly" coords="328,328,328,0,180,0" href="#" />  
</map> 

jQuery的：

$("a.fancybox").fancybox({ 
    'titleShow': true, 
    'titlePosition': 'inside', 
    onComplete: function() { 
     $('#fancybox-img').attr('usemap', '#Map'); 
    } 
}); 

See it working here

---

另一種方法是向內容傳遞到的fancybox：

HTML：

<img src="/path/to/small/image" /> 
<map name="Map" id="Map"> 
    <area shape="poly" coords="0,0,0,328,145,328" href="#" /> 
    <area shape="poly" coords="0,0,180,0,328,328,142,328" href="#" />   
    <area shape="poly" coords="328,328,328,0,180,0" href="#" />  
</map> 

的jQuery：

$("img").click(function() { 
    var url = $(this).attr('src'); 
    var content = '<img src="'+url+'" usemap="#Map" />'; 
    $.fancybox({ 
     'title' : 'Single image with a map', 
     'titlePosition': 'inside', 
     'content' : content 
    }); 
}); 

See it working here

---

以上，可以提高通過做這樣的事情，支持多種圖像和地圖：

HTML：

<img src="/path/to/small/image" rel="#Map" title="Single image with a map 1" class="fancybox" /> 
<br /> 
<img src="/path/to/second/small/image" rel="#Map" title="Single image with a map 2" class="fancybox" /> 
<br /> 
<img src="/path/to/non/fancybox/image" /> 
<br/> 
Try clicking image to enlarge.... 
<map name="Map" id="Map"> 
    <area shape="poly" coords="0,0,0,328,145,328" href="#" /> 
    <area shape="poly" coords="0,0,180,0,328,328,142,328" href="#" />   
    <area shape="poly" coords="328,328,328,0,180,0" href="#" />  
</map> 

的jQuery：

$("img.fancybox").click(function() { 
    var url = $(this).attr('src'); 
    var map = $(this).attr('rel'); 
    var title = $(this).attr('title'); 
    var content = '<img src="' + url + '" usemap="'+ map + '" />'; 
    $.fancybox({ 
     'title': title, 
     'titlePosition': 'inside', 
     'content': content 
    }); 
}); 

See it working here

注：我已經添加了幾個選項來的fancybox，如標題只是爲了告訴你如何添加的選項。我還抓住了地圖上的點擊，因此它沒有打開網址和提醒，只是爲了向您顯示地圖正在工作。

---

更新爲每個評論：

啊，我誤會了。在這種情況下，當用戶點擊地圖項目時使用fancybox非常簡單。最簡單的方法是使用jQuery選擇器$('map > area')來捕捉地圖上某個區域的任何點擊。但是，如果您不希望所有區域在fancybox中打開，則最好將其添加到您的選擇器中，例如爲每個區域打開一個fancybox一個類，然後使用選擇器$('map > area.fancybox')：

HTML：

<img src="/path/to/image" usemap="#Map" /> 
<br /> 
Try clicking image map..... 
<map name="Map" id="Map"> 
    <area shape="poly" coords="0,0,0,328,145,328" href="http://www.google.com" class="fancybox" title="Google" rel="iframe" /> 
    <area shape="poly" coords="0,0,180,0,328,328,142,328" href="http://farm6.static.flickr.com/5177/5574889454_b0a8c7845b.jpg" class="fancybox" title="EBR 1190 Typhon hits the track" rel="image" />   
    <area shape="poly" coords="328,328,328,0,180,0" href="http://www.ask.com" /> 
</map> 

的jQuery：

$('map > area.fancybox').click(function(e) { 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    var title = $(this).attr('title'); 
    var type = $(this).attr('rel'); 
    $.fancybox({ 
     'title': title, 
     'titlePosition': 'inside', 
     'href' : url, 
     'type' : type 
    }); 
}); 

See the example here

• 所以在上面的例子中，我們使用了jQuery .click()捉對與類的fancybox 地圖區域中的任何點擊（你會發現www.ask.com例子將在窗口中打開，另兩個開放在fancybox）。
• 我們使用.preventDefault()方法來停止瀏覽器之後的鏈接，就像它通常會。
• 接下來獲取點擊區域的網址。
• 然後得到該地區的標題點擊（不是真的需要，但只是增加了嘗試，並幫助您展示如何獲取數據）
• 接下來我將使用rel屬性的類型，這可以讓你設置你想要的fancybox做。
• 現在只需打開細節的fancybox。

所以在這個例子：

區域1將打開的fancybox它是含有一個頁面的iframe中。

區域2將打開一個帶有圖像的fancybox。

區域3只會正常加載鏈接中的網站，而不使用fancybox。