我正在使用提升缩放效果来缩放图像,我的图像标记是:
<img id="zoom_01"
src='New folder/small/image.jpg'
data-zoom-image="New folder/large/image.jpg">
和elevatezoom脚本是:
<script>
$("#zoom_01").elevateZoom({scrollZoom : true});
</script>
我有很多想要缩放的图像,同样的id,src值正在改变,但是我无法改变数据缩放图像的值。如何更改数据缩放图像值,你也可以访问任何[ e coomerce website]我想说的是什么。1
答案 0 :(得分:18)
更改数据缩放图像属性后,您需要使用elevateZoom
重新初始化,如下所示:
$("#zoom_01").data('zoom-image', 'newURL').elevateZoom({
responsive: true,
zoomType: "lens",
containLensZoom: true
});
答案 1 :(得分:6)
如果您想要显示为缩放的更改图像,只需执行此操作
$('.zoomWindowContainer div').stop().css("background-image","url("+ changed_image +")");
答案 2 :(得分:2)
我认为你需要这个......
$("#zoom_01").attr('data-zoom-image', 'new path');
答案 3 :(得分:0)
我在这里遇到完全相同的问题,想通了:它可能不起作用,因为插件不支持更改该特定属性 - 它有自己的图库功能。他们自己的文档中有错误,这就是它的工作原理:
主要图片的HTML&amp;缩略图:
<img id="bigpic" 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 src="thumb/image1.jpg" />
</a>
<a href="#" data-image="small/image2.jpg" data-zoom-image="large/image2.jpg">
<img src="thumb/image2.jpg" />
</a>
</div>
用于初始化图库的jQuery:
$("#bigpic").elevateZoom({
gallery:'gal1',
galleryActiveClass: 'active'
用于将图像传递到主容器的jQuery:
$("#bigpic").bind("click", function(e) {
var ez = $('#bigpic').data('elevateZoom');
$.fancybox(ez.getGalleryList());
return false;
});
我是jQuery的新手,我并不是真的100%理解这里的机制,但这就是我的工作方式,我希望它适合你!
答案 4 :(得分:0)
在js中包含以下代码,它可以解决您的问题 在变量smallImage中给出新小图像的url 并在largeImage中给出新的大图像的URL。 希望这可以解决您的问题,而无需重新升级您的高程缩放。
var ez = $("#zoom_01").data("elevateZoom");
ez.swaptheimage(smallImage, largeImage);
答案 5 :(得分:0)
您只需使用插件本身提供的图库功能,只需将图片包装到容器中
即可<img src="img1-small.jpg" id="zoom_x" data-zoom-image="img1-large.jpg">
<div id="my_images">
<a href="#" data-image="img1-small.jpg" data-zoom-image="img1-large.jpg"><img src="img1-small.jpg" alt=""></a>
<a href="#" data-image="img2-small.jpg" data-zoom-image="img2-large.jpg"><img src="img2-small.jpg" alt=""></a>
...
</div>
然后你必须像这样调用插件:
$("#zoom_x").elevateZoom({ gallery: "my_images", zoomType : "inner", cursor: "crosshair", imageCrossfade: true });
答案 6 :(得分:0)
app.factory('MultiLoading', function($ionicLoading) {
//Loading indicator
var loading = {
opened: 0,
show: function() {
if (loading.opened > 0)
return;
$ionicLoading.show({
noBackdrop :false,
template: '<ion-spinner icon="ripple"></ion-spinner>',
duration :20000
});
loading.opened+=1;
},
hide: function() {
loading.opened = 0;
$ionicLoading.hide();
}
};
return loading;
});