i am trying to change an attribute at the img tag and it's not working i do not know why. My code is changeing the BIG img source and the ZOOM source, but the code only changes the source but not the ZOOM, here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src='jquery-1.8.3.min.js'></script>
<script src='jquery.elevatezoom.js'></script>
<!--script src='jquery-1.8.3.min.js'></script-->
<script>
function colorImage(x){
var newsrc = x.src.replace("thumb", "large");
var d = document.getElementById("zoom_06_l");
d.src = newsrc;
d.setAttribute("data-zoom-image", newsrc);
}
</script>
</head>
<style>
a{
color:black;
text-decoration:none;
}
.element{
width:150px;
}
.element .code {
text-align:center;
padding:10px;
}
</style>
<body>
<div style="width:960px;margin:0 auto;">
<img id="zoom_06_l" src="large/001.jpg" width="960" data-zoom-image="large/001.jpg"/>
<div id="gallery">
<a href="#" data-image="large/001.jpg" data-zoom-image="large/001.jpg">
<div class="element" style="float:left;margin-right:5px;">
<img id="zoom_06" src="thumb/001.png" /><br>
<div class="code">דגם מספר : 0025</div>
</div>
</a>
<a href="#" data-image="large/30001.png" data-zoom-image="large/30001.png">
<div class="element" style="float:left;margin-right:5px;">
<img onclick="javascript:colorImage(this)" id="zoom_06" src="thumb/30001.png" /><br>
<div class="code">דגם מספר : 30001</div>
</div>
</a>
</div>
</div>
<script>
$("#zoom_06_l").elevateZoom({
zoomType : "lens",
lensShape : "round",
lensSize : 250
});
</script>
</body>
</html>
data-zoom-image at the img with id zoom_06_l is not changing i do not know why. any help ?
In place of
d.setAttribute("data-zoom-image", newsrc);
try using this
d.dataset.zoomImage = newsrc;
For details please refer to
" https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes "
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.