CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sygon
Sygon

Reputation: 222

jQuery panzoom scale all elements

I'm using jQuery panzoom to zoom an image and some div elements. This works generally but the elements positioned on top of the image don't stay in their original locations. Is there anyway to keep the div elements where they were whilst being scaled?

JSFiddle: https://jsfiddle.net/828wu2dy/

HTML:

<section id="inverted-contain">
    <div class="panzoom-elements">
        <div class="item item1">ITEM 1</div>
        <div class="item item2">ITEM 2</div>
        <div class="panzoom">
            <img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg">
        </div>              
    </div>

    <div class="buttons">
        <button class="zoom-in">Zoom In</button>
        <button class="zoom-out">Zoom Out</button>
        <input type="range" class="zoom-range">
        <button class="reset">Reset</button>
    </div>
</section>

JS:

(function() {
    var $section = $('#inverted-contain');
    $section.find('.panzoom').panzoom({
        $zoomIn: $section.find(".zoom-in"),
        $zoomOut: $section.find(".zoom-out"),
        $zoomRange: $section.find(".zoom-range"),
        $reset: $section.find(".reset"),
        $set: $section.find('.panzoom-elements > div'),
        startTransform: 'scale(0)',
        increment: 0.1,
        minScale: 1,
        maxScale: 2,
        contain: 'invert'    
    }).panzoom('zoom');
})();

CSS:

.panzoom-elements {
    width: 50%;
    height: 400px;
}

.item {
    position: absolute;
    z-index: 10;
}

.item.item1 {
    color: white;
    background: black;
    width:50px;
    height:50px;
    top: 300px;
    left: 100px;
}

.item.item2 {
    color: white;
    background: black;
    width:50px;
    height:50px;
    top: 200px;
    left: 150px;
}

The other problem is that it also doesn't drag horizontally.

I've tried everything I can think of.

Upvotes: 2

Views: 2763

Answers (1)

Jaiden Snow
Jaiden Snow

Reputation: 852

Part 1:

To fix your 'item' problem - try putting 'item' elements on one level with 'img' - I mean put them inside div class='panzoom'.

Works for me. ^ ^

<section id="inverted-contain">
    <div class="panzoom-elements">
        <div class="panzoom">
            <div class="item item1">ITEM 1</div>
            <div class="item item2">ITEM 2</div>
            <img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg">
        </div>
    </div>

    <div class="buttons">
        <button class="zoom-in">Zoom In</button>
        <button class="zoom-out">Zoom Out</button>
        <input type="range" class="zoom-range">
        <button class="reset">Reset</button>
    </div>
</section>

The method of thought that led me to this answer: while learning panzoom documentation for API, and examining your fiddle, I found that 'img' or anything that could be seen as direct selector to it (I mean like $('.panzoom').child().first() is nowhere mentioned in your script. That means that most probably img is zooming in/out not by itself. What I thought next - it seem that it's parent is changing. That would mean that you need to put your items inside of that changing space - it is the most logical way to handle it... I tried to test that idea - and it worked.

Part 2:

The other problem is that it also doesn't drag horizontally.

Add this to your CSS

.panzoom{ width: 1920px;}

This is the size of the image. Works for me. Perhaps you also could add to .panzoom height of image. It is not required in your case where image is horisontal but it could matter when image is vertical.

Upvotes: 3

Related Questions