環球免稅店刪除圖標

Question

我一直在使用環球免稅店包創建圖片庫。我現在想添加一個刪除工具，以便用戶可以刪除他們想要的任何圖像。

使用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並刷新您的代碼/刪除所有屬於該選定圖像的圖像。