138 lines
6.3 KiB
JavaScript
138 lines
6.3 KiB
JavaScript
/* jQuery Image Magnify script v1.1
|
||
* This notice must stay intact for usage
|
||
* Author: Dynamic Drive at https://www.dynamicdrive.com/
|
||
* Visit https://www.dynamicdrive.com/ for full source code
|
||
|
||
* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
|
||
* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)
|
||
*/
|
||
|
||
jQuery.noConflict()
|
||
|
||
jQuery.imageMagnify={
|
||
dsettings: {
|
||
magnifyby: 5, //умолчанию увеличение фактора увеличенное изображение
|
||
duration: 500, //по умолчанию продолжительность анимации, в мсек
|
||
imgopacity: 0.2 //opacify оригинального изображения, когда увеличенное изображение накладывается он
|
||
},
|
||
cursorcss: 'url(https://new-combats.com/magnify.cur), -moz-zoom-in', //Значение атрибута CSS в "Курсор", в дополнение к исходному изображению
|
||
zIndexcounter: 100,
|
||
|
||
refreshoffsets:function($window, $target, warpshell){
|
||
var $offsets=$target.offset()
|
||
var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()}
|
||
warpshell.attrs.x=$offsets.left //update x position of original image relative to page
|
||
warpshell.attrs.y=$offsets.top
|
||
warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2
|
||
warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2
|
||
if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?
|
||
warpshell.newattrs.x=winattrs.x+5
|
||
}
|
||
else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?
|
||
warpshell.newattrs.x=winattrs.x+5
|
||
}
|
||
if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?
|
||
warpshell.newattrs.y=winattrs.y+5
|
||
}
|
||
},
|
||
|
||
magnify:function($, $target, options){
|
||
var setting={} //create blank object to store combined settings
|
||
var setting=jQuery.extend(setting, this.dsettings, options)
|
||
var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()}
|
||
var newattrs={}
|
||
newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby)
|
||
newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby)
|
||
$target.css('cursor', jQuery.imageMagnify.cursorcss)
|
||
if ($target.data('imgshell')){
|
||
$target.data('imgshell').$clone.remove()
|
||
$target.css({opacity:1}).unbind('click.magnify')
|
||
}
|
||
var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)
|
||
$clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with
|
||
$target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs})
|
||
$target.bind('click.magnify', function(e){ //action when original image is clicked on
|
||
var $this=$(this).css({opacity:setting.imgopacity})
|
||
var imageinfo=$this.data('imgshell')
|
||
jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
|
||
var $clone=imageinfo.$clone
|
||
$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'})
|
||
.animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
|
||
function(){ //callback function after warping is complete
|
||
//none added
|
||
}) //end animate
|
||
}) //end click
|
||
$clone.click(function(e){ //action when magnified image is clicked on
|
||
var $this=$(this)
|
||
var imageinfo=$this.data('$relatedtarget').data('imgshell')
|
||
jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images
|
||
$this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h}, setting.duration,
|
||
function(){
|
||
$this.hide()
|
||
$this.data('$relatedtarget').css({opacity:1}) //reveal original image
|
||
}) //end animate
|
||
}) //end click
|
||
}
|
||
};
|
||
|
||
jQuery.fn.imageMagnify=function(options){
|
||
var $=jQuery
|
||
return this.each(function(){ //return jQuery obj
|
||
var $imgref=$(this)
|
||
if (this.tagName!="IMG")
|
||
return true //skip to next matched element
|
||
if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined
|
||
jQuery.imageMagnify.magnify($, $imgref, options)
|
||
}
|
||
else if (this.complete){ //account for IE not firing image.onload
|
||
jQuery.imageMagnify.magnify($, $imgref, options)
|
||
}
|
||
else{
|
||
$(this).bind('load', function(){
|
||
jQuery.imageMagnify.magnify($, $imgref, options)
|
||
})
|
||
}
|
||
})
|
||
};
|
||
|
||
jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically
|
||
var $=jQuery
|
||
return this.each(function(){ //return jQuery obj
|
||
var $imgref=$(this)
|
||
if (this.tagName!="IMG")
|
||
return true //skip to next matched element
|
||
|
||
})
|
||
|
||
};
|
||
|
||
|
||
//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs
|
||
//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image
|
||
|
||
jQuery(document).ready(function($){
|
||
var $targets=$('.magnify')
|
||
$targets.each(function(i){
|
||
var $target=$(this)
|
||
var options={}
|
||
if ($target.attr('data-magnifyto'))
|
||
options.magnifyto=parseFloat($target.attr('data-magnifyto'))
|
||
if ($target.attr('data-magnifyby'))
|
||
options.magnifyby=parseFloat($target.attr('data-magnifyby'))
|
||
if ($target.attr('data-magnifyduration'))
|
||
options.duration=parseInt($target.attr('data-magnifyduration'))
|
||
$target.imageMagnify(options)
|
||
})
|
||
var $triggers=$('a[rel^="magnify["]')
|
||
$triggers.each(function(i){
|
||
var $trigger=$(this)
|
||
var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'
|
||
$trigger.data('magnifyimageid', targetid)
|
||
$trigger.click(function(e){
|
||
$('#'+$(this).data('magnifyimageid')).trigger('click.magnify')
|
||
e.preventDefault()
|
||
})
|
||
})
|
||
})
|
||
|