[英]How to zoom in/zoom out each image in each div with jquery and scale (css)?
I am trying to create a zoom in / zoom out function for images in an article for the website www.nhadatsonnghia.com.我正在尝试为网站 www.nhadatsonnghia.com 的文章中的图像创建放大/缩小 function。 When everything worked fine, an error occurred that jquery only works for the first image in the first tag, and the images in each subsequent tag cannot zoom in / zoom out.
当一切正常时,出现错误,jquery 仅适用于第一个标签中的第一个图像,并且每个后续标签中的图像无法放大/缩小。 After running only the first image has class style="transform: scale (1);".
运行后只有第一个图像有 class style="transform: scale (1);"。
You can see it working here你可以看到它在这里工作
So how should I fix to zoom in/zoom out each image in each div?那么我应该如何修复放大/缩小每个 div 中的每个图像? I would appreciate it if you suggest me how to fix this!
如果您建议我如何解决此问题,我将不胜感激!
Thanks very much!非常感谢!
Here is the code这是代码
Jquery Jquery
$(function() {
$('.post-header .desc-image-list .full .natural-thumbnail #img').data('scale', '1');
$('#nav input').on('click', function() {
var scale = parseInt($('#img').data('scale')*10,10),
nScale = $(this).index()===0 ? scale+1 : scale-1;
nScale = parseFloat(parseInt(nScale,10)/10);
$('#img').data('scale', nScale).css('transform', 'scale('+nScale+')');
});
});
HTML HTML
<div class="post-header">
<div class="desc-image-list">
<div class="full">
<div class="natural-thumbnail">
<img id="img" src="image1.img"> // After running only the first image has class style="transform: scale (1);"
<div id="nav">
<input type="button" value="Zoom in">
<input type="button" value="Zoom out">
</div>
</div>
<div class="natural-thumbnail" style="height: 600px;">
<img id="img" src="image2.img">
<div id="nav">
<input type="button" value="Zoom in">
<input type="button" value="Zoom out">
</div>
</div>
<div class="natural-thumbnail" style="height: 0;">
<img id="img" src="image3.img">
<div id="nav">
<input type="button" value="Zoom in">
<input type="button" value="Zoom out">
</div>
</div>
</div>
</div>
</div>
CSS CSS
#nav {position: sticky; bottom: 20px; left: 50%; margin-left: -50px;}
#nav input {padding: 5px; font-size: 15px; cursor: pointer;}
In addition to @freedomn-m answer.除了@freedomn-m 答案。
You can use img
tag as a css selector .natural-thumbnail img
you don't need any class.您可以将
img
标签用作 css 选择器.natural-thumbnail img
您不需要任何 class。 update below js and will work fine.在js下面更新并且可以正常工作。
$(function() {
$('.post-header .desc-image-list .full .natural-thumbnail img').data('scale', '1');
$('#nav input').on('click', function() {
var scale = parseInt($('.natural-thumbnail img').data('scale')*10,10),
nScale = $(this).index()===0 ? scale+1 : scale-1;
nScale = parseFloat(parseInt(nScale,10)/10);
$('#img').data('scale', nScale).css('transform', 'scale('+nScale+')');
});
});
Id of element should be unique on one html page.元素 ID 在一个 html 页面上应该是唯一的。
you can use this你可以用这个
$(this).parent().siblings('img').data('scale', nScale).css('transform', 'scale('+nScale+')');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.