调整苗条标题替换代码以与图像地图苗条一起使用

Question

好的，所以我通过在我的主页html中添加一个带有地图的slimbox：

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

并且运行良好，现在单击时可以将不同的图像地图位置加载到slimbox中。

但是，我现在需要的是一段我之前使用的带有“ rel”属性的代码，该代码基本上在“ title”中放置了一个下载链接，但抓取了.href名称并将该名称的结尾部分替换为_lg.jpg来提供高分辨率图片下载。 这与“ rel”选项一起使用时效果很好，但是我无法让它用于图像地图“ area”使用。 这是与“ 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）允许您在每个灯箱的标题中放置指向苗条箱图像的链接，而无需向每个灯箱添加大量代码。 您所要做的就是使用提供的代码，然后将要链接的图像与灯箱图像放置在同一文件夹中，并在链接图像的标题中添加“ _lg.jpg”，然后代码告诉它链接至一个名为“ _lg.jpg”的文件。

接着

B）通过放置$("#map area").slimbox()其中#map是您的地图id值是什么， area部分告诉它），您可以使用图像地图来激活slimbox，而不仅仅是单个图像$("#map area").slimbox()在按下地图区域（与通常的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“。时间，希望这对某人有所帮助！