For loop help, redirect loader
I am working on a redirect script for a fancybox that loads a video, and then redirects the user to a new webpage when the fancybox is closed. I have the loader, and the redirect working.
However every video that is loaded redirects to the same page. I believe this to be a loop issue, and I could use some help.
var sponsors = [
{selector: ".video_one", uri: "http://www.mysite.com"},
{selector: ".video_two", uri: "http://www.anothersite.com"}
];
$(document).ready(function(){
for(var i = 0; i < sponsors.length; i++) {
var msg = sponsors[i].uri;
var myDel = function(){window.location.replace(msg);}
$(sponsors[i].selector).fancybox({
'width' : '40%',
'height' : '60%',
'type' : 'iframe',
'closeBtn': false,
'afterClose': function(){myDel();}
});
}
});
Thank you for your reply. However I do not quite understand. I don't leave the page until the event is triggered by closing the fancybox on my site. Im trying to dynamically set up each event. Every video get loaded correctly. However each video only redirects to the last uri in my sponsors object.
I am going to try doing this with an array. I will post the code as soon as I am done. If you could explain the logic a little more I would greatly appreciated it.
Ok solved the problem. I had to enclose everything in the loop in a function. Weird to me but I guess its a javascript thing.
I found the answer here. sitepoint thread
$(document).ready(function(){
for(i in mySponsors){
(function(i){
$(mySponsors[i][0]).fancybox({
'width': '40%',
'height': '60%',
'type': 'iframe',
'closeBtn': false,
'afterClose': function(){window.location.replace(mySponsors[i][1]);}
});
})(i);
}
});```
Thanks for your help. Could still use a clarification as to why this works the way it does though.