画廊删除图标

Question

我一直在使用 Galleria 包创建图片库。我现在想添加一个删除工具，以便用户可以删除他们想要的任何图像。

使用this 演示作为基线，我已经获取了我需要的代码元素并尝试将其合并到我的画廊页面here。问题是，我无法让“bin”图标出现在每个图像的底部，因此我无法看到使图像从屏幕上消失的功能是否真的有效。我不需要从服务器中删除图像的代码。稍后我会处理这个问题。

我对 Javacript 和 jQuery 真的很陌生，所以请随时跟我说话。但是我已经为此工作了数周，但我找不到解决方案。

我只是想知道是否有人可以看看这个并让我知道我哪里出错了。

非常感谢和问候

Answer 1

将此样式添加到您的 CSS 规则中：

.btn-delete {
    width: 14px; height: 14px;
    margin: 38px 0 0 66px;
    position: absolute;
}
.icon-remove { background-position: -312px 0; }
.icon-white { background-image: url('http://twitter.github.com/bootstrap/assets/img/glyphicons-halflings-white.png'); }

在你的 jQuery 中：

$(".galleria-image").append(
     "<span class='btn-delete icon-remove icon-white'></span>");

$(".btn-delete").live("click", function() {
    var img = $(this).closest(".galleria-image").find("img");

    alert('Deleting image... ' + $(img).attr("src"));
    return false;
});

这将执行以下操作：

现在，您可以简单地使用 $.get() 发送一个 ajax 请求，例如，传递用户想要删除的图像的 ID/SRC 并刷新您的代码/删除属于该选定图像的所有图像。