Question

This example shows what I am trying to do: http://jsfiddle.net/Dqjvy/

I would like it to work so that when you click the input to delete the file, this works without loading fancybox.

How can I stop fancybox from loading when you click the input? This is also preventing the form from submitting because fancybox is loaded?

HTML:

<a class="fancybox" rel="fancybox" href="http://farm7.staticflickr.com/6048/6370091853_fa920568e4_b.jpg" title="Tree and Bench, Newlands Corner (craig.denford)">
    <img src="http://farm7.staticflickr.com/6048/6370091853_fa920568e4_m.jpg" alt="">
    <input type="button" onClick="return confirm('Are you sure you want to delete this file?');" value="Delete" name="delete_file" />
</a>

<a class="fancybox" rel="fancybox" href="http://farm7.staticflickr.com/6032/6370797521_74a61aec56_b.jpg" title="Brighton West Pier (George-Edwards)">
    <img src="http://farm7.staticflickr.com/6032/6370797521_74a61aec56_m.jpg" alt="">
    <input type="button" onClick="return confirm('Are you sure you want to delete this file?');" value="Delete" name="delete_file" />
</a>

<a class="fancybox" rel="fancybox" href="http://farm7.staticflickr.com/6182/6059490424_451d8d75b8_b.jpg" title="Romantic sunset.  EXPLORE (Grbavica)">
    <img src="http://farm7.staticflickr.com/6182/6059490424_451d8d75b8_m.jpg" alt="">
    <input type="button" onClick="return confirm('Are you sure you want to delete this file?');" value="Delete" name="delete_file" />
</a>

<a class="fancybox" rel="fancybox" href="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_b.jpg" title="Fog (giulio bassi q°ן°p)">
    <img src="http://farm7.staticflickr.com/6106/6347065961_bb73745e70_m.jpg" alt="">
    <input type="button" onClick="return confirm('Are you sure you want to delete this file?');" value="Delete" name="delete_file" />
</a>

JavaScript:

$('.fancybox').fancybox();

/*$('.fancybox').click(function(e) {
    e.preventDefault();
    $(this).fancybox();
});*/

Answer 1

Replace the onClick-attributes of the buttons with a class-attribute, and add this click-handler in your js:

HTML:

<input class="delete" type="button" value="Delete" name="delete_file" />

JS:

$('.delete').click(function() {
    if (confirm('Are you sure you want to delete this file?')) {
        // TODO: delete file
        alert('deleted');
    }    
    return false;
});

Also see this example.