jQuery how to scale image with markers

Question

I have this:

<style>
#pic_wrapper{
    display: block;
    position: relative;
    padding: 0;
}
#selected_picture img {
    width: 100%;
    height: auto;
}
.pin {
    display: none; 
    position: absolute; 
    height: 50px;
    width: 50px;
    padding: 0;
    margin: 0;
}
</style>

<div id="pic_wrapper">
    <div id="selected_picture">
        <img src="map.png" />
    </div>
</div>

and append markers to the image with:

<script type="text/javascript" charset="UTF-8">
$(function(){
    $('#selected_picture').on('click', function(e){
        offset = $('#selected_picture').offset();
        x = e.pageX - offset.left - 25;
        y = e.pageY - offset.top - 25;
        var pin = $('<div class="pin"><img class="pin-img" src="pin.png" /></div>');
        pin.uniqueId();
        $('#pic_wrapper').append(pin);
        pin.css('left', x).css('top', y).show();

I need to scale the #selected_picture together with all pins so that they remain at the same relative positions.

I found this example for text in a div: https://codepen.io/chriscoyier/pen/VvRoWy

But I can figure out how to apply the approach to my resizable picture with absolutely positioned pins on it.

Thank you for your help.

do you mean the 'e.pageX - offset.left - 25' should be a % of the screen width? — linuxoid, Jun 01 '18 at 13:46
And the pins are 'position: absolute' - they don't move with resizing — linuxoid, Jun 01 '18 at 13:52
That's fine, use `%` values for the `top` and `left` positions. — Rory McCrossan, Jun 01 '18 at 14:15
Also note that you aren't adding the `pin` element to the DOM at any point — Rory McCrossan, Jun 01 '18 at 14:19
sorry, forgot to copy the pin is actually appended (changed the code above) — linuxoid, Jun 01 '18 at 14:22

vicbyte · Accepted Answer · 2018-06-01T14:35:35.710

0

The idea here is simple, you calculate the percentage positions of the pin in relation to the image you are clicking. When you use position: absolute with percentage top/left values, it tells the browser to position the element at percentage of relative parent width/height, so once the parent dimensions change, your positions will automatically update as well.

$(function(){
    $('#selected_picture').on('click', function(e){
        x = ((e.offsetX) / $(this).width()) * 100 + "%";
        y = ((e.offsetY) / $(this).height()) * 100 + "%";
        var pin = $('<div class="pin"></div>');
        $('#pic_wrapper').append(pin);
        pin.css('left', x).css('top', y).show();
    })
});

#pic_wrapper{
    display: block;
    position: relative;
    padding: 0;
}
#selected_picture .map {
    display: block;
    background: green;
    width: 100%;
    height: 250px;
}
.pin {
    display: none; 
    position: absolute; 
    height: 50px;
    width: 50px;
    transform: translate(-50%, -50%);
    padding: 0;
    margin: 0;
    background: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pic_wrapper">
    <div id="selected_picture">
        <div class="map"></div>
    </div>
</div>

edited Jun 01 '18 at 14:35

answered Jun 01 '18 at 14:21

vicbyte

3,690
1
11
20

That sort of works, but the position changes with scaling. I need the pins to stay at exactly the same position relative to the image. I mean at the same spot of the image – linuxoid Jun 01 '18 at 14:28
@linuxoid Changed the code a little bit. Make sure your relative parent (`#pic_wrapper`) will be the same size as image, otherwise the positioning won't be correct. – vicbyte Jun 01 '18 at 14:36
They are supposed to move when you resize the image, because they are "attached" by center. So it will look as if they move, but the center will be in the same point. You can actually test it fairly easy - make the pins much smaller (like 5px or so) and you'll see that they are in the same spots. – vicbyte Jun 01 '18 at 14:47
Yep, you're right. Thank you very much for your help. They do all now move correctly. But I found that if I click on any, they become detached (the pins are draggable) from the move and always stay at the same spot. And how can I now calculate their new coordinates? What's the event, 'move'? – linuxoid Jun 01 '18 at 14:52
@linuxoid Are you sure some other code of yours isn't causing that behaviour? Because in the code i gave the `onclick` handler is not even fired for the `pins` (since they are outside of the `#selected_picture` element) – vicbyte Jun 01 '18 at 14:57
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/172254/discussion-between-linuxoid-and-vicbyte). – linuxoid Jun 01 '18 at 14:58

jQuery how to scale image with markers

1 Answers1