The V01.01.00 release of MultiFunction includes the OrangeBox jQuery plugin from see below for documentation relating to DotNetNuke, or see their documentation

Coming Soon

Adding Lightboxes

There are many different times that you would want to add a Lightbox to your DotNetNuke site. With MultiFunction that becomes exceptionally easy to do. See some examples below.

Adding a Lightbox for an Image

To add a Lightbox to a single image you can provide the following HTML code.

<a href="UrlToFullSizeImage" rel="lightbox"><img src="UrlToSmallImage" /></a>

Adding a Lightbox with Multiple Images

<a href="UrlToFullSizeImage1" rel="lightbox[GroupName]"><img src="UrlToSmallImage1" /></a>
<a href="UrlToFullSizeImage2" rel="lightbox[GroupName]"><img src="UrlToSmallImage2" /></a>
<a href="UrlToFullSizeImage3" rel="lightbox[GroupName]"><img src="UrlToSmallImage3" /></a>

Customizing the Display of the Lightbox

There are a number of ways you can customize your Lightbox, here are some examples

Custom Captions

You can provide a caption that will overlay the image when moused over by using the Caption attribute.
<a href="UrlToFullSizeImage1" rel="lightbox[GroupName]" data-ob_caption="Some Caption"  ><img src="UrlToSmallImage1" /></a>

Customizing the Link

If you are displaying an image, such as one from Flickr, and want to link to the original source page, use the Link attribute
<a href="UrlToFullSizeImage1" rel="lightbox[GroupName]" data-ob_link="CustomLinkGoesHere"  ><img src="UrlToSmallImage1" /></a>

Customizing the Link Text

If you are displaying an image, such as one from Flickr, and want to customize the text for that link use the linkText attribute
<a href="UrlToFullSizeImage1" rel="lightbox[GroupName]" data-ob_linkText="Some Link Text"  ><img src="UrlToSmallImage1" /></a>

Turning off Sharing options

By default the OrangeBox will enable custom AddThis sharing, you can easily turn this off using the Share attribute
<a href="UrlToFullSizeImage1" rel="lightbox[GroupName]" data-ob_share="false"  ><img src="UrlToSmallImage1" /></a>

More Examples

For more examples check out the OrangeBox Documentation site

Last edited Oct 17, 2011 at 7:39 PM by christoc, version 6


No comments yet.