Skip to content

A customized version of Fancybox version 1 which adds some of the features of Fancybox 2

License

Notifications You must be signed in to change notification settings

kuali/fancybox-kuali

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This is a new version of the Fancybox 1.x (http://fancybox.net/) code base which adds a few similar features in Fancybox 2.x.

It implements the following:

  • Adds an isOpen() function to Fancybox that functions like the Fancybox v2 isOpen property.
  • Adds support for beforeClose, afterClose and afterShow callbacks from Fancybox v2.

If you are looking to downgrade a KRAD-related application from Fancybox 2 to this version, you will also need to be sure to look at the following:

  • The HTML is fairly different between these versions. Specifically, Fancybox 1 uses "id" instead of "class" on the HTML elements. You will also probably want to do the following if you have coded against the CSS class names from Fancybox 2:
    • Replace any references to .fancybox-skin with #fancybox-outer
    • Replace any references to .fancybox-wrap with #fancybox-wrap
    • Replace any references to .fancybox-frame with #fancybox-frame
    • Replace any references to .fancybox-inner with #fancybox-content
  • Fancybox 1 works best with "content-box" as the box sizing model. If your application sets CSS box-sizing to "border-box" by default (which will be the case if using Bootstrap) then you need to change the fancybox using a snippet as follows: #fancybox-wrap { box-sizing: content-box; }
  • If you are opening the fancybox manually in your code, then you will want to look at the options on both fancybox 1 and fancybox 2 and change them as needed.

For example, in KRAD internally, Fancybox 2 was initialized like:

{
  fitToView: true,
  openEffect: 'fade',
  closeEffect: 'fade',
  openSpeed: 200,
  closeSpeed: 200,
  minHeight: 10,
  helpers: {
    overlay: {
      css: {
        cursor: 'arrow'
      },
      closeClick: false
    }
  }
}

With Fancybox 1 the following is roughly equivalent:

{
  autoScale: true,
  transitionIn: 'fade',
  transitionOut: 'fade',
  speedIn: 200,
  speedOut: 200,
  hideOnContentClick: false,
  padding: 0
}

Further documentation on the API for Fancybox 1 can be found at:

http://fancybox.net/api

And futher documentation on the API for Fancybox 2 can be found at:

http://fancyapps.com/fancybox/#docs

About

A customized version of Fancybox version 1 which adds some of the features of Fancybox 2

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published