As the title suggests, I’m trying to hover 3x images over certain coordinates on a background image (which is parallax), and for these images to remain in their locations whilst the browser window is resized.

I’ve got the background image in place, and am able to see the images on page, but regardless of what parameters I enter in, the images remain in the same location.

Here’s the JS:

// The world map background image
var image = { width: 2560, height: 1250 };

// The coordinates of the images
var target1 = { x: 150, y: 50 };
var target2 = { x: 200, y: 100 };
var target3 = { x: 250, y: 150 };

// The images themselves
var pointer1 = jQuery('.basingstoke-img');
var pointer2 = jQuery('.hongkong-img');
var pointer3 = jQuery('.romania-img');

// On Document.ready and Window.Resize, call updatePointer
jQuery(document).ready(updatePointer);
jQuery(window).resize(updatePointer);

function updatePointer() {
// Find current window width & height.
    var windowWidth = jQuery(window).width();
    var windowHeight = jQuery(window).height();

// Set X & Y scales based off of window / image calulation.
    var xScale = windowWidth / image.width;
    var yScale = windowHeight / image.height;
    var scale;
    var yOffset = 0;
    var xOffset = 0;


    if (xScale > yScale) {
        // The image fits perfectly in x axis, stretched in y
        scale = xScale;
        yOffset = (windowHeight - (image.height * scale)) / 2;
    } else {
        // The image fits perfectly in y axis, stretched in x
        scale = yScale;
        xOffset = (windowWidth - (image.width * scale)) / 2;
    }

// Move images based off of above calculation.
    pointer1.css('top', (target1.y) * scale + yOffset);
    pointer1.css('left', (target1.x) * scale + xOffset);

    pointer2.css('top', (target2.y) * scale + yOffset);
    pointer2.css('left', (target2.x) * scale + xOffset);

    pointer3.css('top', (target3.y) * scale + yOffset);
    pointer3.css('left', (target3.x) * scale + xOffset);
}

And the CSS:

    background:url(/wp-content/uploads/2017/04/shutterstock_108300506.png) no-repeat center center fixed;
    -webkit-background-size: 50%;
    -moz-background-size: 50%;
    -o-background-size: 50%;
    background-size: 50%;
     width: 100vw;
     height: 80vh;
}

 .basingstoke-img img, .hongkong-img img, .romania-img img {
    margin-left:-10px;
    margin-top:-10px;
    max-width: 5vw;
    position:relative;
}

Read more here: Dynamically moving images on a background image, which relocate during browser resize


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: