Adapt slimbox title replace code to work with image map slimbox

Question

Ok so I am utilizing a slimbox with an image map by including this on my main page html:

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

and this is working fine, it now loads the different image map locations in slimbox when clicked.

What I need now however, is a piece of code I used before with the "rel" attribute that basically placed a download link in the "title" but grabbing the .href name and replacing the end portion of the name with _lg.jpg to give a high res image download. This worked great with the "rel" option, however I am not able to get it working for the image map "area" use instead. Here is the code as it works with the "rel" portion:

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

}

As you can see slimbox was grabbing the href link and amending it with the _lg.jpg extension and placing a link for the user in the title.

In theory, this same code should work if I just changed the jQuery(function($) { $("a[rel^='lightbox']").slimbox() to jQuery(function($) { $("#MapId area").slimbox() and left the rest of the code the same to place a link in the title.

However I have tried a few variations of this and none of it has worked..

Any ideas? Thanks in advance!

Answer 1

Ok I figured this out for anyone else who may be wanting to utilize code that will:

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.

Here is the code I added directly in the pages 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>

Again this means you don't have to place a different image link in every single image Title, it will automatically look for the image that has the same name as your slimbox image but with the _lg.jpg" added instead. Saves a lot of time and hope this helps someone!