Open fancybox from function

Question

I am trying to open a fancybox from a function I have - in short my HTML code looks like this    lt a href   modalMine  onclick  myfunction this   return false   gt    click  lt  a gt    and a part of my function looks like this   function myfunction me          me  fancybox            autoScale   true           transitionIn    elastic            transitionOut    elastic            speedIn   500           speedOut   300           autoDimensions   true           centerOnScroll   true              The above works in IE but not in FireFox or Chrome - any idea how I can fix this  I know that one why is to trigger another link  but I hope another solution is possible

User · Accepted Answer

Since you re using jQuery  stop binding event handlers in your HTML  and start writing unobtrusive JavaScript     document  ready function          function myfunction me                  me  fancybox                autoScale   true               transitionIn    elastic                transitionOut    elastic                speedIn   500               speedOut   300               autoDimensions   true               centerOnScroll   true    remove the trailing comma              click               fire the click event after initializing fancybox on this element            this should open the fancybox               use  one   so that the handler is executed at most once per element        a href  modalMine    one  click   function                  myfunction this           return false                However  I don t particularly see a reason for setting up the fancybox on click  You could just do this instead     document  ready function          function myfunction                    note the use of  this  rather than a function argument           this  fancybox                autoScale   true               transitionIn    elastic                transitionOut    elastic                speedIn   500               speedOut   300               autoDimensions   true               centerOnScroll   true                           a href  modalMine    each myfunction         Basic demo  no images    x2192

User · Answer

Make argument object extends from  lt a gt     and use open function of fancybox in click event via delegate       var paramsFancy             autoScale   true            transitionIn    elastic             transitionOut    elastic             speedIn   500            speedOut   300            autoDimensions   true            centerOnScroll   true            href      contentdiv                  document  delegate  a href  modalMine    click  function                     Now you can call your function      you can change fields of paramsFancy via this function                     myfunction this                    paramsFancy href   this  attr  href                      fancybox open paramsFancy

User · Answer

if jQuery fancybox open is not available  on fancybox 1 3 4  you may need to use semafor to get around the recursion problem     lt a href   index html  onclick  return myfunction this   gt click me lt  a gt    lt script gt   var clickSemafor   false  myfunction el     if   clickSemafor       clickSemafor   true      return false     do nothing here when in recursion     var e   jQuery el     e fancybox       type   iframe       href  el href         e click        you could also use e trigger  click     return false     prevent default     lt  script gt

User · Answer

The answers seems a bit over complicated  I hope I didn t misunderstand the question    If you simply want to open a fancy box from a click to an  A  tag  Just set your html to   lt a id  my fancybox  href   contentdiv  gt click me lt  a gt    The contents of your box will be inside of a div with id  contentdiv  and in your javascript you can initialize fancybox like this       my fancybox   fancybox        autoScale   true       transitionIn    elastic        transitionOut    elastic        speedIn   500       speedOut   300       autoDimensions   true       centerOnScroll   true        This will show a fancybox containing  contentdiv  when your anchor tag is clicked

User · Answer

Here is working code as per the author s Tips  amp  Tricks blog post  put it in document ready         mybutton   click function            fancybox   trigger  click             This triggers the smaller version of the currently displayed image or content  as if you had clicked on it manually  It avoids initializing the Fancybox again  but instead keeps the parameters you initialized it with on document ready  If you need to do something different when opening the box with a separate button compared to clicking on the box  you will need the parameters  but for many  this will be what they were looking for

User · Answer

function myfunction            classname   fancybox   trigger  click         It works for me

User · Answer

lt div class  img file  style  background-image  url   upload test 14120330 jpg    data-img   upload test 14120330 jpg  gt  lt  div gt   lt div class  img file  style  background-image  url   upload test 14120330 jpg    data-img   upload test 14120330 jpg  gt  lt  div gt      if     img file data-img    length                    var imgs slider img                           img file data-img    each function i                        imgs slider img push                           href   this  attr  data-img                                                 this  attr  data-index-img   i                      on  click   function e                        e preventDefault                          fancybox open imgs slider img                             index    this  attr  data-index-img                             padding  0                           margin  0                           prevEffect   elastic                            nextEffect   elastic                            maxWidth   90                             maxHeight   90                             autoWidth  true                           autoHeight  true

User · Answer

If you d like to simply open a fancybox when a javascript function is called  Perhaps in your code flow and not as a result of a click  Here s how you do it   function openFancybox         fancybox         autoScale   true        transitionIn    elastic         transitionOut    elastic         speedIn   500        speedOut   300        autoDimensions   true        centerOnScroll   true        href      contentdiv            This creates the box using  contentdiv  and opens it

User · Answer

You do not have to trigger a click event  you can do it with fancybox type as ajax   nbsp     fancybox open         href   http                    type   ajax

User · Answer

You don t have to add you own click event handler at all  Just initialize the element with fancybox     function            a href   modalMine     fancybox            autoScale   true           transitionIn    elastic            transitionOut    elastic            speedIn   500           speedOut   300           autoDimensions   true           centerOnScroll   true     as MattBall already said  remove the comma               Done  Fancybox already binds a click handler that opens the box  Have a look at the HowTo section     Later if you want to open the box programmatically  raise the click event on that element      a href   modalMine     click

User · Answer

What you need is     fancybox open              See the  API methods  section at the bottom of here   http   fancyapps com fancybox

[javascript] Open fancybox from function

Examples related to javascript

Examples related to jquery

Examples related to fancybox