Simple Image Panner and Zoomer starting position

**cippall** · 09-15-2011, 10:03 PM

1) Script Title: Simple Image Panner and Zoomer v1.1

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...imagepanner.js
3) Describe problem: How can i get the images to be positioned to the bottom left corner?

**jscheuer1** · 09-16-2011, 02:29 AM

Replace the init function in the imagepanner.js file with this one:

Code:

	init:function($, $img, options){
		var s=options
		s.imagesize=[$img.width(), $img.height()]
		s.oimagesize=[$img.width(), $img.height()] //always remember image's original size
		s.pos=(s.pos=="center")? [-(s.imagesize[0]/2-s.wrappersize[0]/2), -(s.imagesize[1]/2-s.wrappersize[1]/2)] :
			s.pos=='botleft'? [0, -(s.imagesize[1]-s.wrappersize[1])] :
			[0, 0] //initial coords of image
		s.pos=[Math.floor(s.pos[0]), Math.floor(s.pos[1])]
		$img.css({position:'absolute', left:s.pos[0], top:s.pos[1]})
		if (s.canzoom=="yes"){ //enable image zooming?
			s.dragcheck={h: (s.wrappersize[0]>s.imagesize[0])? false:true, v:(s.wrappersize[1]>s.imagesize[1])? false:true} //check if image should be draggable horizon and vertically
			s.$statusdiv=$('<div style="position:absolute;color:white;background:#353535;padding:2px 10px;font-size:12px;visibility:hidden">1x Magnify</div>').appendTo(s.$pancontainer) //create DIV to show current magnify level
			s.$statusdiv.css({left:0, top:s.wrappersize[1]-s.$statusdiv.outerHeight(), display:'none', visibility:'visible'})
			this.zoomfunct($, $img, s)
		}
		this.dragimage($, $img, s)
	},

Use botleft for the orient:

Code:

<div class="pancontainer" data-orient="botleft" data-canzoom="yes" style="width:400px; height:300px;">
<img src="http://i44.tinypic.com/1hezvm.jpg" style="width:700px; height:525px" />
</div>

**hemant16apr** · 03-20-2012, 12:40 PM

Hi!

I am wanted to achieve: (see attachment for the exact idea)

(1) Magnify Icons not to be there on the images. Rather in a separate DIV
(2) Requirement is to have two button or hyperlinks on a navigation bar, with names 'Zoom-In' and 'Zoom-out'. Below the navigation bar, an image display area exists that shows the current image, based on pagination.
(3) These two buttons or hyperlinks (Zoom-In' and 'Zoom-out') should be linked to the image below in a separate display area

Thanks in advance for your help!

**vwphillips** · 03-20-2012, 03:34 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">

/*Default CSS for pan containers*/
.pancontainer{
position:relative; /*keep this intact*/
overflow:hidden; /*keep this intact*/
width:300px;
height:300px;
border:1px solid black;

}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" >

/* Simple Image Panner and Zoomer (March 11th, 10)
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/

// v1.1 (March 25th, 10): Updated with ability to zoom in/out of image

jQuery.noConflict()

var ddimagepanner={

	magnifyicons: ['magnify.gif','magnify2.gif', 24,23], //set path to zoom in/out images, plus their dimensions
	maxzoom: 4, //set maximum zoom level (from 1x)

	init:function($, $img, options){
		var s=options,obj=document.getElementById(s.img);
    if (obj){
     ddimagepanner[s.img]=[$, $img, s];
     s.img=obj;
   }
  	s.imagesize=[$img.width(), $img.height()]
		s.oimagesize=[$img.width(), $img.height()] //always remember image's original size
		s.pos=(s.pos=="center")? [-(s.imagesize[0]/2-s.wrappersize[0]/2), -(s.imagesize[1]/2-s.wrappersize[1]/2)] : [0, 0] //initial coords of image
		s.pos=[Math.floor(s.pos[0]), Math.floor(s.pos[1])]
		$img.css({position:'absolute', left:s.pos[0], top:s.pos[1]})
		if (s.canzoom=="yes"){ //enable image zooming?
			s.dragcheck={h: (s.wrappersize[0]>s.imagesize[0])? false:true, v:(s.wrappersize[1]>s.imagesize[1])? false:true} //check if image should be draggable horizon and vertically
			s.$statusdiv=$('<div style="position:absolute;color:white;background:#353535;padding:2px 10px;font-size:12px;visibility:hidden">1x Magnify</div>').appendTo(s.$pancontainer) //create DIV to show current magnify level
			s.$statusdiv.css({left:0, top:s.wrappersize[1]-s.$statusdiv.outerHeight(), display:'none', visibility:'visible'})
			this.zoomfunct($, $img, s)
		}
		this.dragimage($, $img, s)
	},

	Swap:function(id,src){
     var oop=ddimagepanner[id];
     if (oop){
      oop[2].img.src=src;
      var s=oop[2],newzoom=1,basepos=[s.pos[0]/s.curzoom, s.pos[1]/s.curzoom],nd=[s.oimagesize[0]*newzoom, s.oimagesize[1]*newzoom],newpos=[basepos[0]*newzoom, basepos[1]*newzoom]
	  oop[1].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]]
     }
	},

    dragimage:function($, $img, s){
		$img.mousedown(function(e){
			s.pos=[parseInt($img.css('left')), parseInt($img.css('top'))]
			var xypos=[e.clientX, e.clientY]
			$img.bind('mousemove.dragstart', function(e){
				var pos=s.pos, imagesize=s.imagesize, wrappersize=s.wrappersize
				var dx=e.clientX-xypos[0] //distance to move horizontally
				var dy=e.clientY-xypos[1] //vertically
				s.dragcheck={h: (wrappersize[0]>imagesize[0])? false:true, v:(wrappersize[1]>imagesize[1])? false:true}
				if (s.dragcheck.h==true) //allow dragging horizontally?
					var newx=(dx>0)? Math.min(0, pos[0]+dx) : Math.max(-imagesize[0]+wrappersize[0], pos[0]+dx) //Set horizonal bonds. dx>0 indicates drag right versus left
				if (s.dragcheck.v==true) //allow dragging vertically?
					var newy=(dy>0)? Math.min(0, s.pos[1]+dy) : Math.max(-imagesize[1]+wrappersize[1], pos[1]+dy) //Set vertical bonds. dy>0 indicates drag downwards versus up
				$img.css({left:(typeof newx!="undefined")? newx : pos[0], top:(typeof newy!="undefined")? newy : pos[1]})
				return false //cancel default drag action
			})
			return false //cancel default drag action
		})
		$(document).bind('mouseup', function(e){
			$img.unbind('mousemove.dragstart')
		})
	},

	zoomfunct:function($, $img, s){
        var obj=document.getElementById(s.zoomin);
        if (obj){
          obj.title='Zoom In'
          obj.onmouseup=function(e){
			var $zimg=$(this) //reference image clicked on
			var curzoom=s.curzoom //get current zoom level
			var zoomtype="in"
			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
	    	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]]
		}
       }
        var obj=document.getElementById(s.zoomout);
        if (obj){
          obj.title='Zoom Out'
          obj.onmouseup=function(e){
			var $zimg=$(this) //reference image clicked on
			var curzoom=s.curzoom //get current zoom level
			var zoomtype="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
	    	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]]
		}
       }
}

}


jQuery.fn.imgmover=function(options){
	var $=jQuery
	return this.each(function(){ //return jQuery obj
		if (this.tagName!="IMG")
			return true //skip to next matched element
		var $imgref=$(this)
		if (parseInt(this.style.width)>0 && parseInt(this.style.height)>0) //if image has explicit CSS width/height defined
			ddimagepanner.init($, $imgref, options)
		else if (this.complete){ //account for IE not firing image.onload
			ddimagepanner.init($, $imgref, options)
		}
		else{
			$imgref.bind('load', function(){
				ddimagepanner.init($, $imgref, options)
			})
		}
	})
}


jQuery(document).ready(function($){ //By default look for DIVs with class="pancontainer"
	var $pancontainer=$('div.pancontainer')
	$pancontainer.each(function(){
		var $this=$(this).css({position:'relative', overflow:'hidden', cursor:'move'})
		var $img=$this.find('img:eq(0)') //image to pan
		var options={$pancontainer:$this, pos:$this.attr('data-orient'), curzoom:1,img:$this.attr('data-imageid'), zoomin:$this.attr('data-zoomin'), zoomout:$this.attr('data-zoomout'), canzoom:$this.attr('data-canzoom'), wrappersize:[$this.width(), $this.height()]}
	$img.imgmover(options)
	})
})
</script></head>

<body>

<input id="z1" type="button" name="" value="Zoom In" />
<input id="z2" type="button" name="" value="Zoom Out" />
<input  type="button" name="" value="Swap" onmouseup="ddimagepanner.Swap('img1','http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg');" />
<div class="pancontainer" data-orient="center" data-canzoom="yes" data-zoomin="z1"  data-zoomout="z2" data-imageid="img1" style="width:400px; height:300px;">
<img id="img1" src="http://i44.tinypic.com/1hezvm.jpg" style="width:700px; height:525px" />
</div>
</body>

</html>

**hemant16apr** · 03-21-2012, 06:54 AM

Thanks so much, I truly appreciate your prompt responsel.

I see that the code in my JSP file is like this:

<ul class="thumbs noscript" />

<li><a class="thumb" id="img0" href="images/flower1.jpg" title="flower1">Flower
#1</a></li>

<li><a class="thumb" id="img1" href="images/flower2.jpg" title="flower2">Flower
#2</a></li>

<li><a class="thumb" id="img2" href="images/flower3.jpg" title="flower3">Flower
#3</a></li>

<li><a class="thumb" id="img3" href="images/flower4.jpg" title="flower4">Flower
#4</a></li>

<li><a class="thumb" id="img4" href="images/book.jpg" title="book">Book</a></li>
</ul>

By using the image ID here, the code does not work. I am not sure what could be the problem. Maybe because the images are not bound inside the <img> tag?

Require your guidance. Thanks again!

Thread: Simple Image Panner and Zoomer starting position

Thread Tools

Search Thread

Simple Image Panner and Zoomer starting position

The Following User Says Thank You to jscheuer1 For This Useful Post:

Zoom Buttons on top on a navigation bar instead of Magnify Icon on the image

The Following User Says Thank You to vwphillips For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions