サムネイルをクリックしたときに要素が追加された後に画像を読み込もうとすると、/t/
から/i/
に置き換えられ、次のコードで追加要素に読み込まれます。追加された要素に画像を読み込む
$('.main-image img').live('click', function()
{
var image_url = $(this).attr('src');
var loadurl = image_url.replace(/\/t\//, '/i/');
$('.container').slideUp('slow');
$('#pop-up').append('<div class="container tcenter"><p id="close-preview" class="link tcenter">Close</p><div class="quick-view"><img src="img/loading.gif" /></div></div>', function()
{
$('<img />').attr('src', loadurl).load(function()
{
$('.quick-view').empty();
$(this).appendTo('.quick-view');
});
});
// ignore this part - above is what needs helping with
$('.quick-view').css('line-height', ($('.quick-view').parents().find('.container').height() - 25) + 'px');
$('.container:last').css('background', '#FFF');
$('.container:last img').css('max-height', $(window).height() * 75/100)
});
それが唯一のロード画像を示すようしかし、それが動作するようには思えない、それは追加要素の中にイメージをロードしないように、コードで特定の何かがある...
編集:
$('.main-image img').live('click', function()
{
var image_url = $(this).attr('src');
var loadurl = image_url.replace(/\/t\//, '/i/');
var self = $(this);
$('.container').slideUp('slow');
$('#pop-up').append('<div class="container tcenter"><p id="close-preview" class="link tcenter">Close</p><div class="quick-view"><img src="img/loading.gif" /></div></div>', function()
{
$('<img />').attr('src', loadurl).live('load', function()
{
self.fadeOut('slow', function()
{
self.empty(function()
{
self.appendTo('.quick-view');
});
});
});
});
$('.quick-view').css('line-height', ($('.quick-view').parents().find('.container').height() - 25) + 'px');
$('.container:last').css('background', '#FFF');
$('.container:last img').css('max-height', $(window).height() * 75/100)
});
任意の運が生きていますか? – kobe