<img class="my-foto" src="fashion-033-thumb.jpg" data-large="fashion-033.jpg">
<!-- Optional JavaScript -->
<!-- <script src="jquery-1.8.2.min.js"></script> -->
<script src="jquery-3.3.1.min.js"></script>
<script src="zoomsl-3.0.js"></script>
<script>
$(function() {
$('.my-foto').imagezoomsl({
zoomrange: [3, 3]
});
});
</script>
zoomsl does not work with jquery 3.3.1 version console throw e.indexOf is not a function error
Problem : zoomsl does not work with jquery 3.3.1 version
Error :
Solution :
You need to change
new Image()
.load()
function in zoomsl-3.0.jsApply
$("img").one("load", function() { ... }
therePlease check codepen example here
Old Code:
$.fn.imagezoomsl = function(options){
options = options || {};
return this.each(function(){
if (!$(this).is("img")) return true;
var that = this;
setTimeout(function () {
$(new Image()).load(function(){//this is old line
sergelandimagezoomer.init($(that), options);
}).attr('src', $(that).attr('src'));
}, 30);
});
};
New Code:
$.fn.imagezoomsl = function(options){
options = options || {};
return this.each(function(){
if (!$(this).is("img")) return true;
var that = this;
setTimeout(function () {
$("img").one("load", function() {//new code
sergelandimagezoomer.init($(that), options);
}).attr('src', $(that).attr('src'));
}, 30);
});
};
You can see that $("img").one("load", function() { ... }
is applied in setTimeout
function.
Just change this line and it will start working.
This change will keep working in jquery older versions too.
I hope you found the solution, please fill free to ask question.