1/* jQuery Image Magnify script v1.1 2* 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* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels. 7* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4) 8*/ 9 10jQuery.noConflict() 11 12jQuery.imageMagnify={ 13 dsettings: { 14 magnifyby: 3, //default increase factor of enlarged image 15 duration: 500, //default duration of animation, in millisec 16 imgopacity: 0.2 //opacify of original image when enlarged image overlays it 17 }, 18 cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image 19 zIndexcounter: 100, 20 21 refreshoffsets:function($window, $target, warpshell){ 22 var $offsets=$target.offset() 23 var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()} 24 warpshell.attrs.x=$offsets.left //update x position of original image relative to page 25 warpshell.attrs.y=$offsets.top 26 warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2 27 warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2 28 if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left? 29 warpshell.newattrs.x=winattrs.x+5 30 } 31 else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right? 32 warpshell.newattrs.x=winattrs.x+5 33 } 34 if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top? 35 warpshell.newattrs.y=winattrs.y+5 36 } 37 }, 38 39 magnify:function($, $target, options){ 40 var setting={} //create blank object to store combined settings 41 var setting=jQuery.extend(setting, this.dsettings, options) 42 var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()} 43 var newattrs={} 44 newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby) 45 newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby) 46 $target.css('cursor', jQuery.imageMagnify.cursorcss) 47 if ($target.data('imgshell')){ 48 $target.data('imgshell').$clone.remove() 49 $target.css({opacity:1}).unbind('click.magnify') 50 } 51 var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body) 52 $clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with 53 $target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs}) 54 $target.bind('click.magnify', function(e){ //action when original image is clicked on 55 var $this=$(this).css({opacity:setting.imgopacity}) 56 var imageinfo=$this.data('imgshell') 57 jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images 58 var $clone=imageinfo.$clone 59 $clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'})
60 .animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration, 61 function(){ //callback function after warping is complete 62 //none added 63 }) //end animate 64 }) //end click 65 $clone.click(function(e){ //action when magnified image is clicked on 66 var $this=$(this) 67 var imageinfo=$this.data('$relatedtarget').data('imgshell') 68 jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images 69 $this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h}, setting.duration, 70 function(){ 71 $this.hide() 72 $this.data('$relatedtarget').css({opacity:1}) //reveal original image 73 }) //end animate 74 }) //end click 75 } 76}; 77 78jQuery.fn.imageMagnify=function(options){ 79 var $=jQuery 80 return this.each(function(){ //return jQuery obj 81 var $imgref=$(this) 82 if (this.tagName!="IMG") 83 return true //skip to next matched element 84 if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined 85 jQuery.imageMagnify.magnify($, $imgref, options) 86 } 87 else if (this.complete){ //account for IE not firing image.onload 88 jQuery.imageMagnify.magnify($, $imgref, options) 89 } 90 else{ 91 $(this).bind('load', function(){ 92 jQuery.imageMagnify.magnify($, $imgref, options) 93 }) 94 } 95 }) 96}; 97 98jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically 99 var $=jQuery 100 return this.each(function(){ //return jQuery obj 101 var $imgref=$(this) 102 if (this.tagName!="IMG") 103 return true //skip to next matched element 104 105 }) 106 107}; 108 109 110//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs 111//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image 112 113jQuery(document).ready(function($){ 114 var $targets=$('.magnify') 115 $targets.each(function(i){ 116 var $target=$(this) 117 var options={} 118 if ($target.attr('data-magnifyto')) 119 options.magnifyto=parseFloat($target.attr('data-magnifyto')) 120 if ($target.attr('data-magnifyby')) 121 options.magnifyby=parseFloat($target.attr('data-magnifyby')) 122 if ($target.attr('data-magnifyduration')) 123 options.duration=parseInt($target.attr('data-magnifyduration')) 124 $target.imageMagnify(options) 125 }) 126 var $triggers=$('a[rel^="magnify["]') 127 $triggers.each(function(i){ 128 var $trigger=$(this) 129 var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]' 130 $trigger.data('magnifyimageid', targetid) 131 $trigger.click(function(e){ 132 $('#'+$(this).data('magnifyimageid')).trigger('click.magnify') 133 e.preventDefault() 134 }) 135 }) 136}) 137
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.