I have a simple image-slider, the html looks like this:
<ul id="gallery-slider">
<li class="slide-li" >
<img src="img1.png" width="1024" height="590" alt="img1">
</li>
<li class="slide-li" >
<img src="img2.png" width="1024" height="590" alt="img2">
</li>
<li class="slide-li" >
<img src="img3.png" width="1024" height="590" alt="img3">
</li>
...
</ul>
Now I want to add some thumbs to it to have an overview of the images. I want to create the thumbs from the images in the slides. I am using Zepto and tried the following to get the images and create new ones:
//imageSlider is the image slider instance in use
for (var i = 1; i <= imageSlider.length; i++) {
//find the image in li
var img = $('#gallery-slider li').eq(i-1).find('img').clone().attr({'width': 268, 'height': 172});
//view cloned element in console
console.log(img);
...
//here the img var will get pushed into an array
}
Now when you spit out the img var in the console, it shows empty objects. I think the problem is the find() function, because when I do this:
var img = $('#gallery-slider li').eq(i-1).clone();
the img var is not empty – the console output shows the cloned li elements. Is this a bug or can I not use the clone() function in combination with find() ?
Edit:
I also tried this:
var img = $('#gallery-slider li').eq(i-1).find('img'),
thumb = img.clone();
– same result.
As the discussion before, in chrome and firefox it works fine, see here.
And then I tried it in safari. console.log(img)
indeed printed empty. But then I tried console.log(img.length)
, it printed 1
.
So I think there maybe some bug in safari's debug tools.
Then I ignored the result of console.log()
and try to use the cloned element with the following code:
$('#gallery-slider').after(img);
to see whether it is really empty or not.
And the result proved my opinion. It worked fine.
See here.