CODEWITHSUNDEEP
javascriptjqueryimagejquery-plugins
Sisir
Sisir

Reputation: 2816

Product Image Zooming with multiple layered Image

Scenario:

Problem:

Now what I want is to implement product zoom functionality into this. All jquery plugin I have found so far is based on single image.

How to I implement the image zoom functionality that doesn't take a single image to zoom it but perhaps the whole container of stacked images?

[edit]

What I have tried so far:

I have tried Anything Zoomer jQuery Plugin but it didn't work. You can see it here. The code I used to implement is below.

HTML

<div id="image-canvas">
        <div class="small">
            <div data-filter="filter1" class="layer layer1"><img alt="smaller" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/rohr-66dddd-266x400.png"></div>
            <div data-filter="filter2" class="layer layer2"><img alt="smaller" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/ergo-griff-000000-266x400.png">/div>
        </div>

        <div class="large">
            <div data-filter="filter1" class="layer layer1"><img alt="larger" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/rohr-66dddd.png"></div>
            <div data-filter="filter2" class="layer layer2"><img alt="larger" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/ergo-griff-000000.png"></div>
        </div>
    </div>

JS

$("#image-canvas").anythingZoomer({
         smallArea   : 'small',
         largeArea   : 'large',
});

Note:

Transparent PNG's are absolute positioned.

Upvotes: 3

Views: 1894

Answers (1)

dchun
dchun

Reputation: 1

You can use the panzoom library.

Include it in your header and add a div with an id that you can later reference with the panzoom functions.

HTML

<div id="panzoom">
  <img src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/rohr-66dddd-266x400.png">
  <img src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/ergo-griff-000000-266x400.png">
</div>

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

jQuery

$('#panzoom').panzoom({
  $zoomIn: $(".zoom-in"),
  $zoomOut: $(".zoom-out"),
  $zoomRange: $(".zoom-range")
});

Upvotes: 1

Related Questions