Image Map not working outside first Tab on same Page

Question

I use many image maps to help our customers find their needed parts! They work without problems when they all have their own page! But if they are in a tab and that tab is not the first tab loaded, they don't work!

I suspect it has something to do with the calculation of the coordinates, since the image is not loaded at that point, so some information are missing!

And since i want the Map to be responsive i cant use fixed values for the Images

Just to clarify:

The image is loaded, but not placed correctly.
The areas work at the correct (missplaced) position, but the zoom function doesn't work because the image flies out of the frame
The image panner doesn't work either

Live Demo: https://www.outrun-team.de/traxxas-support-1-16-anleitungen-explosionszeichnungen just open 2nd or 3rd tab an u can see the Problem

What I need:

Help to make the maps work inside the tabs when the tab is open.

Code: All the code for the clickable image map with zoom function and image panner.

$(document).ready(function () {


    if ($('.pancontainer') && $('.pancontainer').length > 0) {
        panExplosion();
        calcCoorsToImgWidth();
    }

    $('.cart-summary .lpa-button').css('display','none');

});





var calcCoorsToImgWidth = function () {

    $("map.exploded-view-map area").map(function () {
        var imgWidth = $('.pancontainer img[usemap="#exploded_map1"]').width(),
                imgWidthReference = 940,
                imgWidthRatio = imgWidthReference / imgWidth,
                coordsArr = $(this).attr('data-coords');

        coordsArr = coordsArr.split(',');

        for (var i = 0; i < coordsArr.length; i++) {
            coordsArr[i] = parseInt(parseInt(coordsArr[i]) / imgWidthRatio);
        }

        $(this).attr('data-coords', coordsArr.join(',')).attr('coords', coordsArr.join(','));
    });
};

function explodedPartPopup(art_number) {

    

    
    window.open('navi.php?qs=' + art_number + '', '_blank');

}

var ddimagepanner = {

    
    magnifyicons: [', ', ''],
    maxzoom: 4, 

    init: function ($, $img, options) {
        var s = options
        s.imagesize = [$img.width(), $img.height()]
        s.oimagesize = [$img.width(), $img.height()] 
        s.pos = (s.pos == "center") ? [-(s.imagesize[0] / 2 - s.wrappersize[0] / 2), -(s.imagesize[1] / 2 - s.wrappersize[1] / 2)] : [0, 0] 
        s.pos = [Math.floor(s.pos[0]), Math.floor(s.pos[1])]
        $img.css({position: 'absolute', left: s.pos[0], top: s.pos[1]})
        if (s.canzoom == "yes") { 
            s.dragcheck = {h: (s.wrappersize[0] > s.imagesize[0]) ? false : true, v: (s.wrappersize[1] > s.imagesize[1]) ? false : true} 
            s.$statusdiv = $('1x Magnify').appendTo(s.$pancontainer) 
            s.$statusdiv.css({left: 0, top: s.wrappersize[1] - s.$statusdiv.outerHeight(), display: 'none', visibility: 'visible'})
            this.zoomfunct($, $img, s)
        }
        this.dragimage($, $img, s)
    },

    dragimage: function ($, $img, s) {
        $img.bind('mousedown touchstart', function (e) {
            var e = (e.type.indexOf('touch') != -1) ? e.originalEvent.changedTouches[0] : e
            s.pos = [parseInt($img.css('left')), parseInt($img.css('top'))]
            var xypos = [e.clientX, e.clientY]
            $img.bind('mousemove.dragstart touchmove.dragstart', function (e) {
                var e = (e.type.indexOf('touch') != '-1') ? e.originalEvent.changedTouches[0] : e
                var pos = s.pos, imagesize = s.imagesize, wrappersize = s.wrappersize
                var dx = e.clientX - xypos[0] 
                var dy = e.clientY - xypos[1] 
                s.dragcheck = {h: (wrappersize[0] > imagesize[0]) ? false : true, v: (wrappersize[1] > imagesize[1]) ? false : true}
                if (s.dragcheck.h == true) 
                    var newx = (dx > 0) ? Math.min(0, pos[0] + dx) : Math.max(-imagesize[0] + wrappersize[0], pos[0] + dx) 
                if (s.dragcheck.v == true) 
                    var newy = (dy > 0) ? Math.min(0, s.pos[1] + dy) : Math.max(-imagesize[1] + wrappersize[1], pos[1] + dy) 
                $img.css({left: (typeof newx != "undefined") ? newx : pos[0], top: (typeof newy != "undefined") ? newy : pos[1]})
                return false 
            })
            return false 
        })
        jQuery(document).bind('mouseup touchend', function (e) {
            var e = (e.type.indexOf('touch') != -1) ? e.originalEvent.changedTouches[0] : e
            $img.unbind('mousemove.dragstart touchmove.dragstart')
        })
    },

    zoomfunct: function ($, $img, s) {

        var magnifyicons = this.magnifyicons
        var $zoomimages = $(magnifyicons.join(''))
                .css({zIndex: 1000, cursor: 'pointer', opacity: 0.7})
                .attr("title", "Zoom Out")
                .appendTo(s.$pancontainer)
        $zoomimages.eq(2).css({opacity: 1})
                .attr("title", "Zoom In")
        $zoomimages.eq(0).css({opacity: 0.7})
                .attr("title", "Zoom Reset")

        $zoomimages.click(function (e) { 

            var $zimg = $(this) 
            var curzoom = s.curzoom 
            var zoomtype = ($zimg.attr("title").indexOf("In") != -1) ? "in" : "out"
            zoomtype = ($zimg.attr("title").indexOf("Reset") != -1) ? "reset" : zoomtype;

            if (zoomtype == "in" && s.curzoom == ddimagepanner.maxzoom || zoomtype == "out" && s.curzoom == 1) 
                return
            var basepos = [s.pos[0] / curzoom, s.pos[1] / curzoom]
            var newzoom = (zoomtype == "out") ? Math.max(1, curzoom - 1) : Math.min(ddimagepanner.maxzoom, curzoom + 1) 
            newzoom = (zoomtype == "reset") ? 1 : newzoom;

            $zoomimages.css("opacity", 1)
            if (newzoom == 1) { 
                $zoomimages.eq(3).css("opacity", 0.7);
                $zoomimages.eq(0).css("opacity", 0.7);
            } else if (newzoom == ddimagepanner.maxzoom) 
                $zoomimages.eq(2).css("opacity", 0.7)
            clearTimeout(s.statustimer)
            s.$statusdiv.html(newzoom + "x Zoom").show() 
            var nd = [s.oimagesize[0] * newzoom, s.oimagesize[1] * newzoom]
            var newpos = [basepos[0] * newzoom, basepos[1] * newzoom]
            newpos = [(zoomtype == "in" && s.wrappersize[0] > s.imagesize[0] || zoomtype == "out" && s.wrappersize[0] > nd[0]) ? s.wrappersize[0] / 2 - nd[0] / 2 : Math.max(-nd[0] + s.wrappersize[0], newpos[0]),
                (zoomtype == "in" && s.wrappersize[1] > s.imagesize[1] || zoomtype == "out" && s.wrappersize[1] > nd[1]) || zoomtype == "reset" ? s.wrappersize[1] / 2 - nd[1] / 2 : Math.max(-nd[1] + s.wrappersize[1], newpos[1])]
            $img.animate({width: nd[0], height: nd[1], left: newpos[0], top: newpos[1]}, function () {
                s.statustimer = setTimeout(function () {
                    s.$statusdiv.hide()
                }, 500)
            })
            s.imagesize = nd
            s.curzoom = newzoom
            s.pos = [newpos[0], newpos[1]]

            jQuery("area", $(this).parents('.pancontainer').siblings('.exploded-view-map')).each(function () {
                var pairs = jQuery(this).attr("data-coords").split(', ');
                for (var i = 0; i < pairs.length; i++) {
                    var nums = pairs[i].split(',');
                    for (var j = 0; j < nums.length; j++) {
                        nums[j] = ((parseFloat(nums[j])) * s.curzoom);
                    }
                    pairs[i] = nums.join(',');
                }
                jQuery(this).attr("coords", pairs.join(', '));
            });
        })
    }
}


jQuery.fn.imgmover = function (options) {
    var $ = jQuery
    return this.each(function () { 
        if (this.tagName != "IMG")
            return true 
        var $imgref = $(this)
        if (parseInt(this.style.width) > 0 && parseInt(this.style.height) > 0) 
            ddimagepanner.init($, $imgref, options)
        else if (this.complete) { 
            ddimagepanner.init($, $imgref, options)
        } else {
            $imgref.bind('load', function () {
                ddimagepanner.init($, $imgref, options)
            })
        }
    })
}
var panExplosion = function () {

    var $pancontainer = $('.pancontainer')
    $pancontainer.each(function () {
        var $this = $(this).css({
            position: 'relative',
            overflow: 'hidden',
            height: '675px'
        }) 

        var $img = $this.find('img:eq(0)') 
        $img.css({
            maxWidth: 'none',
            width: $this.width()
        });

        var options = {
            $pancontainer: $this,
            
            pos: $this.attr('data-orient'),
            
            curzoom: 1,
            canzoom: $this.attr('data-canzoom'),
            canzoom: 'yes',
            wrappersize: [$this.width(), $this.height()]
        }
        $img.imgmover(options)
    })

};


ajaxCall = function (urlAction, daten, callback) {

    $.ajax({
        type: 'POST',
        url: urlAction,
        dataType: 'json',
        data: daten,
        async: true,
        success: function (response) {
            callback(response);
        },
        error: function (xhr, thrownError) {
            console.log(xhr.status);
            console.log(thrownError);
        }
    });
};
function uniqueArray(value, index, self) {
    return self.indexOf(value) === index;
}

Some Map code Sample

user_17401185 · Answer

this did the trick!

s.imagesize = [$('.tab-content>.active .pancontainer img').width(), $('.tab-content>.active .pancontainer img').height()]

Image Map not working outside first Tab on same Page

1 Answers