Jquery图片缩放插件：elevatezoom.js

文章索引

示例

https://cdn.jsdelivr.net/npm/@oroinc/elevatezoom@3.0.81/jquery.elevatezoom.js

1	https://cdn.jsdelivr.net/npm/@oroinc/elevatezoom@3.0.81/jquery.elevatezoom.js

基本缩放

缩放适用于一张或两张图像。建议使用两张图像以使变焦效果最佳。缩放框的大部分设置都可以被覆盖。

<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

$("#zoom_01").elevateZoom();

$("#zoom_01").elevateZoom();

色调

您可以轻松设置缩放的色调，您可以将色调叠加的颜色和不透明度设置为任何值

<img id="zoom_02" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

$("#zoom_02").elevateZoom({tint:true, tintColour:'#F90', tintOpacity:0.5});

$("#zoom_02").elevateZoom({tint:true, tintColour:'#F90', tintOpacity:0.5});

画廊和灯箱

您可以将一组图像附加到缩放中。您也可以将画廊传递到灯箱新： imageCrossfade 选项将在缩放时同时提供淡入/淡出效果。

<img id="img_01" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>

<div id="gal1">
 
  <a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
    <img id="img_01" src="thumb/image1.jpg" />
  </a>

  <a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
    <img id="img_01" src="thumb/image2.jpg" />
  </a>

  <a href="#" data-image="small/image3.jpg" data-zoom-image="large/image3.jpg">
    <img id="img_01" src="thumb/image3.jpg" />
  </a>

  <a href="#" data-image="small/image4.jpg" data-zoom-image="large/image4.jpg">
    <img id="img_01" src="thumb/image4.jpg" />
  </a>

</div>

//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'}); 

//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {  
  var ez = $('#zoom_03').data('elevateZoom');	
	$.fancybox(ez.getGalleryList());
  return false;
});

</a>

</a>

</a>

</a>

</div>

//initiate the plugin and pass the id of the div containing gallery images

$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, loadingIcon: 'http://www.elevateweb.co.uk/spinner.gif'});

//pass the images to Fancybox

$("#zoom_03").bind("click", function(e) {

var ez = $('#zoom_03').data('elevateZoom');

$.fancybox(ez.getGalleryList());

return false;

});

/*set a border on the images to prevent shifting*/
 #gallery_01 img{border:2px solid white;}
 
 /*Change the colour*/
 .active img{border:2px solid #333 !important;}

/*set a border on the images to prevent shifting*/

#gallery_01 img{border:2px solid white;}

/*Change the colour*/

.active img{border:2px solid #333 !important;}

窗口位置

可以通过设置默认位置来定位窗口，然后使用 x 和 y 偏移来调整

您也可以将窗口定位到容器中

<img id="zoom_04a" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
<img id="zoom_04b" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
<img id="zoom_04c" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
<img id="zoom_04" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

$("#zoom_04a").elevateZoom({zoomWindowPosition: 1});
$("#zoom_04b").elevateZoom({zoomWindowPosition: 12});
$("#zoom_04c").elevateZoom({zoomWindowPosition: "demo-container", zoomWindowHeight: 200, zoomWindowWidth:200, borderSize: 0, easing:true});
$("#zoom_04d").elevateZoom({zoomWindowPosition: 1, zoomWindowOffetx: 10});

$("#zoom_04a").elevateZoom({zoomWindowPosition: 1});

$("#zoom_04b").elevateZoom({zoomWindowPosition: 12});

$("#zoom_04c").elevateZoom({zoomWindowPosition: "demo-container", zoomWindowHeight: 200, zoomWindowWidth:200, borderSize: 0, easing:true});

$("#zoom_04d").elevateZoom({zoomWindowPosition: 1, zoomWindowOffetx: 10});

内变焦

缩放可以放在图像内部

<img id="zoom_05" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

$("#zoom_05").elevateZoom({
  zoomType: "inner",
  cursor: "crosshair"
});

$("#zoom_05").elevateZoom({

zoomType: "inner",

cursor: "crosshair"

});

镜头变焦

您可以使用镜头变焦设置来“放大图像”。最少的图像已受到限制，因此它隐藏在图像下方。

<img id="zoom_07" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

$("#zoom_07").elevateZoom({
  zoomType	: "lens",
  lensShape : "round",
  lensSize  : 200
});

$("#zoom_07").elevateZoom({

zoomType : "lens",

lensShape : "round",

lensSize : 200

});

淡入淡出

您可以在镜头、窗口和色调上淡入淡出

<img id="zoom_08" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

$("#zoom_08").elevateZoom({
			zoomWindowFadeIn: 500,
			zoomWindowFadeOut: 500,
			lensFadeIn: 500,
			lensFadeOut: 500
});

$("#zoom_08").elevateZoom({

zoomWindowFadeIn: 500,

zoomWindowFadeOut: 500,

lensFadeIn: 500,

lensFadeOut: 500

});

外部控制

您可以在镜头、窗口和色调上淡入淡出在下拉菜单中更改图像

<img id="zoom_09" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

<select id="select"> 
  <option value="1">Front</option>
  <option value="2">Back</option>
  <option value="3">Scenery</option>
  <option value="4">Side</option>
</select>

<option value="1">Front</option>

<option value="3">Scenery</option>

</select>

$('#zoom_09').elevateZoom({
  gallery: 'gallery_09',
  galleryActiveClass: 'active'
})

$('#select').change(function (e) {
  var currentValue = $('#select').val()
  if (currentValue == 1) {
    smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png'
    largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg'
  }
  if (currentValue == 2) {
    smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png'
    largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg'
  }
  if (currentValue == 3) {
    smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png'
    largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg'
  }
  if (currentValue == 4) {
    smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png'
    largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image4.jpg'
  }
  // Example of using Active Gallery
  $('#gallery_09 a')
    .removeClass('active')
    .eq(currentValue - 1)
    .addClass('active')

  var ez = $('#zoom_09').data('elevateZoom')

  ez.swaptheimage(smallImage, largeImage)
})

$('#zoom_09').elevateZoom({

gallery: 'gallery_09',

galleryActiveClass: 'active'

})

$('#select').change(function (e) {

var currentValue = $('#select').val()

if (currentValue == 1) {

smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png'

largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg'

}

if (currentValue == 2) {

smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png'

largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg'

}

if (currentValue == 3) {

smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png'

largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg'

}

if (currentValue == 4) {

smallImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png'

largeImage = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image4.jpg'

}

// Example of using Active Gallery

$('#gallery_09 a')

.removeClass('active')

.eq(currentValue - 1)

.addClass('active')

var ez = $('#zoom_09').data('elevateZoom')

ez.swaptheimage(smallImage, largeImage)

})

Easing

您可以使用默认缓动或自定义缓动设置。缓动量也可以更改 – 默认为 12，设置越高表示越多，越低表示越少

<img id="zoom_10" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

$("#zoom_10").elevateZoom({easing : true});

$("#zoom_10").elevateZoom({easing : true});

滚动缩放

您可以滚动图像以放大更近！

<img id="zoom_mw" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

$("#zoom_mw").elevateZoom({scrollZoom : true});

$("#zoom_mw").elevateZoom({scrollZoom : true});

缩放窗口大小

缩放窗口大小可以调整为任何比例。

<img id="zoom_13" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
<img id="zoom_14" src="small/image1.png" data-zoom-image="large/image1.jpg"/>

$("#zoom_13").elevateZoom({
  zoomWindowWidth:300,
  zoomWindowHeight:100
}); 

$("#zoom_14").elevateZoom({
  zoomWindowWidth:100,
  zoomWindowHeight:300
});

$("#zoom_13").elevateZoom({

zoomWindowWidth:300,

zoomWindowHeight:100

});

$("#zoom_14").elevateZoom({

zoomWindowWidth:100,

zoomWindowHeight:300

});

使用图像约束缩放

您可以将一组图像附加到缩放中。您也可以将画廊传递给灯箱

<img id="img_01" src="small/image1.jpg" data-zoom-image="large/image1.jpg"/>

<div id="gal1">
 
  <a href="#" data-image="small/image1.jpg" data-zoom-image="large/image1.jpg">
    <img id="img_01" src="thumb/image1.jpg" />
  </a>

  <a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
    <img id="img_01" src="thumb/image2.jpg" />
  </a>

  <a href="#" data-image="small/image3.jpg" data-zoom-image="large/image3.jpg">
    <img id="img_01" src="thumb/image3.jpg" />
  </a>

  <a href="#" data-image="small/image4.jpg" data-zoom-image="large/image4.jpg">
    <img id="img_01" src="thumb/image4.jpg" />
  </a>

</div>

</a>

</a>

</a>

</a>

</div>

//initiate the plugin and pass the id of the div containing gallery images
$("#zoom_03").elevateZoom({constrainType:"height", constrainSize:274, zoomType: "lens", containLensZoom: true, gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active"}); 

//pass the images to Fancybox
$("#zoom_03").bind("click", function(e) {  
  var ez =   $('#zoom_03').data('elevateZoom');	
	$.fancybox(ez.getGalleryList());
  return false;
});

//initiate the plugin and pass the id of the div containing gallery images

$("#zoom_03").elevateZoom({constrainType:"height", constrainSize:274, zoomType: "lens", containLensZoom: true, gallery:'gallery_01', cursor: 'pointer', galleryActiveClass: "active"});

//pass the images to Fancybox

$("#zoom_03").bind("click", function(e) {

var ez = $('#zoom_03').data('elevateZoom');

$.fancybox(ez.getGalleryList());

return false;

});

/*set a border on the images to prevent shifting*/
 #gallery_01 img{border:2px solid white;}
 
 /*Change the colour*/
 .active img{border:2px solid #333 !important;}

/*set a border on the images to prevent shifting*/

#gallery_01 img{border:2px solid white;}

/*Change the colour*/

.active img{border:2px solid #333 !important;}

配置参数

Option	Default Value	Desciption
responsive	false	Set to true to activate responsivenes. If you have a theme which changes size, or tablets which change orientation this is needed to be on. Possible Values: `"True"`, `"False"`
scrollZoom	false	Set to true to activate zoom on mouse scroll. Possible Values: `"True"`, `"False"`
imageCrossfade	false	Set to true to activate simultaneous crossfade of images on gallery change. Possible Values: `"True"`, `"False"`
loadingIcon	false	Set to the url of the spinner icon to activate, e.g, http://www.example.com/spinner.gif. Possible Values: `"True"`, `"False"`
easing	false	Set to true to activate easing. Possible Values: `"True"`, `"False"`
easingType	zoomdefault	default easing type is easeOutExpo, (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b Extend jquery with other easing types before initiating the plugin and pass the easing type as a string value.
easingDuration	2000
lensSize	200	used when zoomType set to lens, when zoom type is set to window, then the lens size is auto calculated
zoomWindowWidth	400	Width of the zoomWindow (Note: zoomType must be “window”)
zoomWindowHeight	400	Height of the zoomWindow (Note: zoomType must be “window”)
zoomWindowOffetx	0	x-axis offset of the zoom window
zoomWindowOffety	0	y-axis offset of the zoom window
zoomWindowPosition	1	Once positioned, use `zoomWindowOffsetx` and `zoomWindowOffsety` to adjust Possible values: 1-16
lensFadeIn	false	Set as a number e.g 200 for speed of Lens fadeIn
lensFadeOut	false	Set as a number e.g 200 for speed of Lens fadeOut
zoomWindowFadeIn	false	Set as a number e.g 200 for speed of Window fadeIn
zoomWindowFadeOut	false	Set as a number e.g 200 for speed of Window fadeOut
zoomTintFadeIn	false	Set as a number e.g 200 for speed of Tint fadeIn
zoomTintFadeOut	false	Set as a number e.g 200 for speed of Tint fadeOut
borderSize	4	Border Size of the ZoomBox – Must be set here as border taken into account for plugin calculations
zoomLens	true	set to false to hide the Lens
borderColour	#888	Border Colour
lensBorder	1	Width in pixels of the lens border
lensShape	square	can also be round (note that only modern browsers support round, will default to square in older browsers)
zoomType	window	Possible Values: Lens, Window, Inner
containLensZoom	false	for use with the Lens Zoom Type. This makes sure the lens does not fall outside the outside of the image
lensColour	white	colour of the lens background
lensOpacity	0.4	used in combination with lensColour to make the lens see through. When using tint, this is overrided to 0
lenszoom	false
tint	false	enable a tint overlay, other options: true
tintColour	#333	colour of the tint, can be #hex, word (red, blue), or rgb(x, x, x)
tintOpacity	0.4	opacity of the tint
gallery	null	This assigns a set of gallery links to the zoom image
cursor	default	The default cursor is usually the arrow, if using a lightbox, then set the cursor to pointer so it looks clickable – Options are default, cursor, crosshair

地址

官网地址：https://www.elevateweb.co.uk/image-zoom/

GitHub：https://github.com/elevateweb/elevatezoom

本文地址：https://www.itcan.cn/2022/04/06/jquery-plugins-elevatezoom/