調整苗條標題替換代碼以與圖像地圖苗條一起使用

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“。時間，希望這對某人有所幫助！