[jQuery] Unable to manipulate List Items
For some reason when I dynamically create an unordered list I am
unable to get at it through the DOM right away. Here is my code:
var buildNavi = function(){
var naviTemplate ='<li class="prev"><a href="#"
title="Previous">Previous</a></li></li><li class="next"><a href="#"
title="Next">Next</a></li>';
var naviCont = $("<ul></ul>")
.css({'position' : 'absolute', 'top' : gHeight-50})
.append(naviTemplate);
gCont.append(naviCont);
$("li.next a").click(function(){
nextPage();
});
$("li.prev a").click(function(){
prevPage();
});
};
var buildGallery = function(){
$(gCont).empty();
var initialNum = randPerPage;
var galUL = $("<ul></ul>")
.addClass("gallery")
.css({'overflow' : 'hidden', 'height' : contHeight, 'width' :
contWidth});
gCont.css('overflow', 'hidden').append(galUL);
$.get(settings.srcURL,
{'Media' : settings.media},
function (data){
$(data).find("ThumbSrc").each(function(i){
var srcVal = $(this).text();
$('<img>').attr('src', srcVal)
.css({'margin' : iMargin})
.load(function(){
$("<li></li>")
.addClass("galleryThumb")
.append($(this))
.css({'left' : 0, 'top' : 0, 'position' : 'absolute'})
.appendTo(galUL);
})
.hide(0,loadFirstPage(i));
});
});
buildNavi();
};
var loadFirstPage = function(itemNum){
if(itemNum<=startPage){
var imgWidth = $('ul.gallery li:eq('+itemNum+') img').width
();
var imgHeight = $('ul.gallery li:eq('+itemNum+') img').height
();
var setLeft = $.randomBetween(0,(gWidth-imgWidth));
var setTop = $.randomBetween(0,(gHeight-imgHeight));
$('ul.gallery li:eq('+itemNum+') img').fadeIn('slow');
$('ul.gallery li:eq('+itemNum+')').show().animate({left :
setLeft,
top : setTop, opacity : 'toggle'}, 'slow');
}
};
buildGallery();
Is there someway to make sure that the UL is completely built up with
the images in place before running my loadFirstPage function?