Question

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

I’ve put together a script which allows a user to view their uploaded images in a gallery format as shown here.

Using the jQuery demo here, I’m now trying to implement a custom dialog box to appear when the user selects a image to be deleted. I already have the error message written as shown in the extract below:

Galleria.ready(function() {
    this.$('thumblink').click();

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

The problem I’m having is that I can’t find a way to create the div around it which is necessary for the dialog box. I’m relatively new to Javascript, so perhaps this is a really basic error, but I just wondered whether someone could have a look at this please and let me know where I’ve gone wrong?

Many thanks and regards

Answer 1

you can do this:

$('<div>').html('Deleting image... ' + $(img).attr("src")).dialog({autoOpen:true});

—

i think this one work for you:

Galleria.ready(function() {
    this.$('thumblink').click();

    $(".galleria-image").append("<span class='btn-delete'></span>");  
    $(".btn-delete").live("click", function() {
        var img = $(this).closest(".galleria-image").find("img");      

// Dialog
var dialog=$('<div>').addClass('cDialog').html('Deleting image... ' + $(img).attr("src")).appendTo('#galleria').hide().fadeIn();

// On Success Delete You Can Do
// dialog.text('Deleted').delay(1000).remove();
// or

// dialog.remove();

        return false; 
    }); 
});

CSS:

#galleria{
overflow:hidden;
position:relative;
}

.cDialog{
width:100%;
position:absolute;
top:0;
right:0;
padding:13px;
background-color:#F2F2F2;
text-align:center;
}