Initial load not working

[hamngatan10]

The plugin works great except that on initial load the image maps are not working, after resizing it works. How can this be fixed?

See my test page for reference: http://shestore.se/lookbook-test2

[rajaveernapu]

Hi Is this issue fixed for you?

[mattiaaccornero]

Have you find a solution for this? I tried to call $(window).resize() after calling $("img[usemap]").rwdImageMaps() but nothing has changed. If I look into the code, the plugin sets coords to 0. After a window manual resize, they are recalculated.

[update] the issue appears when image is "display:none".

[Yana1]

Hi, I have the same issue now, is this fixed for you? Can anyone help me for this?

[kevinweaver]

I am running into the same issue. Still no fix?

[mattiaaccornero]

@kevinweaver you could try to use visibility:hidden instead of display:none.

[kiv5]

@beat84 I have no display:none on my image. But still initial load not working.

[mattiaaccornero]

@kiv5 have you a gist with the code?

[kiv5]

you can see the code at http://www.voga.com.tr It is on the first slide

[mattiaaccornero]

@kiv5 I can see the image.. which browser are you using?

[kiv5]

@beat84 Using chrome but I can also see the image. The problem is about image not working on inital load.

sorry not image - image mapping

[mattiaaccornero]

@kiv5 Oh ok, have you tried to wait some second before call the rwdImageMaps method?

[kiv5]

@beat84 no, not actually. But I don't know how to do it.

[kiv5]

@beat84 How can I try wait some second?

[mattiaaccornero]

@kiv5 Looking at your code, I suggest you to call the rwdImageMaps method at the end of the carousel configuration and initialization. In case you need a delay, try this: http://api.jquery.com/delay/

[kiv5]

@beat84 Thank you Mattia! I put a delay. Good news: Initial load works, thanks to you. But now even resizing works, coordinates not working when I resize the window.

Delay update here: $('img[usemap]').rwdImageMaps().delay(800);

UPDATE: It wasn't working, I did a syntax error :)

[catazep]

I have this problem too, I found out that .min has this problem, but the unminified version works fine. Considering the directive is very small I guess is ok to use this one

[wardhache]

I found a solution myself and posted it on the issue underneath. Hope it helps. #115

[jjy9331]

If the problem occurs in a modal window or popup(In the case of a modal window with display: none), it can be solved by inserting the image map code into the output button of the modal window.

 $('.menu').click(function menu(e) {

    $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
        $('area').on('mouseover', function() {

            $(".pf3_4 img").attr("src","images/md4_hover.png");
            $('area').css('cursor', 'none');
            $('.cursor').addClass('cursor-grow');

        });
        $('area').on('mouseout', function() {

            $(".pf3_4 img").attr("src","images/md4.png");
            $('area').css('cursor', 'none');
            $('.cursor').removeClass('cursor-grow') 
        });
    });

 });

@mattiaaccornero

Refer to mattiaaccornero's article