Steve_B
09-08-2013, 03:27 PM
Simple Image Panner And Zoomer v1.1 - How to center the magnify buttons.
I would like to horizontal center the +/- magnify buttons in the pancontainer div (they are on the lower right of the div by default). I was hoping that someone could tell me what to modify in the imagepanner.js file. - Thanks SB
vwphillips
09-08-2013, 04:41 PM
at the top of the script
magnifyicons: ['magnify.gif','magnify2.gif', 24,23,200,5], //set path to zoom in/out images, plus their dimensions and optional left/top
and modify this function
zoomfunct:function($, $img, s){
var magnifyicons=this.magnifyicons
var $zoomimages=$('<img src="'+magnifyicons[0]+'" /><img src="'+magnifyicons[1]+'" />')
.css({width:magnifyicons[2], height:magnifyicons[3], cursor:'pointer', zIndex:1000, position:'absolute',
top:typeof(magnifyicons[5])=='number'?magnifyicons[5]:s.wrappersize[1]-magnifyicons[3]-1, left:typeof(magnifyicons[4])=='number'?magnifyicons[4]:s.wrappersize[0]-magnifyicons[2]-3, opacity:0.7
})
.attr("title", "Zoom Out")
.appendTo(s.$pancontainer)
$zoomimages.eq(0).css({left:parseInt($zoomimages.eq(0).css('left'))-magnifyicons[2]-3, opacity:1}) //position "zoom in" image
.attr("title", "Zoom In")
$zoomimages.click(function(e){ //assign click behavior to zoom images
var $zimg=$(this) //reference image clicked on
var curzoom=s.curzoom //get current zoom level
var zoomtype=($zimg.attr("title").indexOf("In")!=-1)? "in" : "out"
if (zoomtype=="in" && s.curzoom==ddimagepanner.maxzoom || zoomtype=="out" && s.curzoom==1) //exit if user at either ends of magnify levels
return
var basepos=[s.pos[0]/curzoom, s.pos[1]/curzoom]
var newzoom=(zoomtype=="out")? Math.max(1, curzoom-1) : Math.min(ddimagepanner.maxzoom, curzoom+1) //get new zoom level
$zoomimages.css("opacity", 1)
if (newzoom==1) //if zoom level is 1x, dim "zoom out" image
$zoomimages.eq(1).css("opacity", 0.7)
else if (newzoom==ddimagepanner.maxzoom) //if zoom level is max level, dim "zoom in" image
$zoomimages.eq(0).css("opacity", 0.7)
clearTimeout(s.statustimer)
s.$statusdiv.html(newzoom+"x Magnify").show() //show current zoom status/level
var nd=[s.oimagesize[0]*newzoom, s.oimagesize[1]*newzoom]
var newpos=[basepos[0]*newzoom, basepos[1]*newzoom]
newpos=[(zoomtype=="in" && s.wrappersize[0]>s.imagesize[0] || zoomtype=="out" && s.wrappersize[0]>nd[0])? s.wrappersize[0]/2-nd[0]/2 : Math.max(-nd[0]+s.wrappersize[0], newpos[0]),
(zoomtype=="in" && s.wrappersize[1]>s.imagesize[1] || zoomtype=="out" && s.wrappersize[1]>nd[1])? s.wrappersize[1]/2-nd[1]/2 : Math.max(-nd[1]+s.wrappersize[1], newpos[1])]
$img.animate({width:nd[0], height:nd[1], left:newpos[0], top:newpos[1]}, function(){
s.statustimer=setTimeout(function(){s.$statusdiv.hide()}, 500)
})
s.imagesize=nd
s.curzoom=newzoom
s.pos=[newpos[0], newpos[1]]
})
}
or just
zoomfunct:function($, $img, s){
var magnifyicons=this.magnifyicons
var $zoomimages=$('<img src="'+magnifyicons[0]+'" /><img src="'+magnifyicons[1]+'" />')
.css({width:magnifyicons[2], height:magnifyicons[3], cursor:'pointer', zIndex:1000, position:'absolute',
top:s.wrappersize[1]-magnifyicons[3]-1,left:s.wrappersize[0]/2, opacity:0.7
})
.attr("title", "Zoom Out")
.appendTo(s.$pancontainer)
$zoomimages.eq(0).css({left:parseInt($zoomimages.eq(0).css('left'))-magnifyicons[2]-3, opacity:1}) //position "zoom in" image
.attr("title", "Zoom In")
$zoomimages.click(function(e){ //assign click behavior to zoom images
var $zimg=$(this) //reference image clicked on
var curzoom=s.curzoom //get current zoom level
var zoomtype=($zimg.attr("title").indexOf("In")!=-1)? "in" : "out"
if (zoomtype=="in" && s.curzoom==ddimagepanner.maxzoom || zoomtype=="out" && s.curzoom==1) //exit if user at either ends of magnify levels
return
var basepos=[s.pos[0]/curzoom, s.pos[1]/curzoom]
var newzoom=(zoomtype=="out")? Math.max(1, curzoom-1) : Math.min(ddimagepanner.maxzoom, curzoom+1) //get new zoom level
$zoomimages.css("opacity", 1)
if (newzoom==1) //if zoom level is 1x, dim "zoom out" image
$zoomimages.eq(1).css("opacity", 0.7)
else if (newzoom==ddimagepanner.maxzoom) //if zoom level is max level, dim "zoom in" image
$zoomimages.eq(0).css("opacity", 0.7)
clearTimeout(s.statustimer)
s.$statusdiv.html(newzoom+"x Magnify").show() //show current zoom status/level
var nd=[s.oimagesize[0]*newzoom, s.oimagesize[1]*newzoom]
var newpos=[basepos[0]*newzoom, basepos[1]*newzoom]
newpos=[(zoomtype=="in" && s.wrappersize[0]>s.imagesize[0] || zoomtype=="out" && s.wrappersize[0]>nd[0])? s.wrappersize[0]/2-nd[0]/2 : Math.max(-nd[0]+s.wrappersize[0], newpos[0]),
(zoomtype=="in" && s.wrappersize[1]>s.imagesize[1] || zoomtype=="out" && s.wrappersize[1]>nd[1])? s.wrappersize[1]/2-nd[1]/2 : Math.max(-nd[1]+s.wrappersize[1], newpos[1])]
$img.animate({width:nd[0], height:nd[1], left:newpos[0], top:newpos[1]}, function(){
s.statustimer=setTimeout(function(){s.$statusdiv.hide()}, 500)
})
s.imagesize=nd
s.curzoom=newzoom
s.pos=[newpos[0], newpos[1]]
})
}
Steve_B
09-09-2013, 03:41 PM
Thanks Vic! Your second option with the shorter code:
top:s.wrappersize[1]-magnifyicons[3]-1,left:s.wrappersize[0]/2, opacity:0.7
worked perfectly. The magnify icons are centered horizontally at the bottom of the viewer. Just what I needed.
Thanks again,
-Steve
Powered by vBulletin® Version 4.2.2 Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.