sekFancyBox

What is sekFancyBox?¶

SekFancyBox is a port of fancyBox 2.0.4 ( it can be found on the fancyBox website). It was made to standardize the modal popups across a website quickly and easily.

Requirements¶

• MODX Revolution 2.1.0-RC-2 or later
• PHP5 or later

While I have tested in Modx 2.1, this may work in older versions. SekFancy box is a simple program, it makes no calls to any database and has no manager pages to support.

History¶

SekFancyBox was written by Stephen Smith, and first released on Feb 1st, 2012.

Download¶

It can be downloaded from within the MODX Revolution manager via Package Management, or from the MODX Extras Repository, here: https://modx.com/extras/package/sekfancybox.

Development and Bug Reporting¶

SekFancyBox is on GitHub: https://github.com/insomnix/sekFancyBox, report any issues or feature requests here: https://github.com/insomnix/sekFancyBox/issues.

Watch for news about sekFancyBox at http://www.seknetsolutions.com/modx-extras/sekfancybox

Usage¶

The sekFancyBox is called through a single snippet using the tag:

[[sekfancybox]]

There are several properties that must be set based on the type of modal window that is being called:

Available Properties¶

Helpers Options¶

There are several options and sub options that can be set in the helpers properties.

&helpers=`{
"title":{"type":"inside"},
"overlay":{"opacity": 0.8,"css":{"'background-color'": "#000"}},
"thumbs":{"width": 50,"height": 50},
}`

&helpers=`{
"title":"null",
"overlay":"null"
}`

Available Settings¶

Loading JQuery Manually In Your Template¶

Make sure when loading jquery in a template, and setting sekFancyBox's load jquery option to false, that " type="text/javascript" " is defined in your script tag. If this is not done, sekFancyBox will not function correctly.

<script type="text/javascript" src="assets/js/libs/jquery-1.8.3.min.js"></script>

Examples¶

Below are some basic examples. You can also view the sekFancyBox & Gallery example.

Inline Type¶

Display inline is default behavior, and is easy to call with just two properties:

[[sekfancybox?
 &linktext=`Text to display as a link`
 &text=`Text that will display in the modal window.`
]]

For multiple inline modal windows on a single page, the link property must be set to prevent clashing modal windows (remember that for the inline type this must not have any spaces):

[[sekfancybox?
 &link=`modal-one`
 &linktext=`Text 1 to display as link`
 &text=`Text 1 that will display in the modal window.`
]]

[[sekfancybox?
 &link=`modal-two`
 &linktext=`Text 2 to display as link`
 &text=`Text 2 that will display in the modal window.`
]]

This can become more complex by calling several options:

[[sekfancybox?
 &link=`modal`
 &linktext=`Text to display as link`
 &title=`displays under modal`
 &text=`Text that will display in the modal window.`
 &modalwidth=`600`
 &header=`Displays at top of modal window`
]]

Iframe Type¶

Define type as iframe to display another website within your own site, type of iframe must be used:

[[sekfancybox?
 &type=`iframe`
 &linktext=`SEKNet Solutions`
 &link=`<http://www.seknetsolutions.com>`
]]

If linking to an external website, it is recommended one defines a weblink resource, then call that weblink resource by the id ( &link=[[~22]] ).

Document Type¶

Define type as document to display a file within your own site ( can be htm, or even txt file):

[[sekfancybox?
 &type=`document`
 &linktext=`link to document`
 &link=`[[~19]]`
]]

This is nice to display large amounts of formatted information without placing it inline on the current page. Use this for calling a resource with an empty template, or defining a "BlankTemplate" (defining a "BlankTemplate" would allow one to use tags like [[*pagetitle]], where empty templates will only display the content itself).

If linking to a .txt file, it is recommended one defines a static resource, then call that static resource by the id.

Media Type¶

Define type as media to display images or even flash:

[[sekfancybox?
 &type=`media`
 &linktext=`<img src="thumbs/image.jpg" />`
 &link=`images/image.jpg`
]]

[[sekfancybox?
 &type=`media`
 &linktext=`SWF File`
 &link=`[http://www.adobe.com/jp/events/cs3\_web\_edition\_tour/swfs/perform.swf](http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf)`
]]

If linking to an external website, it is recommended one defines a weblink resource, then call that weblink resource by the id ( &link=[[~122]] ).

Media Type Groups¶

In the below example, the four photos are set up in two groups. Group1 is using the thumbnailhelper option, and group2 is using the buttonhelper option. The modalclass is used here because there are two groups using different options within each group. This will cause conflicts if both groups are using the same class.

[[sekfancybox?
 &type=`media`
 &linktext=`<img src="thumbs/image1.jpg" />`
 &link=`images/image1.jpg`
 &modalclass=`class-thumb`
 &thumbnailhelper=`1`
 &group=`group1`
]]

[[sekfancybox?
 &type=`media`
 &linktext=`<img src="thumbs/image2.jpg" />`
 &link=`images/image2.jpg`
 &modalclass=`class-thumb`
 &thumbnailhelper=`1`
 &group=`group1`
]]

[[sekfancybox?
 &type=`media`
 &linktext=`<img src="thumbs/image3.jpg" />`
 &link=`images/image3.jpg`
 &modalclass=`class-button`
 &buttonhelper=`1`
 &group=`group2`
]]

[[sekfancybox?
 &type=`media`
 &linktext=`<img src="thumbs/image4.jpg" />`
 &link=`images/image4.jpg`
 &modalclass=`class-button`
 &buttonhelper=`1`
 &group=`group2`
]]