Question

好吧我正在使用带有图像映射的slimbox，将其包含在我的主页html：

    <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()更改为jQuery(function($) { $("#MapId area").slimbox()并将其余代码保持相同以在标题中放置链接，则相同的代码应该有效。

然而，我尝试了一些这方面的变化，但没有一个有效..

有什么想法吗？提前谢谢！

Answer 1

好的，我想到了其他可能想要使用代码的人：

A）允许您在每个灯箱的标题中放置一个指向slimbox图像的链接，而不需要为每个灯箱添加大量代码。您所要做的就是使用提供的代码，然后将您要链接的图像放在与灯箱图像相同的文件夹中，并将“_lg.jpg”添加到链接图像的标题中，代码告诉它链接到一个名为“_lg.jpg”的人。

然后

B）允许您使用图像地图来激活slimbox，而不仅仅是单个图像，方法是将$("#map area").slimbox()放置在#map的任何地图id值和area的位置1}}部分告诉它在按下地图区域时激活，而不是通常的rel标记。

您始终可以使用jQuery(function($) {$("a[rel^='lightbox']").slimbox()标记，而不需要图片地图部分，但仍希望使用标题中的下载链接。

以下是我直接在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“添加了。节省了大量时间，希望这有助于某人！

调整slimbox标题替换代码以使用图像映射slimbox

1 个答案: