jQuery Image Delete Confirmation Message
<p>I wonder whether someone may be able to help me please.</p>

<p>Firstly, my sincere apologies because I'm not very well versed with JavaScript and some may feel this a foolish post, but any help would be greatly appreciated.</p>

<p>I'm currently using the script below to delete gallery images.</p>

<pre><code>&lt;script type="text/javascript"&gt; 
        Galleria.ready(function() {
            this.$('thumblink').click();

        $(".galleria-image").append( 
        "&lt;span class='btn-delete ui-icon ui-icon-trash'&gt;&lt;/span&gt;"); 
        $(".btn-delete").live("click", function(){  
        var img = $(this).closest(".galleria-image").find("img"); 
        $.msgbox("You are about to delete this image. It cannot be restored at a later date. Do you wish to continue?", {
        type: "alert",
          buttons : [
            {type: "submit", value: "Delete"},
            {type: "cancel", value: "Cancel"}
          ]
          },
          function(result) {
          if(result)


          // send the AJAX request
          $.ajax({
            url : 'delete.php',
            type : 'post',
            data : { image : img.attr('src'),  idnum: "VALUE", lid: "VALUE"},
            success : function(){
            img.parent().fadeOut('slow');
            }
        });               
    });
        return false;
    });     
});

&lt;/script&gt;
</code></pre>

<p>I've now find a more suitable jQuery confirmation script <a href="http://tutorialzine.com/2010/12/better-confirm-box-jquery-css3/" rel="nofollow">here</a> which I'd now like to try and implement.</p>

<p>Using the <code>script.js</code> file from this site and my existing script, I've tried to combine them and have come up with the following:</p>

<pre><code>&lt;script type="text/javascript"&gt; 
Galleria.ready(function() {
    this.$('thumblink').click();
    $(".galleria-image").append( 
    "&lt;span class='btn-delete ui-icon ui-icon-trash'&gt;&lt;/span&gt;"); 
    $('.btn-delete').click(function(){
    var elem = $(this).closest(".galleria-image").find('.item'); 
        $.confirm({
            'title'     : 'Delete Confirmation',
            'message'   : 'You are about to delete this item. &lt;br /&gt;It cannot be restored at a later time! Continue?',
            'buttons'   : {
                'Yes'   : {
                    'class' : 'blue',
                    'action': function(){
                        elem.slideUp();
                              $.ajax({
                                url : 'delete.php',
                                type : 'post',
                                data : { image : img.attr('src'),  idnum: "VALUE", lid: "VALUE"},
                                success : function(){
                                img.parent().fadeOut('slow');
                                }
                            }); 

                    }
                },
                'No'    : {
                    'class' : 'gray',
                    'action': function(){}  // Nothing to do in this case. You can as well omit the action property.
                }
                }
                }
            }
        });

    });

});
&lt;/script&gt;
</code></pre>

<p>The problem I'm having is that although the page loads, it doesn't load in the default <code>Gallery</code> image format, and the <code>trash icon</code> which I use as a visual trigger to delete the image has disappeared at the bottom of each image.</p>

<p>I've gone into the JavaScript Console and the error it shows is:<code>Uncaught SyntaxError: Unexpected token }</code>highlighting this line in my code as the problem: <code>$.confirm({</code> but I have to be honest and say I'm not really sure what this means.</p>

<p>I've tried quite a few variations of changing the code around to try and get this to work, unfortunately without success.</p>

<p>I just wondered whether someone could possibly take a look at this please and provide some guidance on where I'm going wrong.</p>

<p>Many thanks and kind regards</p>

<p><strong>Working solution</strong></p>

<pre><code>&lt;script type="text/javascript"&gt; 
Galleria.ready(function() {
this.$('thumblink').click();
$(".galleria-image").append( 
"&lt;span class='btn-delete ui-icon ui-icon-trash'&gt;&lt;/span&gt;"); 
$('.btn-delete').click(function(){
var img = $(this).closest(".galleria-image").find('img'); 
    $.confirm({
        'title'     : 'Delete Confirmation',
        'message'   : 'You are about to delete this item. &lt;br /&gt;It cannot be restored at a later time! Continue?',
        'buttons'   : {
            'Yes'   : {
                'class' : 'blue',
                'action': function(){
                    //elem.slideUp();
                          $.ajax({
                            url : 'delete.php',
                            type : 'post',
                            data : { image : img.attr('src'),  idnum: "VALUE", lid: "VALUE"},
                            success : function(){
                            img.parent().fadeOut('slow');
                            }
                        }); 

                }
            },
            'No'    : {
                'class' : 'gray',
                'action': function(){}  // Nothing to do in this case. You can as well omit the action property.
                 }
               }
            });
        });
    });
    &lt;/script&gt;
</code></pre>
