Links not working at first load

[kiv5]

Hi,

Map links not working at the first load. After resizing (no matter it is big or small portion) links starts working.

What should I do to solve this issue?

[admjacqus]

Try using

$(window).load(function(e) {
    $('img[usemap]').rwdImageMaps().delay(800);
    console.log( 'Ready!' );
});
</script>

[kiv5]

@ishiiprints Thank you. But after using cloudflare's Rocket Loader(Automatically asynchronously load all JavaScript resources), it is working.

[jonasva]

I also had a similar issue, the map area's were not correctly placed over the image on first load. I added imagesLoaded to fix it (https://github.com/desandro/imagesloaded).

$('.map').imagesLoaded().always( function( instance ) {
    // responsive img maps
    $('img[usemap]').rwdImageMaps();
});

[kiv5]

@jonasva Thank you. I hope that can others :)

[davehoran]

A year after these posts, and I'm running into the same thing. Background: I'm running a simple slider within a page, but each image in the slider could have an image map. In the current case, the second slide has the image map. I'm using the http://bxslider.com/ plugin and it works well, However, the image maps won't resize without a little help. So I'm trying this.

Upon first load, the image map (with only one area defined) isn't responding. However, when I make even the slightest window resize, the event somehow triggers the image map to work. Is there some onResize event that is getting triggered that I can forcibly run after the image(s) are loaded? I have tried the suggestion that @ishiiprints had, and it's not working. Based on @jonasva suggestion, used a callback within bxSlider to load the rwdImageMaps() after all the slider images are loaded. Still no-go.

I DO know that a window resize will force it. Any suggestions?

[davehoran]

I got it working, but again not a "real" fix. The slider code is below. There is a

with a class of "bxslider" that contains the images. There is a callback function called onSlideAfter that executed after each slide transition. So I forcibly fire the window resize event after each slide to ensure the imagemaps are reloaded properly. Seems to work.

$('.bxslider').bxSlider({
    mode: 'fade',
    auto: true,
    pager: false,
    useCSS: false,
    hideControlOnEnd: true,
    controls: false,
    adaptiveHeight: true,
    onSlideAfter: function () {
        $(window).trigger('resize');
        console.log("onSliderLoad fired");
    },
});

Hope this helps someone in the same boat...

[cedee]

@davehoran :

Your post was very very helpful for me, THANKS! I am using the flexslider, and I had the same problem, the imagemap didn't work the first time after reload. Then I have adapted your solution to my slider. There is a property calls "after:", which fires after each slider animation completes. Seems to work.

$('#slider').flexslider({ animation: "slide", controlNav: false, animationLoop: false, slideshow: false, sync: "#carousel", start: function(slider){ $('body').removeClass('loading'); }, after: function () { $(window).trigger('resize'); } });

[yanlenner]

Or instead add it to the img tag using onmouseover attr: <img usemap='#name' onmouseover = "$ ('img [usemap]'). rwdImageMaps ();> and dont inside the <script></script>