Results 1 to 3 of 3

Thread: Simple Image Panner And Zoomer v1.1 - How to center the magnify buttons.

  1. #1
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Simple Image Panner And Zoomer v1.1 - How to center the magnify buttons.

    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

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    at the top of the script

    Code:
    	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

    Code:
    	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

    Code:
    	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]]
    		})
    	}
    Last edited by vwphillips; 09-08-2013 at 05:50 PM.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Resolved - Centered Magnify Icons

    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

Similar Threads

  1. Simple Image Panner and Zoomer v1.1
    By quadrant in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 03-03-2013, 11:19 AM
  2. Simple Image Panner and Zoomer starting position
    By cippall in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 03-21-2012, 07:54 AM
  3. Simple Image Panner and Zoomer
    By toritobravo in forum Dynamic Drive scripts help
    Replies: 8
    Last Post: 11-10-2011, 10:51 AM
  4. Simple Image Panner and Zoomer
    By JoeDaStudd in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-25-2011, 02:50 PM
  5. Simple Image Panner & Zoomer
    By anand in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-26-2010, 09:41 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •