apply overlay script to dynamic content links?
Hello,
I have been having some trouble applying an overlay script to <img>'s that are loaded by another script from an external XML file. I was wondering if because the page has to create the elements, the overlay script loaded too quick and couldn't latch onto anything. Also when I manually enter the same <img>'s the script works fine.
Does anyone have an idea as to a way to get the overlay to apply to the dynamic <img>'s? thanks very much.
Below is the dynamic script and the overlay is using jQuery Tools. Thanks for any help!
- $(document).ready(function(){
$.ajax({
type: "GET",
url: "photo.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('photo').each(function(){
var id = $(this).attr('id');
var farm = $(this).attr('farm');
var server = $(this).attr('server');
var secret = $(this).attr('secret');
var title = $(this).attr('title');
var tags = $(this).attr('tags');
$('#triggers').append('<img src="http://farm'+farm+'.static.flickr.com/'+server+'/'+id+'_'+secret+'_s.jpg" rel="#'+title+'" />');
$('#triggers').after('<div class="simple_overlay" id="'+title+'"><img src="http://farm'+farm+'.static.flickr.com/'+server+'/'+id+'_'+secret+'.jpg" /><div class="details"><h3>'+title+'</h3><h4>Location</h4></div></div>');
});
}
});