Zoom in and out using Divs instead of images

[CGordon]

1) Script Title: Imagepanner.js

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/imagepanner.htm

3) Describe problem: Can this tool be used with DIVS as plus and minus icons?

Currently we have (which works great):

<img src="/Content/productdetails/zoom_in.png" width="17" height="16" id="zoom_in" title="Zoom In">

But would like to do something like this:

<div class="svg-container plus" id="zoom_in" title="Zoom In">
<use xlink:href="#icon-plus"></use>
</div>


Please let me know if this is possible. Or if there is a version out there of this tool that is already setup to use, for example the click events of a div.

This line makes me think it's not easily done.

magnifyicons: ['/Content/productdetails/zoom_in.png', '/Content/productdetails/zoom_out.png', 17, 16], //set path to zoom in/out images, plus their dimensions

4) Also, does this tool work on mobile phones from within the browser? How responsive is this tool when the browser is re-sized.

Please help. Thank so much, we've been using this tool for years and love it. I'd like to keep using it, but our new UI uses divs to display the zoom in and zoom out buttons. Thank you!

[ddadmin]

The script isn't mobile functional at the moment, no, but it's a good reminder there are still scripts that need to be updated on that front. Expect the updated script by the end of this week or start of the next. I'll address your other question then as well.

[ddadmin]

Ok, script has just been updated to v1.2, which adds mobile support. Just used the updated .js file listed on the script page, and also, add the following CSS rule to your existing style sheet to properly render the magnifying controls, which can now be any arbitrary HTML:


.pancontainer .zoomcontrols{ /* default CSS class for magnify controls within container */
position:absolute;
width: 30px;
height: 30px;
background: #eee;
border: 1px solid gray;
}

[CGordon]

HEy! Thanks for the fast response!

This definitely helps, but I'm still faced with issues regarding switching from using magnify images, to just using divs clicks.

Here's my markup:

<div class="svg-container plus" id="zoom_in" title="Zoom In">
<svg viewbox="0 0 100 100" preserveaspectratio="xMinYMin meet">
<use xlink:href="#icon-plus">
</use>
</svg>
</div>
<div class="svg-container minus" id="zoom_out" title="Zoom Out" >
<svg viewbox="0 0 100 100" preserveaspectratio="xMinYMin meet">
<use xlink:href="#icon-minus">
</use>
</svg>
</div>
</div>


I'm trying to replace this with this:
var $zoomimages = $(magnifyicons.join(''))
with
var $zoomimages = $('#zoom_in, #zoom_out')

But this has strange results.

Any suggestions would be amazing, thanks again!