Usage

Parent Previous Next

Common parameters are the same as for ARI Sexy Lightbox module, but the plugin contains "Elements CSS selectors" parameter which is used to specify elements for what the lightbox should be added.  Enter selectors in the following way:


"CSS_SELECTOR"


or


"CSS_SELECTOR"|URL_PARAMETERS


Each selector should be located on a new line. Where CSS_SELECTOR is a jQuery CSS selector which is used to select element(s) which will be linked with the lightbox.  URL_PARAMETERS are additional URL parameters which will be added to links from "href" attribute of selected elements.URL_PARAMETERS can be used to specify lightbox width or height.


For example, if a menu on a page has the following HTML code:


<ul class="main_menu">

       <li class="menu_item">

               <a href="index.php?option=com_content&amp;view=article&amp;id=9" class="item10">Link 1</a>

       </li>

       <li class="menu_item">

               <a href="index.php?option=com_content&amp;view=article&amp;id=30" class="item12">Link 2</a>

       </li>

       <li class="menu_item">

               <a href="http://www.ari-soft.com" class="item15">Link 3</a>

       </li>

</ul>


And you want to show each menu item into the lightbox, add the next code to "Elements CSS selectors" parameter:


"UL.main_menu A"|width=700&height=500


If you want to show "Link 1" without header, footer and other elements (this approach works only for Joomla! pages) in the lightbox with size 800 x 600 and show "Link 3" into the lightbox with size 750 x 550, add the following code  to "Elements CSS selectors" parameter:


"UL.main_menu A.item10"|width=800&height=600&tmpl=component

"UL.main_menu A.item15"|width=750&height=550