需要帮助删除Jquery中的图像

时间:2012-02-26 21:14:04

标签: jquery jquery-plugins

12小时后仍然试图找出如何在关闭时删除点击的图库图像。实例here。麻烦的是当在图库中点击缩略图时,拇指的'src'图像会转移到下一个图库。尝试了数百种方法去除,但不要以为我是近在咫尺,noobie。最后几行javascript可以在这里看到 http://jsfiddle.net/coryd3033/5LPqZ/ 只需在下一个图库中一起删除图像持有者,而不是上一个图库中的最后一个图像。任何想法将不胜感激。谢谢。我正在寻找的功能是在关闭时简单地从支架上移除图像。虽然不是那么简单:(

3 个答案:

答案 0 :(得分:0)

示例:

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

这意味着:单击关闭按钮时,会在半秒内淡出图像支架。完成后,从图像持有者中删除任何图像。

希望有所帮助。

答案 1 :(得分:0)

你的代码非常混乱。我能说的最好,问题不在于<img/> src,而在于#largephotoc1的{​​{1}}属性。打开模态后,您需要调用background-image函数将loadPhoto()的背景图像设置为集合中的第一张图像。

答案 2 :(得分:0)

谢谢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);

});