Question

I’m creating a video gallery and have 6 thumbnails that when clicked on, will play the respective video in an iframe on the page.

These 6 thumbnails change when the user goes to the next page of videos, loading the new links which are stored in an XML document.

var linkhtml=x[i].getElementsByTagName("linkhtml")[0].childNodes[0].nodeValue;

I loop through 6 elements from the XML and change the thumbnail <td id="videoBox[1-6]"> as such:

$('#videoBox' + j).mousedown(function () {
    frames['videoPlayer'].playVideo(linkhtml, videoPlaylist);
});

This doesn’t work, however, as when I click on any of the thumbnails, it calls on whatever linkhtml was last set to, so the 6th video on the page.

How can I get each thumbnail to retain its link properly?

Answer 1

Use an anonymous function to create a closure that captures the value of the variable at that time:

(function(linkhtml){

  $('#videoBox' + j).mousedown(function () {
    frames['videoPlayer'].playVideo(linkhtml, videoPlaylist);
  });

})(linkhtml);