"ARI Smart Content - Fancybox" plugin provides ability to show different content into fancy lightbox. The plugin can be enabled/disabled and configured on "Extensions → Plugin Manager" page on Joomla! backend. Common information how to use "ARI Smart Content" applications plugins is here. {fancybox} plugin tag is used for the plugin. The following code creates Show web page link and when it is clicked http://www.ari-soft.com web page will be shown into the lightbox:

{fancybox url="http://www.ari-soft.com" width="800" height="600"}Show web page{/fancybox}

If you want to use an image as a link which will trigger the lightbox, use HTML code between {fancybox} and {/fancybox} tags. For example want to use <joomla_directory>/images/preview.jpg image as a link, the code will look like:

{fancybox url="http://www.ari-soft.com" width="800" height="600"}<img src="images/preview.jpg" />{/fancybox}

If you use a WYSIWYG editor, switch it to plain text mode before inserting HTML code or use built-in functionality of the editor to insert an image between {fancybox} and {/fancybox} tags.

The following plugin codes can be used to show different content into the lightbox:

• Images

• Show image(s) from Twitpic service. Specify ID(s) of Twitpic image(s) which you want to show in twitpic attribute:

{fancybox twitpic="7p93st"}Show image from Twitpic{/fancybox}

If you want to show several images into the lightbox, separate IDs by spaces

{fancybox twitpic="7p93st eavclg"}Show images from Twitpic{/fancybox}

• Show image(s) from Instagram service. Specify ID(s) of Instagram image(s) which you want to show in ig attribute:

{fancybox ig="IejkuUGxQn"}Show image from Instagram{/fancybox}

If you want to show several images into the lightbox, separate IDs by spaces

{fancybox ig="IejkuUGxQn sNMh0qNUrt"}Show images from Instagram{/fancybox}

• Show images. Specify URL(s) to image(s) in url parameter:

{fancybox url="images/myimage.jpg"}Show image{/fancybox}

If you want to show several images into the lightbox, separate URLs by spaces

{fancybox url="images/myimage.jpg http://www.domain.com/photos/photo.jpg"}Show images{/fancybox}

It is possible to define different titles for each item. In this case define titles after || symbols and separate items with ; symbol and add parseLinks="1" parameter to {fancybox} tag:

{fancybox parseLinks="1" url="images/myimage.jpg||title 1;http://www.domain.com/photos/photo.jpg||title 2"}Show images{/fancybox}

Use itemSeparator and paramSeparator parameters of {fancybox} tag to define different separators (instead of default ; and || separators):

{fancybox parseLinks="1" itemSeparator="~" paramSeparator="@@" url="images/myimage.jpg@@title 1~http://www.domain.com/photos/photo.jpg@@title 2"}Show images{/fancybox}

• Videos

• Show video(s) from Dailymotion service. Specify ID(s) of Dailymotion video(s) which you want to show in dailymotion attribute:

{fancybox dailymotion="xoeylt_electric-guest-this-head-i-hold_music"}Show video from Dailymotion{/fancybox}

If you want to show several videos into the lightbox, separate IDs by spaces.

• Show video(s) from Metacafe service. Specify ID(s) of Metacafe video(s) which you want to show in metacafe attribute:

{fancybox metacafe="11311715"}Show video from Metacafe{/fancybox}

If you want to show several videos into the lightbox, separate IDs by spaces.

• Show video(s) from Vimeo service. Specify ID(s) of Vimeo video(s) which you want to show in vimeo attribute:

{fancybox vimeo="36031564"}Show video from Vimeo{/fancybox}

If you want to show several videos into the lightbox, separate IDs by spaces.

• Show video(s) from YouTube service. Specify ID(s) of YouTube video(s) which you want to show in yt attribute:

{fancybox yt="WyA1dzfKywg"}Show video from YouTube{/fancybox}

If you want to show several videos into the lightbox, separate IDs by spaces.

• Miscellaneous content

• Google maps use the following code:

{fancybox url="http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17"}Show Google map{/fancybox}

• Web pages specify links to web page(s) in url attribute. If you want to show several pages, separate URLs by spaces:

{fancybox url="http://www.ari-soft.com http://www.demo2.ari-soft.com"}Show web pages{/fancybox}

• Joomla! articles specify article ID(s) in article attribute. If you want to show several articles, separate IDs by spaces:

{fancybox article="13 11"}Show articles{/fancybox}

• Joomla! modules specify module ID(s) in module attribute. If you want to show several modules, separate IDs by spaces:

{fancybox module="16" opt_width="300" opt_height="250"}Show module{/fancybox}

• Inline content specify link text between {link} and {/link} tags and content which will be shown into the lightbox between {content} and {/content} tags:

{fancybox}{link}Show inline content{/link}{content}<h3>sample content</h3>You can place any content here.{/content}{/fancybox}

Plugin settings

The following parameters can be defined on plugin settings page ("Extensions → Plugin Manager → ARI Smart Content - Fancybox" page on Joomla! backend):

• Padding is space inside fancybox around content. Specify an integer or four integers separated by commas.Possible values: 5 or 5,10,5,10 and etc.

• Margin is minimum space between viewport and fancybox. Right and bottom margins are ignored if content dimensions exceeds viewport. Specify an integer or four integers separated by commas. Possible values: 0 or 5,10,5,10 and etc.

• Width is default width for remote pages and SWF files. It will also used for other content if Auto size parameter is set to "No".

• Height is default height for remote pages and SWF files. It will also used for other content if Auto size parameter is set to "No".

• Min width is minimum width fancybox should be allowed to resize to.

• Min height is minimum height fancybox should be allowed to resize to.

• Max width is maximum width fancybox should be allowed to resize to.

• Max height is maximum height fancybox should be allowed to resize to.

• Auto width if set to "Yes", for inline content type width is auto determined.

• Auto height if set to "Yes", for inline content type height is auto determined.

• Auto resize if set to "Yes", the content will be resized after window resize event. If the parameter is set to "Auto", the option will be available for non-touch devices.

• Auto center if set to "Yes",  the content will always be centered. If the parameter is set to 'Auto', the option will be available for non-touch devices.

• Fit to view if set to "Yes", fancybox is resized to fit inside viewport before opening.

• Aspect ratio if set to 'Yes', resizing is constrained by the original aspect ratio (images always keep ratio).

• Top ratio 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.

• Left ratio 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

• Scrolling set the overflow CSS property to create or hide scrollbars.

• Wrap CSS class is customizable CSS class for wrapping element (useful for custom styling).

• CSS class is used to specify CSS class(es) which will be added to links generated by the extension.

• Close on click if set to "Yes", the lightbox will be closed when user clicks the content.

• Modal mode if set to "Yes", will disable navigation and closing.

• Scroll outside if "Yes", the script will try to avoid horizontal scrolling for iframes and html content.

• Title position specify where titles will be shown.

• Iframe preload is used to specify should be shown a loading icon while remote content is loaded or not.

• Show nav arrows if set to "Yes", navigation arrows will be displayed.

• Next by click if set to "Yes", will navigate to next gallery item when user clicks the content.

• Auto play if set to "Yes", slideshow will start after opening the first gallery item.

• Play speed is slideshow speed in milliseconds.

• Mousewheel nav if set to "Yes", you will be able to navigate gallery using the mouse wheel.

• 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).

• Show toolbar is used to show/hide toolbar with buttons:

• Yes is used to show toolbar. The following parameters for toolbar are available:

• Skip single is used to hide toolbar if gallery contains only one item.

• Position is used to specify toolbar position.

• No to used to hide toolbar.

• Show close button is used to show/hide close button.

• Close on click if set to 'Yes', the lightbox will be closed when user clicks the content.

• Speed out is duration in milliseconds of fadeOut animation.

• Show early indicates if should be opened immediately or wait until the content is ready.

• Locked content if 'Yes', the content will be locked into overlay.

• Open speed is the time in milliseconds it takes in milliseconds to complete transition.

• Open opacity if set to 'Yes', transparency is changed for elastic transitions.

• Open effect specifies animation effect.

• Open easing method is used to choose an easing method for transition.

• Close speed is the time in milliseconds it takes in milliseconds to complete transition.

• Close opacity if set to 'Yes', transparency is changed for elastic transitions.

• Close effect specifies animation effect.

• Close easing method is used to choose an easing method for transition.

• Prev speed is the time in milliseconds it takes in milliseconds to complete transition.

• Prev effect specifies animation effect.

• Prev easing method is used to choose an easing method for transition.

• Next speed is the time in milliseconds it takes in milliseconds to complete transition.

• Next effect specifies animation effect.

• Next easing method is used to choose an easing method for transition.

Plugin code syntax

The following attributes can be used for {fancybox} tag:

• padding is used to override Padding parameter from plugin settings. The following sample code set top and bottom content padding to 5 pixels and left and right to 10 pixels:

{fancybox padding="5,10,5,10" url="http://www.ari-soft.com" width="800" height="600"}Show web page{/fancybox}

• margin is used to override Margin parameter from plugin settings. The following sample code set top and bottom margin around the lightbox to 25 pixels and left and right to 50 pixels:

{fancybox margin="25,50,25,50" url="http://www.ari-soft.com" width="800" height="600"}Show web page{/fancybox}

• width is used to override Width parameter from plugin settings.

• height is used to override Height parameter from plugin settings.

• minWidth is used to override Min width parameter from plugin settings.

• minHeight is used to override Min height parameter from plugin settings.

• maxWidth is used to override Max width parameter from plugin settings.

• maxHeight is used to override Max height parameter from plugin settings.

• autoWidth is used to override Auto width parameter from plugin settings. Possible values: 0 or 1.

• autoHeight is used to override Auto height parameter from plugin settings. Possible values: 0 or 1.

• autoResize is used to override Auto resize parameter from plugin settings. Possible values: 0 or 1.

• autoCenter is used to override Auto center parameter from plugin settings. Possible values: 0 or 1.

• fitToView is used to override Fit to view parameter from plugin settings. Possible values: 0 or 1.

• aspectRatio is used to override Aspect ratio parameter from plugin settings. Possible values: 0 or 1.

• topRatio is used to override Top ratio parameter from plugin settings. Possible values: 0, 0.2, 0.35 and etc.

• leftRatio is used to override Left ratio parameter from plugin settings. Possible values: 0, 0.2, 0.35 and etc.

• scrolling is used to override Scrolling parameter from plugin settings. Possible values: auto, yes, no and visible.

• wrapCSS is used to override Wrap CSS class parameter from plugin settings.

• closeClick is used to override Close on click parameter from plugin settings. Possible values: 0 or 1.

• modal is used to override Modal mode parameter from plugin settings. Possible values: 0 or 1.

• scrollOutside is used to override Scroll outside parameter from plugin settings. Possible values: 0 or 1.

• titlePos is used to override Title position parameter from plugin settings. Possible values: float, inside, outside or over.

• iframe_preload is used to override Iframe preload parameter from plugin settings. Possible values: 0 or 1.

• showArrows is used to override Show nav arrows parameter from plugin settings. Possible values: 0 or 1.

• nextClick is used to override Next by click parameter from plugin settings. Possible values: 0 or 1.

• autoPlay is used to override Auto play parameter from plugin settings. Possible values: 0 or 1.

• playSpeed is used to override Play speed parameter from plugin settings.

• mouseWheel is used to override Mousewheel nav parameter from plugin settings. Possible values: 0 or 1.

• loop is used to override Loop parameter from plugin settings. Possible values: 0 or 1.

• toolbar is used to override Show toolbar parameter from plugin settings. Possible values: 0 or 1.

• toolbarSkipSingle is used to override Skip single parameter from plugin settings. Possible values: 0 or 1.

• toolbarPos is used to override Toolbar position parameter from plugin settings. Possible values: top or bottom.

• closeBtn is used to override Show close button parameter from plugin settings. Possible values: 0 or 1.

• closeSpeedOut is used to override Speed out parameter from plugin settings.

• overlayShowEarly is used to override Show early parameter from plugin settings. Possible values: 0 or 1.

• locked is used to override Locked content parameter from plugin settings. Possible values: 0 or 1.

• openSpeed / closeSpeed / prevSpeed / nextSpeed are used to override Open speed / Close speed / Prev speed / Next speed parameters from plugin settings.

• openOpacity / closeOpacity are used to override Open opacity / Close opacity parameters from plugin settings. Possible values: 0 or 1.

• openFx / closeFx / prevFx / nextFx are used to override Open effect / Close effect / Prev effect / Next effect parameters from plugin settings. Possible values: none, fade and elastic.

• openEasing / closeEasing / prevEasing / nextEasing are used to override Open easing method / Close easing method / Prev easing method / Next easing method parameters from plugin settings. You can see each easing effect in action here. The following values are possible:

• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInSine
• easeOutSine
• easeInOutSine
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInElastic
• easeOutElastic
• easeInOutElastic
• easeInBack
• easeOutBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce
• fade
• swing