0

I've been working with the Galleria package to create a image gallery. I'm now wanting to add a deletion tool so that a user can delete any image they so desire.

Using this demo as a baseline, I've taken the elements of code which I need and tried to incorporate it into my gallery page here. The problem is, is that I cannot get the 'bin' icon to appear at the bottom of each image, and hence I'm unable to see whether the function which makes the image disappear from screen actually works. I don't need the code that deletes the image from the server. I'll be dealing with that later on.

I'm really quite new to Javacript and jQuery, so please feel free to speak down to me. But I've been working on this for weeks now and I just can't find a solution.

I just wondered whether someone could perhaps look at this and let me know where I'm going wrong.

Many thanks and regards

IRHM
  • 1,326
  • 11
  • 77
  • 130

1 Answers1

0

adding this style to your CSS rule:

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

and in your 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;
});

this will do something like:

enter image description here

Now, you can simply send an ajax request using $.get() for example, passing the ID/SRC of the image that the user wanted to delete and refresh your code/remove all images that belong to that selected one.

balexandre
  • 73,608
  • 45
  • 233
  • 342
  • Hi @balexandre, many thanks for this. If at all possible I'd like to use the icon and functionality from the demo. Could you tell me please is this possible? Kind regards – IRHM May 05 '12 at 15:59
  • the icon, just change it to whatever you want, it's in he CSS. regarding the "functionality from the demo", I don't follow... – balexandre May 05 '12 at 16:08
  • Hi, my apologies for not making this clear. I've put together a really quick script here: http://www.mapmyfinds.co.uk/development/delete.php to show how I would like each image to look and act upon the delete icon being selected. Please forgive me for asking, I'm really very new to jQuery, but could you also please confirm whether both elements of code go into my gallery script or the main files i.e. `galleria-1.2.7.min.js` and `galleria.twelve.css`. Kind regards – IRHM May 05 '12 at 16:19
  • Hi @balexandre, this is absolutely fantastic. It's just what I was after, thank you so very much. I do just have a very simple question thugh. Could you possibly tell me please how I woud increase the border at the bottom of the image and move the 'bin' image a little further down from the image. I didn't want to mess the file up, without knowing what I was changing. Kind regards – IRHM May 06 '12 at 10:34
  • just play around with the `padding` and `margin`. – balexandre May 06 '12 at 10:36
  • That's great. Now onto the hard bit of deleting the actual record? Once again many thanks for all your time, trouble and help, it is greatly appreciated. Kind regards – IRHM May 06 '12 at 10:57
  • you need to do something for your self ... this is not a homework forum. I gave you a good start, continue to learn and if you came up with more questions, ask them here showing what did you already tried. There are plenty of Video Tutorials on jQuery, you should look upon them as well... don't expect us to do all the hard work. – balexandre May 06 '12 at 12:58
  • Hi @balexandre, I'm afraid you've misunderstood. I wasn't asking for anymore help. I was just trying to be friendly, that's all. kind regards – IRHM May 06 '12 at 14:19