Question

I wonder whether someone may be able to help me please.

I’m using this page to allow users to view a gallery of their images.

You can see that I’ve added a cross at the bottom of each image which I will use to delete the image and this is set up in my .css file as:

 .galleria-thumbnails .galleria-image {
    width: 80px;
    height: 80px;
    float: left;
    margin: 0 7px 7px 0;
    border: 2px solid #fff;
    cursor: pointer;
    background: url(cross.png) no-repeat bottom;
    padding-bottom: 20px;
    background-color:#FFFFFF;

The problem I have is that I’m very unsure how to link the image in the separate .ccs file with the Javascript command to delete the image which is on my gallery page.

I just wondered whether someone may be able to provide some guidance on how I may go about overcoming this problem.

Thanks and regards

Answer 1

You need to add an element (e.g. span) which can handle the click. I can see that you actually already have something like this:

<span class="btn-delete icon-remove icon-white"></span>

You even have the click handler already:

$(".btn-delete").live("click", function()
{ var img = $(this).closest(".galleria-image").find("img");
alert('Deleting image... ' + $(img).attr("src")); return false; }); 

All you need to do is apply the styles so you can actually use this. Something like:

.galleria-thumbnails .btn-delete {
    display: block; /* Or just use a div instead of a span*/
    position: absolute;
    bottom: 0px; /*align at the bottom*/
    width: 80px;
    height: 80px;
    cursor: pointer;
    background: url(cross.png) no-repeat bottom;
}