0

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

IRHM
  • 1,326
  • 11
  • 77
  • 130

3 Answers3

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;
}
Armatus
  • 2,206
  • 17
  • 28
  • many thanks for taking the time to reply and for the solution. There's some minor tweaking to do as I'm trying to get the icon in the 'bottom middle', but it works a treat. Kind regards – IRHM May 07 '12 at 12:34
0

CSS is for styling, while JS is for behavior. You can't mix the two, and both are not related in terms of functionality. what you need is a JS that removes the image.

a standards compliant, JS version

var db = document.querySelectorAll('.galleria-thumbnails .btn-delete'),
    dbLength = db.length,
    i;

for(i=0;i<dbLength;i++){
     db[i].addEventListener('click',function(){
        var thumbnail = this.parentNode;
        thumbnail.parentNode.removeChild(thumbnail);
    },false);
}

a jQuery 1.7+ version is this:

$('.galleria-thumbnails').on('click','.btn-delete',function(){
    $(this).closest('.galleria-image').remove()
})
Joseph
  • 117,725
  • 30
  • 181
  • 234
  • thank you for taking the time to reply to my post and the solution. I guess this is a question for all 3 of you. You've all kindly provided me with solutions, quite different from one another. But I'm really very new to Javascript and associated coding. From a beginners perspective, how do you know which solution to use? Is it just down to personal preference. Kind regards – IRHM May 07 '12 at 12:33
0

If you set this above style sheet with in a <td> just write onclick event...

here a sample

<td id="Homebutton" runat="server" style="height: 35px; width: 101px; cursor: pointer;"
                class="menubuttonhome" align="center" onclick="navigate(id)" onmouseover="this.className='menubuttonhomefocus'"
                onmouseout="this.className= 'menubuttonhome'">
                Home
            </td>

here my css

 .menubuttonhome
        {
            background-image: url('Images/homebutton.png');
            background-repeat: no-repeat;
            vertical-align: top;
            color: #005a8c;
            font-family: Arial;
            padding-top:11px;
            font-size: 10pt;
            font-weight: 500;
        }
Arun Kumar
  • 303
  • 1
  • 4
  • 13