Нужна помощь в удалении изображения в Jquery

Question

12 часов спустя все еще пытаюсь выяснить, как удалить кликнувшее изображение галереи при закрытии. Живой пример здесь . Проблема в том, что при нажатии на миниатюру внутри галереи, изображение «src» превратится в следующую галерею. Пробовал сотни способов убрать, но не думай, что я где-то рядом, нуби. Последние несколько строк JavaScript, которые можно увидеть здесь http://jsfiddle.net/coryd3033/5LPqZ/ просто удалите держатель изображения все вместе в следующей галерее, вместо последнего изображения в предыдущей галерее. Любые идеи очень приветствуются. Спасибо. Функциональность, которую я ищу, состоит в том, чтобы просто удалить изображение из держателя при закрытии. Не все так просто: (

Answer 1

Ваш код действительно грязный. Насколько я могу судить, ваша проблема не в свойстве <img/> src, а в свойстве #largephotoc1 background-image. После того, как ваш модальный режим открыт, вам нужно вызвать функцию loadPhoto(), чтобы установить фоновое изображение #largephotoc1 на первое изображение в наборе.

Answer 2

Спасибо, Chimoo и Set Sail (я очистил свой код, по крайней мере, до отступа после вашего, и я не являюсь комментариями меня). Это дало мне необходимую функциональность, и все работает отлично. Не знаю как, логически не имеет смысла.
Но есть ли способ, которым я могу упростить этот блок. Это в основном три функции, выполняющие аналогичные задачи. Но это работает :) Спасибо, ребята.

function loadDefault($lD, $caption){
showPreloader();
var img = new Image();  
$(img).load( function()
{
    $(img).hide();
    hidePreloader();

}).attr({ "src": $lD });

    $('#largephoto').css('background-image','url("' + $lD + '")');
    $('#largephoto').data('caption', $caption);
    $('#largephotoc1').css('background-image','url("images/album/modallarge/c1.1.jpg")');
    $('#largephotoc1').data('caption', $caption);
    $('#largephotoc2').css('background-image','url("images/album/modallarge/c3.1.jpg")');
    $('#largephotoc2').data('caption', $caption);
    $('#largephotoc3').css('background-image','url("images/album/modallarge/c4.1.jpg")');
    $('#largephotoc3').data('caption', $caption);
    $('#largephoto3d1').css('background-image','url("images/album/modallarge/3d1.1.jpg")');
    $('#largephoto3d1').data('caption', $caption);

}

$('.reveal-modal').ready(function(){
    //var source = $('.st_thumbs').click
    var handler = $(this).find('.large_image');
    var newsrc = handler.attr('src');
    var newcaption = handler.attr('rel');
    loadDefault(newsrc, newcaption);

});

function loadPhoto($url, $caption){
showPreloader();
var img = new Image();  
$(img).load( function()
{
    $(img).hide();
    hidePreloader();

}).attr({ "src": $url });

    $('#largephotoc1').css('background-image','url("' + $url + '")');
    $('#largephotoc1').data('caption', $caption);
    $('#largephotoc2').css('background-image','url("' + $url + '")');
    $('#largephotoc2').data('caption', $caption);
    $('#largephotoc3').css('background-image','url("' + $url + '")');
    $('#largephotoc3').data('caption', $caption);
    $('#largephotoc4').css('background-image','url("' + $url + '")');
    $('#largephotoc4').data('caption', $caption);
    $('#largephoto3d1').css('background-image','url("' + $url + '")');
    $('#largephoto3d1').data('caption', $caption);

}

$('.thumb_container').click(function()
{
    //var source = $('.st_thumbs').click
    var handler = $(this).find('.large_image');
    var newsrc = handler.attr('src');
    var newcaption = handler.attr('rel');
    loadPhoto(newsrc, newcaption);

});

function removePhoto($lD, $caption){
showPreloader();
var img = new Image();  
$(img).load( function()
{
    $(img).hide();
    hidePreloader();

}).attr({ "src": $lD });

    $('#largephotoc1').css('background-image','url("images/album/modallarge/c1.1.jpg")');
    $('#largephotoc1').data('caption', $caption);
    $('#largephotoc2').css('background-image','url("images/album/modallarge/c3.1.jpg")');
    $('#largephotoc2').data('caption', $caption);
    $('#largephotoc3').css('background-image','url("images/album/modallarge/c4.1.jpg")');
    $('#largephotoc3').data('caption', $caption);
    $('#largephoto3d1').css('background-image','url("images/album/modallarge/3d1.1.jpg")');
    $('#largephoto3d1').data('caption', $caption);

}

$('.close-reveal-modal').click(function()
{
    //var source = $('.st_thumbs').click
    var handler = $(this).find('.large_image');
    var newsrc = handler.attr('src');
    var newcaption = handler.attr('rel');
    removePhoto(newsrc, newcaption);

});

Answer 3

Пример:

$('.close').click(function() {
    $('.imageHolder').fadeOut(500, function(){
         $('.imageHolder img').remove();
    });
});

Это означает: когда нажата кнопка закрытия, исчезает держатель изображения в течение полсекунды. После этого удалите все изображения из держателя изображения.

Надеюсь, это немного поможет.