Organizational Research By

Surprising Reserch Topic

fancybox bug with trigger click


fancybox bug with trigger click  using -'javascript,jquery,fancybox'

I have to run fancybox with trigger click in my website, the problem that i discovered is that with this method if you click on elements inside the fancy box, the fancy box will close and appear again (blinks) .

i want fancybox to prevent blinking when i click on elements inside the box and when i click on those elements i don't want to see any changes, thats all :)

i created demo for this problem

http://jsfiddle.net/NhWLc/5/

<div id="a1">
  <p>Click on the box</p>
  <div class="r"></div>
</div>

$(document).ready(function() {
  $('#a1').fancybox({   
    afterClose: function() {
      console.log('closed :( ');
    }
  }).click();// or .trigger('click');
});


any idea?
    

asked Sep 15, 2015 by WalterTDKmy
0 votes
66 views



Related Hot Questions

4 Answers

0 votes

The problem with your code is that you are making the selector #a1 to act as both : the trigger and the target of fancybox therefore any click on itself will fire fancybox over and over again.

You would need to create another selector (the trigger) that targets the #a1 element like

triggers fancybox

Click on the box

if you don't want the element .fancybox be visible, just add a display:none property

Then your js

$(document).ready(function () {
    $('.fancybox').fancybox({
        afterClose: function () {
            console.log('closed :( ');
        }
    }).trigger('click');
});

See JSFIDDLE

EDIT : looking at you sample JSFIDDLE, things could have been much simpler.

Having just this html

Click on the box

you could use this code

$(document).ready(function () {
    $.fancybox({
        href: "#a1"
    });
});

where no click is needed.

See you updated JSFIDDLE

answered Sep 15, 2015 by AnyaZ62jwudj
0 votes

I don't know it will be helpful or not just try this,

$(document).ready(function(e)
{
e.preventDefault();   
            $('#a1').fancybox({ 
                afterClose: function()
                {
                    console.log('closed :( ');
                }
            }).click();// or .trigger('click');

});
answered Sep 15, 2015 by ShielaKVNQdy
0 votes

Use this below html,add id to

and

Click on colors

check here

----------------------Update----------------

add afterShow() to your jquery

$('#a1').fancybox({ 
    afterClose: function()
            {
            console.log('closed :( ');
            },
            afterShow:function()
            {
                $('#a1').click(function(){return false;});
            }

        }).click();

Check again

answered Sep 15, 2015 by EzekielHopwo
0 votes

I had the same symptom of an unclickable Fancybox overlay. My client wanted to be able to link and automatically open up a certain Fancybox, like http://yoursite.com/#signup to open up an inline 'signup' Fancybox overlay. Thanks to JFK I realized I was triggering and targeting the element with the ID of 'signup' rather than the element with the href attribute of '#signup'. I got it to hook onto the last portion of the URL (i.e. #signup) and look up the matching 'a' href attribute, and to trigger a click on that element.

The demo below doesn't really help portray this, but you get to see the code.

http://jsfiddle.net/ca7no4yp/2/

The juicy bit:

$("a[href='#" + location.href.substr(location.href.indexOf('#')+1) + "']").fancybox().trigger('click');
answered Sep 15, 2015 by KathleneBrak

...