将 Fancybox 与图像映射结合使用

发布于 2024-10-29 22:55:53 字数 392 浏览 2 评论 0原文

我想知道是否有办法将 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>

原文

I wonder if there is a way to use the fancybox with Image maps?

    <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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

终难愈 2024-11-05 22:55:53

那么您想在 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');
    }
});

在这里查看它的工作

另一种方法是将内容传递到 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
    });
});

查看它的工作原理这里

可以通过执行以下操作来改进上述内容以支持多个图像和地图：

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

在这里查看它的工作

注意：我已经在 fancybox 中添加了几个选项，如标题所示，只是为了展示如何添加选项。我还捕获了地图上的点击，因此它没有打开网址并发出警报，只是为了向您显示地图正在运行。

根据评论更新：

啊啊，我误会了。在这种情况下，当用户单击地图项时使用 fancybox 非常简单。最简单的方法是使用 jQuery 选择器 $('map > area') 捕获地图区域上的任何点击。但是，如果您不希望在 fancybox 中打开所有区域，则最好添加到选择器中，例如为要打开 fancybox 的每个区域提供一个类，然后使用选择器 $( '地图>区域.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
    });
});

请参阅此处的示例

因此，在上面的示例中，我们使用 jQuery .click() 来捕获类 fancybox < 中地图区域上的任何点击 < em>（您会注意到 www.ask.com 示例将在窗口中打开，另外两个示例将在 fancybox 中打开）。
我们使用 .preventDefault() 方法来阻止浏览器像平常一样跟踪链接。
接下来获取点击区域的 url。
然后获取单击的区域的标题（并非真正需要，只是添加以尝试帮助展示如何获取数据）
接下来我使用 rel 设置类型属性，这允许您设置您想要 fancybox 执行的操作。
现在只需打开包含详细信息的 fancybox 即可。

所以在这个例子中：

区域 1 将打开一个 fancybox，它是一个包含页面的 iframe。

区域 2 将打开一个包含图像的精美盒子。

Area 3 将正常加载链接中的网站，而不使用 fancybox。

So you want to show a single image in a fancybox with an image map?

It is possible to add the map to the image of fancybox in a couple of ways,

For example, you could add it to an image once its loaded, the image will load with the id fancybox-img, so using the oncomplete() callback we can have access to add the map to the image:

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

The other way is to pass content to the 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

The above could be improved to support multiple images and maps by doing something like this:

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

NOTE: I have added a couple of options to the fancybox, like the title just to show how you can add the options. I also caught the click on the map so it didn't open the url and alerts just to show you the map is working.

Update as per the comments:

Ahh, I misunderstood. In that case, it is quite simple to use a fancybox when a user clicks on a map item. The simplest, is to use the jQuery selector $('map > area') to catch any click on an area of a map. However, if you didn't want ALL area's to open in a fancybox, it might be better to add to your selector, for example give each area that you want to open a fancybox a class, then use the selector $('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

So in the example above, we use the jQuery .click() to catch any clicks on a map area with the class fancybox (you will notice the www.ask.com example will open in the window, the other two open in a fancybox).
We use the .preventDefault() method to stop the browser following the link like it normally would.
Next get the url of the area clicked on.
Then get the title of the area clicked on (not really needed, but just added to try and help show how you can get data)
Next I set the type using the rel attribute, this allows you to set what you want the fancybox to do.
Now simply open the fancybox with the details.

So in this example:

Area 1 will open a fancybox which is an iframe containing a page.

Area 2 will open a fancybox with an image in it.

Area 3 will just load the website in the link as normal not using fancybox.

回复收藏 0 原文

~没有更多了~