Safari and Chrome .hide .show issue
I have been searching for an answer for this for most of the day and can't find anything relevant to what I have going on and am hoping someone here can point me in the right direction. The problem is a light box I built, when you click on an image the large image shows up in a light box along with a close link. Works fine in everything except Safari and Chrome. The image shows up the first time you click on the smaller one but subsequent clicks get an empty light box.
Here's the code:
function ChangeLightBoxImage(image_num, gall_num)
{
$('#l_image').hide()
.load(function () {
$(this).show();
})
.attr('src', "/images/galleries/" + gall_num + "/" + image_names[image_num]);
}
If I remove the .hide() it works in both of them but of course the previous image shows up until the new one is loaded.
I added some alerts before the .load and after it, both alerts fire the first time in all browsers but the 2nd time the smaller image is clicked on the 2nd alert does not fire (after the .load)
Any help would be appreciated, beating my head on the desk over here