Can't manipulate list items
For some reason my loadFirstPage in the following code is unable to find the dynamically created list items built up in the buildGallery function. I have a button in the extended code that calls the loadFirstPage function on a click which works perfectly when I click it. Anyone know what the deal is?
-
var buildNavi = function(){
var naviTemplate ='<li class="prev"><a href="#" title="Previous">Previous</a>
</li><li><span class="current"></span><span class="total">
</span></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.prev a").click(function(){
prevPage();
});
$("li.next a").click(function(){
nextPage();
});
loadFirstPage();
};
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();
var objNum = i;
var img = new Image();
$(img).attr('src', srcVal)
.css({"width" : iWidth, 'margin' : iMargin})
.hide();
var newLI = $("<li></li>")
.addClass("galleryThumb")
.append(img)
.css({'left' : 0, 'top' : 0, 'position' : 'absolute'})
.appendTo(galUL);
});
});
buildNavi();
};
var loadFirstPage = function(){
$('ul.gallery li').slice(0,randPerPage()).each(function(){
$(this).animate({'left' : $.randomBetween(0,contWidth-$(this).width()),
'top' : $.randomBetween(0,contHeight-$(this).height())}, 'slow');
$("img", this).fadeIn('slow');
});
};
buildGallery();