https://italiancook.ca/jquery.magnifier.js

1/* jQuery Image Magnify script v1.0
2* Last updated: July 13th, 2009. This notice must stay intact for usage 
3* Author: Dynamic Drive at http://www.dynamicdrive.com/
4* Visit http://www.dynamicdrive.com/ for full source code
5*/
6
7jQuery.noConflict()
8
9jQuery.imageMagnifier={
10	dsettings: {
11		magnifyby: 3, //default increase factor of enlarged image
12		duration: 500, //default duration of animation, in millisec
13		imgopacity: 0.2 //opacify of original image when enlarged image overlays it
14 	},
15	cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
16	zIndexcounter: 100,
17	imgshells: [],
18
19	refreshoffsets:function($window, $target, warpshell){
20		var $offsets=$target.offset()
21		var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()}
22		warpshell.attrs.x=$offsets.left //update x position of original image relative to page
23		warpshell.attrs.y=$offsets.top
24		warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2
25		warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2
26		if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?
27			warpshell.newattrs.x=winattrs.x+5	
28		}
29		else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?
30			warpshell.newattrs.x=winattrs.x+5
31		}
32		if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?
33			warpshell.newattrs.y=winattrs.y+5
34		}
35	},
36
37	magnify:function($, $target, options){
38		var setting={} //create blank object to store combined settings
39		var setting=jQuery.extend(setting, this.dsettings, options)
40		var effectpos=this.imgshells.length
41		var attrs={w:$target.outerWidth(), h:$target.outerHeight()}
42		var newattrs={w:Math.round(attrs.w*setting.magnifyby), h:Math.round(attrs.h*setting.magnifyby)}
43		$target.css('cursor', jQuery.imageMagnifier.cursorcss)
44		var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)
45		$target.add($clone).data('pos', effectpos) //save position of image
46		this.imgshells.push({$target:$target, $clone:$clone, attrs:attrs, newattrs:newattrs}) //remember info about this warp image instance
47		$target.bind('click.magnify', function(e){ //action when original image is clicked on
48			var $this=$(this).css({opacity:setting.imgopacity})
49			var imageinfo=jQuery.imageMagnifier.imgshells[$this.data('pos')]
50			jQuery.imageMagnifier.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
51			var $clone=imageinfo.$clone
52			$clone.stop().css({zIndex:++jQuery.imageMagnifier.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible'})

53			.animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
54			function(){ //callback function after warping is complete
55				//none added		
56			}) //end animate
57		}) //end click
58		$clone.click(function(e){ //action when magnified image is clicked on
59			var $this=$(this)
60			var imageinfo=jQuery.imageMagnifier.imgshells[$this.data('pos')]
61			jQuery.imageMagnifier.refreshoffsets($(window), imageinfo.$target, imageinfo) //refresh offset positions of original and warped images
62			$this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h},  setting.duration,
63			function(){
64				$this.hide()
65				imageinfo.$target.css({opacity:1}) //reveal original image
66			}) //end animate
67		}) //end click
68	}
69};
70
71jQuery.fn.imageMagnifier=function(options){
72	var $=jQuery
73	return this.each(function(){ //return jQuery obj
74		var $imgref=$(this)
75		if (this.tagName!="IMG")
76			return true //skip to next matched element
77		if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0){ //if image has explicit width/height attrs defined
78			jQuery.imageMagnifier.magnify($, $imgref, options)
79		}
80		else if (this.complete){ //account for IE not firing image.onload
81			jQuery.imageMagnifier.magnify($, $imgref, options)
82		}
83		else{
84			$(this).bind('load', function(){
85				jQuery.imageMagnifier.magnify($, $imgref, options)
86			})
87		}
88	})
89};
90
91//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs
92//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image
93
94jQuery(document).ready(function($){
95	var $targets=$('.magnify')
96	$targets.each(function(i){
97		var $target=$(this)
98		var options={}
99		if ($target.attr('data-magnifyby'))
100			options.magnifyby=parseFloat($target.attr('data-magnifyby'))
101		if ($target.attr('data-magnifyduration'))
102			options.duration=parseInt($target.attr('data-magnifyduration'))
103		$target.imageMagnifier(options)
104	})
105	var $triggers=$('a[rel^="magnify["]')
106	$triggers.each(function(i){
107		var $trigger=$(this)
108		var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'
109		$trigger.data('magnifyimageid', targetid)
110		$trigger.click(function(e){
111			$('#'+$(this).data('magnifyimageid')).trigger('click.magnify')
112			e.preventDefault()
113		})
114	})
115})