How do I use the built-in lightbox?
Please note: As of v2.0 Armadillo will automatically display a lightbox for links that point to an image file. There is no need for you to do anything to take advantage of this feature.
Keep in mind, this is different from directly embedding an image on the page, surrounded by text. Only links which point to an image will have that image displayed in the lightbox.
For v1.7.5 and Earlier Only
The instructions described below only apply to Armadillo v1.7.5 and earlier.
Armadillo includes a built-in lightbox called fancyBox. NimbleHost has integrated the "unlimited" usage license into Armadillo so that you can use fancyBox on any type of site, including commercial projects. You can use fancyBox to display individual images (and other file types), as well as to show related images together in a gallery.
Follow these directions to display linked files using fancyBox.
- Create a new Page/Post, or open an existing Page/Post.
- In the content editor select the text/image you'd like to turn into a link, then click the Link button in the toolbar.
- A dialog window will appear. Enter the URL to the file you want displayed. If you do not know the URL, scroll down to the Media Library, hover over the file you want displayed, then right-click on the link provided to copy the URL.
- After entering the URL, click the "Insert" button to create the link.
- In the toolbar click on the
</>
button to the far right. - Locate the link you created in Step 4 above and add a class of "fancybox". The code should look similar to the following:
<a href="http://link-to-your-image-here.com" class="fancybox">Link text here</a>
. - Optional: If you would like fancyBox to group related images together to create a gallery, so that you can navigate to the next image from within fancyBox itself, add a "rel" attribute to the link code as well. The value for each link's "rel" attribute should be the same, so that they appear together as a gallery. For example:
<a href="http://link-to-your-image-here.com" class="fancybox" rel="gallery1">Link text here</a>
.
Armadillo supports an unlimited number of galleries.
Tags: User Guide