2
<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

Ammar
  • 79
  • 1
  • 1
  • 7
  • According to documentation you should use: jQuery(function() please make sure jquery is loading checking there are no errors from dev tools with inspector. – Sigma Sep 27 '18 at 12:28
  • Sigma's comment is not helpful at all... w.fn.init.w.fn.load is a jQuery function which means that JQuery code is actually loaded and executing. Moreover, the title of the question itself is the javascript output from devtools – Alejandro Lozdziejski Aug 15 '19 at 17:41

2 Answers2

3

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.js

  • Apply $("img").one("load", function() { ... } there

  • Please 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.

saAction
  • 2,035
  • 1
  • 13
  • 18
0

Also you can change the code like this

Before: 

$.fn.imagezoomsl = function(options){
    options = options || {};        
    return this.each(function(){ //return jQuery obj        
        if (!$(this).is("img")) return true;            
        var that = this;
        setTimeout(function () {
            $(new Image()).load(function(){
                sergelandimagezoomer.init($(that), options);                    
            }).attr('src', $(that).attr('src'));                
        }, 30);
    });

};

After: 

$.fn.imagezoomsl = function(options){
    options = options || {};        
    return this.each(function(){ //return jQuery obj        
        if (!$(this).is("img")) return true;            
        var that = this;
        var img = new Image();
        setTimeout(function () {
            $(img).load($(that).attr('src'),function(){
                sergelandimagezoomer.init($(that), options);                    
            }).attr('src', $(that).attr('src'));                
        }, 30);
    });

};
Alexander
  • 1