Search code examples
javascriptjqueryhtmlfotorama

jQuery selectors don't work in Fotorama.io

What am I doing wrong here?

Link to codepen demo

$(document).ready(function() {
  var img = $('img');
  console.log(img.length); //returns 0 WHY?
});

It returns 0 objects whilst there are 2 img tags. I tried to intialize it in many ways, with JS only, with API access. Nothing works. Why jQuery/JavaScript selectors do not work here?

Solution

  • The fotorama library manipulates your img tags, which is the reason why you get 0 at DOM ready. A little hack would be to use timeout.

    setTimeout(function(){
    var img = $('img');
    console.log($('img').length);
},200)

    *Note: The timeout value cannot be predicted and the plugin might take time to init.

    Updated Pen