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: http://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.

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

Name	Description	Type	Default	Optional	Version
type	This defines what kind of window will open. Options: inline, iframe, document, media		inline	yes
link	If calling only one inline modal, this does not need to be set. If calling multiple inline modals on a single page, each call must have a unique one word name. If using in any other type, this must by the url of the item to view.		sekfancybox	inline only
linktext	Text to display as the link on the page.
text	Text to display in the modal window.	inline only
header	Heading that will appear in modal window above the text with <h3></h3> tag.	inline only		yes
modalwidth	Change the width of the modal window displayed on screen.	inline only	400	yes
title	Title displays below the modal window, useful for images.			yes
modalclass	This changes the class name of the modal box. This must be used if using different options on multiple modals on a single page. (i.e. using thumbnailhelper for a group of images set to one class, and using buttonhelper on a group of images of another class.) It is good practice to assign a class to all modal windows to prevent future problems if another modal is added to the page.		fancybox	yes
group	Used to group images on a page together. This will create a modal slideshow.	media only		yes
mousewheel	Will allow the mousewheel to scroll through the images of a group. Set to 1 to use.	media only	0	yes
buttonhelper	Adds buttons above the modal window to help navigate images in a group. Set to 1 to use.	media only	0	yes
thumbnailhelper	Adds thumbnails below modal window of all the images of a group. Set to 1 to use.	media only	0	yes
customjs	For advanced use, custom javascript can be made, place the url of the js in this property. For more information on how to customize fancyBox, check out there website.			yes
customcss	To customize the appearance of the modal window, supply the url of the css file to use.			yes
loadjquery	sekFancyBox comes with JQuery 1.7.1 min within the package and loads automatically. If other extras are used on the same page that load JQuery, errors can occur. To turn off the auto-load of JQuery, change this option to `0`. (Depending on the order in which extras are installed on a site, and whether the js loads in the head or the end of the page, will decide the order the js files load. If JQuery loads after the the fancybox js, errors can occur. If other extras permit, do not load JQuery through any extras, instead load it in the template and set the 'sekfancybox.load_jquery' system setting to false.) If system setting 'sekfancybox.load_jquery' is set to false, loadjquery can be set to `1` to load JQuery on that page.		1	yes	0.0.2

Available Settings

Name	Description	Default	Version
sekfancybox.load_jquery	This will enable or disable JQuery from being loaded when sekFancyBox is called on a page. If JQuery is being loaded from another extra used on the same pages as sekFancyBox, or it is loaded in a template, this setting should be set to No/False. The loadjquery option will override whatever this setting is set to.	Yes/True	0.0.2

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.7.1.min.js"></script>

Examples

Below are some basic examples.

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`
]]

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`
]]