0

I have made a lightbox-style gallery using jquery: http://jsfiddle.net/ncD9H/ What works in this fiddle and chrome does not work on any other browser.

I have thumbnails inside <a> tags:

<div id="gallery">
            <a class="trigger" href="images/fulls/01.jpg">
                <img class="thumb" src="images/thumbs/01.jpg">
            </a>
            <a class="trigger" href="images/fulls/02.jpg">
                <img class="thumb" src="images/thumbs/02.jpg">
            </a>
            <a class="trigger" href="images/fulls/03.jpg">
                <img class="thumb" src="images/thumbs/03.jpg">
            </a>
</div>

And when I click the thumbnail, it switches to the fullview with the following jquery script:

$('.trigger').click(function(e){
    e.preventDefault();  
    $('.lightbox').fadeIn(200);
    $('#main').foggy();
    var imageSource =$(this).attr('href');
    $('.lightbox>img').attr('src',imageSource);
    });

The fullview is switched off when the full image is clicked on:

$('.lightbox>img').click(function(){
        $('.lightbox').fadeOut(200);
        $('#main').foggy(false);
    });

When I click a thumbnail and open the fullview, and then click the full image to exit lightbox, $('.trigger').click(function(e){ ...}); does not work at all. When I click a thumbnail a second time, the browser just navigates to the full image.

So I've tried the following: I've refreshed the page, clicked a thumbnail to open the fullview, then exited the full view by clicking the picture again. Then, in the console, I've typed:

$('.trigger').click(function(e){
    e.preventDefault();
});

When I clicked the thumbnail again, the browser did nothing, as dictated by the function. But I am guessing that this means the original function, for some reason, becomes inaccessible for a second clicking. Why does this happen, why does it work on chrome, and how can I fix it?

Note: foggy() is a jquery plugin that blurs the background.

4

1 回答 1

1

It's working as expected (not opening the link right?) in Safari (6.0.5) and Firefox (23.0.1) for me. It's a silly question but did you try to clear the cache ?

Anyhow, if you don't want at anytime that the browser send the user to the linked picture, I would suggest you to not use <a>. It will save you a lot of time of figuring out how to prevent all browsers to do what <a> is meant to do.

于 2013-08-20T08:14:53.507 回答