Stop Fancybox 1.3 from closing when clicking outside image

Question

I searched and found some questions about this before but none of the answers worked. What I want it to do is not close when I click outside the image but only on clicking the X in the corner.

I tried lots of different ideas and some made the image just open in the same framewhile some worked except that now the X in the corner was gone so I couldn´t close it at all.

The thing that got me closest was the "modal:true" but the X dissapeared using this.

Here´s my page and the images are under "Fotografier" in the menu: http://esoxluciusdegothia.blogg.se

The code I have for Fancybox is:

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>

As I said, most of the 'answers' I tried just made the picture open in the same window like if it was a direct link to the picture. I want them to pop out and get navigation buttons + close button

score 2 · Answer 1 · answered Mar 10 '13 at 18:57

For fancybox v1.3.x use these API options :

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox({
           "hideOnOverlayClick" : false, // prevents closing clicking OUTSIE fancybox
           "hideOnContentClick" : false, // prevents closing clicking INSIDE fancybox
           "enableEscapeButton" : false  // prevents closing pressing ESCAPE key
        });
    });
</script>

... so the only way to close fancybox is pressing the close button.

score 1 · Answer 2 · edited May 23 '17 at 11:49

1

edit: This answer concerns fancyBox 2. See JFK's answer for the fancyBox 1.3 way.

If you look at fancyBox code, you'll notice the modal setting is just a shortcut:

// 'modal' propery is just a shortcut
if (coming.modal) {
    $.extend(true, coming, {
        closeBtn   : false,
        closeClick : false,
        nextClick  : false,
        arrows     : false,
        mouseWheel : false,
        keys       : null,
        helpers: {
            overlay : {
                closeClick : false
            }
        }
    });
}

In your case, what you want is:

$('.fancybox').fancybox({
    helpers: {
        overlay: {
            closeClick: false
        }
    }
});

edited May 23 '17 at 11:49

Community

1
1

answered Mar 10 '13 at 15:54

Gras Double

15,901
8
56
54

If you read carefully the title of the question, it says **"...Fancybox 1.3 ..."**; your answer would be OK for v2.x though. – JFK Mar 10 '13 at 18:58
Thanks, I've added a note at the top of my answer. I'm keeping it though, the info may be useful for some people. Last fancyBox 1 is from 2010, maybe it is time to move to fancyBox 2 ;-) – Gras Double Mar 10 '13 at 19:13
1

`maybe it is time to move to fancyBox 2` : People may not want to move to v2.x due to its **[licensing scheme](http://fancyapps.com/fancybox/#license)**. – JFK Mar 10 '13 at 19:19
... and for v2.x it was already answered since Dec 2011 here http://stackoverflow.com/a/8404587/1055987 ;) – JFK Mar 10 '13 at 19:21
Good point about the licensing. For reference, fancyBox 1 is under dual MIT/GPL. – Gras Double Mar 10 '13 at 20:06
Thank you all for your help! Now it's working perfectly. You guys are awesome – Christian_J Mar 11 '13 at 11:35

Stop Fancybox 1.3 from closing when clicking outside image

2 Answers2