1. AdvSearch
      1. AdvSearch.AdvSearch
        1. AdvSearch.AdvSearch.tpl
        2. AdvSearch.Advsearch.paging1Tpl
        3. AdvSearch.AdvSearch.paging0Tpl
        4. AdvSearch.AdvSearch.containerTpl
        5. Advsearch.AdvSearch.extractTpl
      2. AdvSearch.AdvSearchHelp
        1. AdvSearch.AdvSearchHelp.helplinkTpl
      3. AdvSearch.AdvSearchForm
        1. Advsearch.AdvSearchForm.tpl
    2. userTools
    3. ActivationEmail
    4. BotBlockX
    5. CacheClear
    6. CacheMaster
    7. Canonical
    8. Captcha
    9. CaseInsensitiveURLS
    10. ClassExtender
    11. ConstantContact
    12. ConvertDatabaseCharset
    13. DefaultResourceGroup
    14. DefaultUserGroup
    15. DirWalker
    16. EmailResource
    17. EZfaq
    18. FileUpload
    19. FixedPre
    20. getDynaDescription
    21. GoRevo
    22. LexiconHelper
    23. LogLogins
    24. LogPageNotFound
    25. MandrillX
    26. MessageManager
    27. NewsPublisher
    28. Notify
    29. ObjectExplorer
    30. Orphans
    31. Personalize
    32. QuickEmail
    33. ReflectBlock
    34. RefreshCache
    35. SiteAtoZ
    36. SiteCheck
    37. SizeMatters
    38. SPForm
    39. StageCoach
    40. Subscribe
    41. SyntaxHighlighter
    42. ThermX
    43. UpgradeMODX
    44. cookieJar
    45. getYoutube
    46. aliasid
    47. AddHeaderfiles
    48. AjaxUpload
    49. amazonSES mailing list
    50. Analytics
    51. Archivist
      1. Archivist.Archivist
        1. Archivist.Archivist.tpl
      2. Archivist.ArchivistGrouper
      3. Archivist.getArchives
        1. Archivist.getArchives.tpl
    52. Articles
      1. Articles.Theming Articles
      2. Articles.Roadmap
      3. Articles.Retrieving Articles Outside of Articles
      4. Articles.Creating a Blog
    53. Babel
      1. Babel.BabelLinks
      2. Babel.BabelTranslation
    54. BannerX
    55. BannerY
    56. Batcher
      1. Batcher.Roadmap
    57. bdListings
      1. bdListings.bdCategories
      2. bdListings.bdHookNewListing
      3. bdListings.bdListings
      4. bdListings.bdPriceGroups
      5. bdListings.bdRedirect
      6. bdListings.bdTargets
    58. boilerX
      1. bx-head-open
      2. bx-head-append
      3. bx-head-close
      4. bx-container-open
      5. bx-container-close
      6. bx-bottom-open
      7. bx-bottom-close
    59. BreadCrumb
      1. BreadCrumb.containerTpl
      2. BreadCrumb.currentCrumbTpl
      3. BreadCrumb.linkCrumbTpl
      4. BreadCrumb.maxCrumbTpl
      5. BreadCrumb.categoryCrumbTpl
      6. BreadCrumb.homeCrumbTpl
    60. Breadcrumbs
    61. BxrExtra
    62. cachebuster
    63. CamperManagement
      1. CamperManagement.Customizing the Component
      2. CamperManagement.Developing the front-end
        1. CamperManagement.cmCamperDetails Snippet
        2. CamperManagement.cmCampers Snippet
        3. CamperManagement.Placeholders you can use
      3. CamperManagement.Managing your vehicle
      4. CamperManagement.Module home
    64. Church Events Calendar
      1. ChurchEvents.MODX Manager functions
      2. ChurchEventsCalendar Snippet
        1. ChurchEvents.Managing events
      3. ChurchEventsList Snippet
      4. ChurchEventsRss Snippet
    65. Cliche
    66. ClientConfig
    67. CMPGenerator
      1. CMPGenerator.5 minute example
      2. CMPGenerator.Foreign Databases
    68. Collections
    69. ContextRouter
    70. CookieList
    71. CronManager
    72. cssSweet
      1. cssSweet.lighten
      2. cssSweet.modval
      3. cssSweet.prefix
    73. CustomUrls
    74. Databackup
    75. Discuss
      1. Discuss.ChunkMap
      2. Discuss.Contributing
      3. Discuss.Controllers
        1. Discuss.Controllers.board
          1. Discuss.Controllers.board.xml
        2. Discuss.Controllers.home
        3. Discuss.Controllers.login
        4. Discuss.Controllers.logout
        5. Discuss.Controllers.profile
        6. Discuss.Controllers.register
        7. Discuss.Controllers.search
        8. Discuss.Controllers.thread
      4. Discuss.Creating a Discuss Theme
      5. Discuss.Database Model
      6. Discuss.Features
      7. Discuss.Getting Started
      8. Discuss.Installation
        1. Discuss.Installation from Git
      9. Discuss.Roadmap
      10. Configuring Sphinx for Search
    76. DitsNews
    77. Eletters
      1. Eletters.API
      2. Eletters.FormIt
      3. Eletters.Import CSV
      4. Eletters.Templates
    78. EventManager
      1. EventManager.emListEvents
      2. EventManager.emNewReservationHook
    79. eventsCalendar2
      1. eventsCalendar2.eventsCalendar2
      2. eventsCalendar2.Generating events
      3. eventsCalendar2.tplCalendar2
      4. eventsCalendar2.tplCell2
      5. eventsCalendar2.tplEvent2
      6. eventsCalendar2.tplHead2
    80. EventsX
      1. EventsX.Examples
    81. ExerPlan
    82. fastField
    83. FileDownload R
      1. FileDownload R.FileDownload
      2. FileDownload R.FileDownloadLink
      3. FileDownload R.Plugins
    84. FileLister
      1. FileLister.FileLister
        1. FileLister.FileLister.directoryTpl
        2. FileLister.FileLister.fileLinkTpl
        3. FileLister.FileLister.fileTpl
        4. FileLister.FileLister.pathTpl
      2. FileLister.Roadmap
    85. FirstChildRedirect
    86. Flexibility
    87. ForcedPasswdChange
    88. FormIt
      1. FormIt.FormItCountryOptions
      2. FormIt.FormItRetriever
      3. FormIt.FormItStateOptions
      4. FormIt.Hooks
        1. FormIt.Hooks.email
        2. FormIt.Hooks.FormItAutoResponder
        3. FormIt.Hooks.math
        4. FormIt.Hooks.recaptcha
        5. FormIt.Hooks.redirect
        6. FormIt.Hooks.spam
        7. FormIt.Hooks.FormItSaveForm
      5. FormIt.Roadmap
      6. FormIt.Tutorials and Examples
        1. FormIt.Examples.Custom Hook
        2. FormIt.Examples.Simple Contact Page
        3. FormIt.Handling Selects, Checkboxes and Radios
        4. FormIt.Using a Blank NoSpam Field
        5. Form and anchors
      7. FormIt.Validators
    89. FormIt2db
    90. FormitFastPack
      1. FormitFastPack Tutorial
      2. fieldSetDefaults
      3. field
      4. fiGenerateReport
      5. fiProcessArrays
    91. FormSave
    92. FoundationX
      1. FoundationX.How to Use FoundationX
    93. FX2themebase
      1. FX2.How to Use FX2
        1. FX2.For Theme Authors
      2. FX2.Included Extras
    94. Gallery
      1. Gallery.Example1
      2. Gallery.Gallery
        1. Gallery.Gallery.containerTpl
        2. Gallery.Gallery.thumbTpl
        3. Assigning a Gallery album to a specifc resource
      3. Gallery.GalleryAlbums
        1. Gallery.GalleryAlbums.rowTpl
        2. Gallery.GalleryAlbums.containerTpl
      4. Gallery.GalleryItem
        1. Gallery.GalleryItem.albumTpl
        2. Gallery.GalleryItem.GalleryItemPagination
        3. Gallery.GalleryItem.tagTpl
        4. Gallery.GalleryItem.tpl
      5. Gallery.Plugins
        1. Gallery.Plugins.Galleriffic
        2. Gallery.Plugins.Slimbox
      6. Gallery.Roadmap
      7. Gallery.Setting Up the GalleryItem TV
      8. Gallery.Setting Up Your Gallery
    95. GatewayManager
    96. gCal
    97. getDate
    98. getFeed
      1. getFeed.Adding a Twitter Feed
    99. getPage
    100. getRelated
    101. getResourceField
    102. getResources
      1. getResources.Examples
        1. getResources.Building a RSS feed
        2. getResources.Category Index Page with Thumbnails
        3. getResources.Google XML Sitemap
    103. getUrlParam
    104. getRTImages
    105. getVimeo
    106. GoogleSiteMap
      1. GoogleSiteMap.GoogleSiteMap
        1. GoogleSiteMap.GoogleSiteMap.containerTpl
        2. GoogleSiteMap.GoogleSiteMap.itemTpl
      2. GoogleSiteMap.Roadmap
      3. GoogleSiteMapVersion1
    107. GridClassKey
    108. HandyMan
      1. HandyMan.Frequently Asked Questions
      2. HandyMan.Installation
      3. HandyMan.Roadmap
    109. Hits
    110. HitsPage
    111. HybridAuth
      1. HybridAuth.Integrating Facebook
      2. HybridAuth.Integrating Google
      3. HybridAuth.Integrating Twitter
      4. HybridAuth.Integrating VK.com
    112. If
    113. Image+
    114. imageHERE
    115. ImageStyles
    116. ImportX
    117. LexRating
    118. Lingua
    119. Login
      1. Login.ChangePassword
      2. Login.ConfirmRegister
      3. Login.ForgotPassword
      4. Login.Login
      5. Login.Profile
      6. Login.Register
        1. Register.Example Form 1
      7. Login.ResetPassword
      8. Login.Roadmap
      9. Login.Tutorials
        1. Login.Basic Setup
        2. Login.Extended User Profiles
        3. Login.Request Membership
        4. Login.User Profiles
        5. Login.Using Custom Fields
        6. Login.Using Pre and Post Hooks
      10. Login.UpdateProfile
    120. Loginza
      1. Loginza.Loginza
      2. tpl.Loginza.login
      3. tpl.Loginza.logout
      4. tpl.Loginza.profile
    121. mChimpX
    122. MetaX
    123. mhPayPal
      1. mhPayPal.Snippet Usage
        1. mhPayPal.Snippet Usage.Hooks
        2. mhPayPal.Snippet Usage.Templating
    124. MIGX
      1. MIGX.Backend-Usage
      2. MIGX.Data-Entry
      3. MIGX.Frontend-Usage
      4. MIGX.Tutorials
        1. MIGX.Fancybox-images with seperate placeholders in Richtext-Content
        2. MIGX.Simple opening hours table
        3. Using resource-specific mediasource and multifile-uploader with MIGX
        4. MIGX.Varying layout-boxes
          1. MIGX.Varying layout-boxes.Configurator-Version
        5. Creating Selectable and Sortable lists for MIGX
        6. MIGX.sortable resourcelist
        7. Using resource-specific mediasource and multifile-uploader with MIGX (Old Version)
        8. MIGX.Using Grid Inline Editing
    125. MIGXdb
      1. MIGXdb.Configuration
      2. MIGXdb.Tutorials
        1. MIGXdb.Create a basic gallery-management from scratch with MIGXdb
          1. Add resource-specific mediasource and multifile-uploader to the gallery
          2. Add Image-Tagging to the Gallery
        2. MIGXdb.Create doodles manager with help of MIGXdb
        3. MIGXdb.Manage Child-Resources in a grid-TV with help of MIGXdb
        4. MIGXdb.Manage Events-Resources in a CMP with help of MIGXdb
      3. MigxCalendars
    126. MinifyX
    127. miniShop2
      1. miniShop.Screenshots
    128. modActiveDirectory
    129. ModDef
    130. modExtra
    131. modMobile
    132. modSwiftMailer
    133. mxCalendar
      1. mxCalendar.Examples
      2. mxCalendar.Placeholders
    134. mxExtendedMenu
    135. mxFormBuilder
      1. mxFormBuilder.Create Form
      2. mxFormBuilder.Hooks
      3. mxFormBuilder.Field Types
      4. mxFormBuilder.Create Form List in TV
      5. mxFormBuilder.Fields
    136. mxHasTvs
    137. MoneyBird
      1. MoneyBird.Contacts
      2. MoneyBird.Invoices
      3. MoneyBird.NrFormat
    138. ObfuscateEmail-Revo
    139. PackMan
      1. PackMan.Roadmap
    140. PageBreaker
      1. PageBreaker.PageBreaker
      2. tpl.PageBreaker.ajax
      3. tpl.PageBreaker.navigation
    141. Peoples
      1. Peoples.PeopleGroup
        1. Peoples.PeopleGroup.userTpl
      2. Peoples.PeopleGroups
        1. Peoples.PeopleGroups.tpl
      3. Peoples.Peoples
        1. Peoples.Peoples.tpl
      4. Peoples.Roadmap
    142. PHP Tidy (plugin)
    143. phpThumbOf
    144. Polls
      1. Polls.Polls
      2. Polls.PollsLatest
      3. Polls.PollsPrevious
      4. Polls.PollsResult
    145. POI Manager
    146. QuickCrumbs
      1. QuickCrumbs.Example
    147. Quip
      1. Quip.Quip
        1. Quip.Quip.tplComment
        2. Quip.Quip.tplCommentOptions
        3. Quip.Quip.tplComments
        4. Quip.Quip.tplReport
      2. Quip.QuipCount
      3. Quip.QuipLatestComments
      4. Quip.QuipReply
        1. Quip.QuipReply.tplAddComment
        2. Quip.QuipReply.tplLoginToComment
        3. Quip.QuipReply.tplPreview
      5. Quip.QuipRss
      6. Quip.Roadmap
      7. Quip.Upgrading
        1. Quip.Upgrading to 1.0.1
    148. Rampart
      1. Rampart.hook.RampartFormIt
      2. Rampart.hook.RampartQuip
      3. Rampart.preHook.RampartRegister
    149. Redirector
    150. renderResources
    151. ResourceWatcher
    152. RezImgCrop
    153. Rowboat
      1. Rowboat.Rowboat
    154. sekFancyBox
      1. sekFancyBox & Gallery
    155. sekFormTools
      1. sekFormTools.input.autocomplete
      2. sekFormTools.input.combobox
      3. sekFormTools.input.datepicker
      4. sekFormTools.input.helper
      5. sekFormTools.input.textfield
      6. sekFormTools Advanced Examples
    156. sekSiteTools
      1. sekSiteTools.easytabs
      2. sekSiteTools.google.analytics
      3. sekSiteTools.printdiv
    157. sekUserGalleries
      1. sekUserGalleries.album.items.helper
      2. sekUserGalleries.album.items.manage
      3. sekUserGalleries.album.manage
      4. sekUserGalleries.album.view
      5. sekUserGalleries.browse.galleries
      6. sekUserGalleries.directory
      7. sekUserGalleries.image.information
      8. sekUserGalleries.search
      9. sekUserGalleries.users.gallery.manage
      10. sekUserGalleries.users.gallery.view
    158. selfLink
    159. Shopkeeper
    160. siblingNav
    161. SimpleCart
    162. SimpleSearch
      1. SimpleSearch.Roadmap
      2. SimpleSearch.SimpleSearch
        1. SimpleSearch.Faceted Search Through PostHooks
        2. SimpleSearch.SimpleSearch.containerTpl
        3. SimpleSearch.SimpleSearch.currentPageTpl
        4. SimpleSearch.SimpleSearch.pageTpl
        5. SimpleSearch.SimpleSearch.tpl
      3. SimpleSearch.SimpleSearchForm
        1. SimpleSearch.SimpleSearchForm.tpl
      4. SimpleSearch.Solr
    163. SiteEditor
    164. sitemapFriend
    165. Slideshow Manager
      1. jgSlideshow Snippet
      2. Slideshow Manager CMP
    166. sLink
    167. SmartOptimizer
    168. SmartTag
    169. StatCache
    170. SocialLogin
    171. SocialSuite
      1. SocialSuite.getFacebookPhotos
      2. SocialSuite.getFacebookProfile
      3. SocialSuite.getFacebookShares
      4. SocialSuite.getGooglePlusShares
      5. SocialSuite.getTwitterProfile
      6. SocialSuite.prettyNumbers
    172. spieFeed
    173. StaticSaver
    174. StoreLocator
    175. SubscribeMe
      1. SubscribeMe.Configuring API Credentials, IPN and going Live
      2. SubscribeMe.Setting up the Payment Flow
        1. SubscribeMe - Listing the Products
        2. SubscribeMe - Setting up the Payment Methods
        3. SubscribeMe - Subscription Confirmation Page
      3. SubscribeMe.User Account Management
    176. SyntaxChecker
    177. Tagger
    178. TaggingAtoZ
    179. tagLister
      1. tagLister.getResourcesTag
      2. tagLister.tagLister
        1. tagLister.tagLister.all
        2. tagLister.tagLister.tpl
      3. tagLister.tolinks
        1. tagLister.tolinks.tpl
    180. TinyMCE
      1. TinyMCE.Spellchecker
      2. TinyMCE.Table controls
      3. TinyMCE.Template
    181. Upload to Users CMP
    182. VersionX
      1. VersionX.Roadmap
    183. virtuNewsletter
      1. Mailgun integration
    184. Wayfinder
      1. Wayfinder Introductory Examples
    185. xFPC

sekFancyBox

This is a user-contributed Extra. If you find issues or would like more info or help, please contact the author.

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.

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

Name Description
Type
Default
Optional
Version
type This defines what kind of window will open.
Options: inline, iframe, document, media, jcode
  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. (note, this property does not work well, in version 1.0.0 use the new property width)
inline only 400
yes  
title Title displays below the modal window, useful for images. Default behavior can be changed using the helpers options.
    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 their website.
    yes  
customcss To customize the appearance of the modal window, supply the url of the css file to use.
    yes  
custombuttonscss To customize the appearance of the modal button helper, supply the url of the css file to use.     yes 1.0.0
customthumbnailcss To customize the appearance of the modal thumbnail helper, supply the url of the css file to use.     yes 1.0.0
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
padding Space inside fancyBox around content. Can be set as array - [top, right, bottom, left].   15
yes 1.0.0
margin Minimum space between viewport and fancyBox. Can be set as array - [top, right, bottom, left]. Right and bottom margins are ignored if content dimensions exceeds viewport.   20
yes 1.0.0
width Default width for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto'.   800 yes 1.0.0
height Default height for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto'.   600 yes 1.0.0
minWidth Minimum width fancyBox should be allowed to resize to.   100 yes 1.0.0
minHeight Minimum height fancyBox should be allowed to resize to.   100 yes 1.0.0
maxWidth Maximum width fancyBox should be allowed to resize to.   9999 yes 1.0.0
maxHeight Maximum height fancyBox should be allowed to resize to.   9999 yes 1.0.0
autoSize If true, then sets both autoHeight and autoWidth to true.   true yes 1.0.0
autoHeight If set to true, for 'inline', 'ajax' and 'html' type content width is auto determined. If no dimensions set this may give unexpected results.   false yes 1.0.0
autoWidth If set to true, for 'inline', 'ajax' and 'html' type content height is auto determined. If no dimensions set this may give unexpected results.   false yes 1.0.0
autoResize If set to true, the content will be resized after window resize event.   true yes 1.0.0
autoCenter If set to true, the content will always be centered.   true yes 1.0.0
fitToView If set to true, fancyBox is resized to fit inside viewport before opening.   true yes 1.0.0
aspectRatio If set to true, resizing is constrained by the original aspect ratio (images always keep ratio).   false yes 1.0.0
topRatio Top space ratio for vertical centering. If set to 0.5, then vertical and bottom space will be equal. If 0 - fancyBox will be at the viewport top.   0.5 yes 1.0.0
leftRatio Left space ratio for horizontal centering. If set to 0.5, then left and right space will be equal. If 0 - fancyBox will be at the viewport left.   0.5 yes 1.0.0
scrolling Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', 'no' or 'visible'.   auto yes 1.0.0
wrapCSS Customizable CSS class for wrapping element (useful for custom styling).     yes 1.0.0
arrows If set to true, navigation arrows will be displayed.   true yes 1.0.0
closeBtn If set to true, close button will be displayed.   true yes 1.0.0
closeClick If set to true, fancyBox will be closed when user clicks the content.   false yes 1.0.0
nextClick If set to true, will navigate to next gallery item when user clicks the content.   false yes 1.0.0
mouseWheel If set to true, you will be able to navigate gallery using the mouse wheel.   true yes 1.0.0
autoPlay If set to true, slideshow will start after opening the first gallery item.   false yes 1.0.0
playSpeed Slideshow speed in milliseconds.   3000 yes 1.0.0
preload Number of gallery images to preload.   3 yes 1.0.0
modal If set to true, will disable navigation and closing.   false yes 1.0.0
loop If set to true, enables cyclic navigation. This means, if you click "next" after you reach the last element, first element will be displayed (and vice versa).   true yes 1.0.0
scrollOutside If true, the script will try to avoid horizontal scrolling for iframes and html content.   true yes 1.0.0
openEffect Animation effect ('elastic', 'fade' or 'none') for each transition type.   fade yes 1.0.0
closeEffect Animation effect ('elastic', 'fade' or 'none') for each transition type.   fade yes 1.0.0
nextEffect Animation effect ('elastic', 'fade' or 'none') for each transition type.   elastic yes 1.0.0
prevEffect Animation effect ('elastic', 'fade' or 'none') for each transition type.   elastic yes 1.0.0
openSpeed The time it takes (in ms, or "slow", "normal", "fast") to complete transition.   250 yes 1.0.0
closeSpeed The time it takes (in ms, or "slow", "normal", "fast") to complete transition.   250 yes 1.0.0
nextSpeed The time it takes (in ms, or "slow", "normal", "fast") to complete transition.   250 yes 1.0.0
prevSpeed The time it takes (in ms, or "slow", "normal", "fast") to complete transition.   250 yes 1.0.0
openOpacity If set to true, transparency is changed for elastic transitions.   true yes 1.0.0
closeOpacity If set to true, transparency is changed for elastic transitions.   true yes 1.0.0
openMethod Method that handles transition.
  zoomIn yes 1.0.0
closeMethod Method that handles transition.   zoomOut yes 1.0.0
nextMethod Method that handles transition.   changeIn yes 1.0.0
prevMethod Method that handles transition.   changeOut yes 1.0.0
helpers Object containing enabled helpers and options for each of the, this accepts a json string.     yes 1.0.0

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"
}`
Name
Description
Default
title Title group contains an array of values or return 'null'.  
title [type] How the title will be displayed; 'float', 'inside', 'outside' or 'over'. float
overlay Overlay group contains an array of values or return. 'null'  
overlay [closeClick] If true, fancyBox will be closed when user clicks on the overlay. true
overlay [speedOut] Duration of fadeOut animation. 200
overlay [showEarly] Indicates if should be opened immediately or wait until the content is ready. true
overlay [css] Custom CSS properties.  
overlay [locked] If true, the content will be locked into overlay. true
overlay [opacity] The opacity of the overlay
0.8
thumbs Thumbs contains an array of values for the thumbnail helper options.  
thumbs [width] Thumbnail width.
50
thumbs [height] Thumbnail height
50

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
sekfancybox.load_jquery_head If set to YES, the jquery file in the addon will be loaded in the head of the page. If set to NO, jquery will load at the bottom of the page. Yes/True 1.0.0
sekfancybox.custom_css If blank, use the css file that comes with sekFancyBox. Snippet property &customcss will always override this setting.   1.0.0
sekfancybox.custom_buttons_css If blank, use the css file that comes with sekFancyBox. Snippet property &custombuttonscss will always override this setting.   1.0.0
sekfancybox.custom_thumbs_css If blank, use the css file that comes with sekFancyBox. Snippet property &customthumbnailcss will always override this setting.   1.0.0

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

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

Comment Policy

Comments intended to help other users with this document are welcome! If you have a suggestion for this Extra document, please attempt to contact the author directly, possibly on GitHub or in the MODX Community Forums.

Suggest an edit to this page on GitHub (Requires GitHub account. Opens a new window/tab) or become an editor of the MODX Documentation.