"ARI Smart Content - Sexy Lightbox" plugin provides ability to show different content into sexy 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. {sexybox} 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:

{sexybox url="http://www.ari-soft.com" width="90%" height="90%"}Show web page{/sexybox}

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

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

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 {sexybox} and {/sexybox} tags.

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

• Images

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

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

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

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

• Videos

• Show Flash file(s). Enter URL(s) in url attribute:

{sexybox url="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf" width="792" height="294"}Show Flash object{/sexybox}

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

• Show QuickTime file(s). Enter URL(s) in url attribute:

{sexybox url="http://trailers.apple.com/movies/universal/despicableme/despicableme-tlr1_r640s.mov" width="640" height="375"}Show Flash object{/sexybox}

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

• Show FLV file(s). Enter URL(s) in url attribute:

{sexybox url="http://www.domain.com/video/myvideo.flv" width="640" height="375"}Show Flash object{/sexybox}

If you want to show several videos into the lightbox, separate URLs by spaces. FlowPlayer player is used to show FLV files.

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

{sexybox vimeo="36031564" width="500" height="375"}Show video from Vimeo{/sexybox}

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:

{sexybox yt="WyA1dzfKywg" width="500" height="375"}Show video from YouTube{/sexybox}

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

• Miscellaneous content

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

{sexybox url="http://www.ari-soft.com http://www.demo2.ari-soft.com" width="90%" height="90%"}Show web pages{/sexybox}

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

{sexybox article="13 11" width="800" height="600"}Show articles{/sexybox}

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

{sexybox module="16" width="300" height="250"}Show module{/sexybox}

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

{sexybox bgColor="#FFF"}{link}Show inline content{/link}{content}<h3>sample content</h3>You can place any content here.{/content}{/sexybox}

Plugin settings

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

• Default width specifies width which will be used by default. Possible values: 500, 90% and etc.

• Default height specifies width which will be used by default. Possible values: 400, 80% and etc.

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

• Show download icon if this option is enabled, the extension will show download in the lightbox for images. Users can open the loaded image in new window or save it.

• Show download icon on mouse over if this options and Show download icon parameter are enabled, download icon will be shown when a user mouse over lightbox.

• Download icon tooltip is a tooltip for download icon. See Show download icon parameter.

• Overlay color is a color of overlay (a layer between page content and the lightbox).

• Overlay opacity is opacity of overlay. Value from 0 to 1. Possible values: 0.5, 0.7 and etc.

• Modal mode specifies should the lightbox uses modal mode or not. If this parameter set to "Yes", user can close lightbox only if click "Close" button otherwise user can close lightbox if click outside of lightbox.

• Disable right click if this option is enabled, mouse right click will be disabled for images which are loaded into the lightbox. It can be useful if you want to prevent saving of images by users to their local disk.

• Enable SlideShow is used to enable/disable slideshow. If the slideshow is enabled, "Play" and "Pause" buttons will be available into the lightbox to play/pause slideshow.

• Auto start SlideShow if this option is set to "Yes", slideshow will be started automatically when the lightbox is opened.

• Continious Slide Show if this option is enabled, the extension will display the first item after last item in slideshow mode.

• Continious navigation if this option is enabled, the extension will display the first item after last item and vice versa if a user clicks by next (prev) button.

• z-Index specifies value of z-index CSS property for the lightbox. Can be used to resolve overlapping with other elements on a page. Possible values: 1, 350, 32000 and etc.

• Theme is used to choose lightbox theme. Only one theme can be active on a page. If several lightbox instances with different themes are used on a page they will have the same theme.

• Emerge from specifies position from what the lightbox will be appeared.

• Show duration is duration in milliseconds of opening animation.

• Close duration is duration in milliseconds of closing animation.

• Move duration is duration in milliseconds of moving animation.

• Move effect is a transition effect which will be used when the lightbox is moving.

• Resize duration is duration in milliseconds of resizing animation.

• Resize effect is a transition effect which will be used when the lightbox is resizing.

• Shake distance is a distance which will be used by shake effect.

• Shake duration is duration in milliseconds of shaking animation.

• Shake loops is loop number for shaking effect.

• Shake effect is a transition effect which will be used when the lightbox is shaking.

• Auto play videos specifies need to automatically start YouTube, Vimeo and QuickTime videos or not.

• wMode attribute sets the flash wMode attribute.

• Background is background color which will be used for content which is shown into the lightbox.

Plugin code syntax

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

• width is used to override Default width parameter from plugin settings. Possible values: 300, 80% and etc.

• height is used to override Default height parameter from plugin settings. Possible values: 300, 80% and etc.

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

• hoverDownloadLink is used to override Show download icon on mouse over parameter from plugin settings. Possible values: 0 or 1.

• downloadLinkTitle is used to override Download icon tooltip parameter from plugin settings.

• overlayBg is used to override Overlay color parameter from plugin settings. Possible values: #FFF, red and etc.

• opacity is used to override Overlay opacity parameter from plugin settings. Possible values: 0.1, 0.5, 1 and etc.

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

• disableRightClick is used to override Disable right click parameter from plugin settings. Possible values: 0 or 1.

• slideshow is used to override Enable SlideShow parameter from plugin settings. Possible values: 0 or 1.

• auto is used to override Auto start SlideShow parameter from plugin settings. Possible values: 0 or 1.

• continiousShow is used to override Continious SlideShow parameter from plugin settings. Possible values: 0 or 1.

• continious is used to override Continious navigation parameter from plugin settings. Possible values: 0 or 1.

• zIndex is used to override z-Index parameter from plugin settings. Possible values: 1, 100, 32000 and etc..

• theme is used to override Theme parameter from plugin settings. Possible values: white, black, blanco, negro, blanc, noir, fancy_white, fancy_black, old_white and old_black.

• emergeFrom is used to override Emerge from parameter from plugin settings. Possible values: none, bottom, top, left and right.

• showDuration is used to override Show duration parameter from plugin settings.

• closeDuration is used to override Close duration parameter from plugin settings.

• moveDuration is used to override Move duration parameter from plugin settings.

• moveFx is used to override Move effect parameter 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

• resizeDuration is used to override Resize duration parameter from plugin settings.

• resizeFx is used to override Resize effect parameter 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

• shakeDistance is used to override Shake distance parameter from plugin settings.

• shakeDuration is used to override Shake duration parameter from plugin settings.

• shakeLoops is used to override Shake loops parameter from plugin settings.

• shakeFx is used to override Shake effect parameter 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

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

• wMode is used to override wMode attribute parameter from plugin settings. Possible values: opaque, transparent and window.

• bgColor is used to override Background parameter from plugin settings.