Значок исчезновения Galleria

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

это будет делать что-то вроде:

Теперь вы можете просто отправить запрос ajax, используя, например, $.get(), передав ID/SRC изображения, которое пользователь хотел удалить, и обновите код/​​удалите все изображения, принадлежащие выбранному.