Javascript Double-Click Element
<p>Hey guys.. Quick question:</p>

<p>I wrote a simple JS that opens lightBox for image viewing when an image link is clicked. Basically, using jQuery (yes, I was that lazy), I detect the click of an anchor tag, use a regex to make sure that the HREF attribute is to an image file, and if it is, it opens the image in lightBox. It all works fine, except one thing: The anchor needs two clicks before it will open lightBox. Why is that?</p>

<p>Here's the script I wrote:</p>

<pre><code>    $(document).ready(function(){
 var href;
 var imageExtensions = /(.)+(.jpg)|(.png)|(.gif)|(.bmp)/;
 //On click of any link
 $("a").live("click",function(event){
  href = $(this).attr("href");
  //If the target URL is an image, use lightbox to open it
   if(imageExtensions.test(href)){
    event.preventDefault();
    $(this).attr("class","lightboxIMG");
    //Prevent the link from opening, and open lightbox
    $(".lightboxIMG").lightBox();
    $(this).attr("class","");
   }
 });
//END 
});
</code></pre>

<p>I don't see what could be causing the user to have to click twice to activate lightBox. If you need a sample to see what I'm referring to, I'm currently using the script in a beta of my new website: <a href="http://ctrlshiftcreate.com/photography.php?photo=6&amp;r%5Ffolder=" rel="nofollow">http://ctrlshiftcreate.com/photography.php?photo=6&amp;r_folder=</a> </p>

<p>Click "View full size" to see what I mean. I'd greatly appreciate any help - thanks a lot!</p>
