0

好的，所以我通过在我的主页 html 中包含它来使用带有图像映射的 slimbox：

    <script type="text/javascript">
    jQuery(function($) { 
    $("#MapId area").slimbox();
    }); 
    </script>

这工作正常，现在单击时会在 slimbox 中加载不同的图像映射位置。

然而，我现在需要的是我之前使用的带有“rel”属性的一段代码，该属性基本上在“标题”中放置了一个下载链接，但获取 .href 名称并将名称的末尾部分替换为 _lg.jpg 到提供高分辨率图像下载。这与“rel”选项配合得很好，但是我无法让它为图像映射“区域”使用而工作。这是与“rel”部分一起使用的代码：

    // AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
jQuery(function($) {
    $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, function(el) {
            return [el.href, el.title + '<br /><a href="' + el.href.replace(/\.jpg$/i, '_lg.jpg') + '" target="_blank"> Download this image in Hi-Res</a>'];
    }, function(el) {
            return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
    });
});

}

如您所见，slimbox 正在抓取 href 链接并使用 _lg.jpg 扩展名对其进行修改，并在标题中为用户放置一个链接。

理论上，如果我只是更改jQuery(function($) { $("a[rel^='lightbox']").slimbox()tojQuery(function($) { $("#MapId area").slimbox()并将其余代码保持不变以在标题中放置链接，则相同的代码应该可以工作。

但是，我尝试了一些变体，但都没有奏效..

有任何想法吗？提前致谢！

4

1 回答 1

0

好的，我为其他可能想要使用以下代码的人解决了这个问题：

A) allow you to place a link to the slimbox image in the title of each lightbox without adding a ton of code to each. All you have to do is use the provided code and then place your image you want to link to in the same folder as the lightbox image and add "_lg.jpg" to the title of the linked image and the code tells it to link to the one named "_lg.jpg".

and then

B) allows you to use an image map to activate the slimbox, not just individual images, by placing $("#map area").slimbox() where #map is whatever your map id value is and the area portion tells it to activate upon the map area being pressed as opposed to your usual rel tag.

You can always still use the jQuery(function($) {$("a[rel^='lightbox']").slimbox() tag instead of you don't need the image map part, but still want to use the download link in the title.

这是我直接在页面 HTML 中添加的代码：

<script type="text/javascript">
jQuery(function($) { 
   $("#map area").slimbox({/* Put custom options here */}, function(el) {
   return [el.href, el.title + '<br /><a href="' + el.href.replace(/\.jpg$/i, '_lg.jpg') + '" target="_blank"> Download this image in Hi-Res</a>'];
     });
}); 
</script>

这再次意味着您不必在每个图像标题中放置不同的图像链接，它会自动查找与您的 slimbox 图像同名但添加了 _lg.jpg" 的图像。节省了大量时间，希望这可以帮助某人！

于 2014-01-15T15:22:48.320 回答