This project is read-only.
The V01.01.00 release of MultiFunction includes the OrangeBox jQuery plugin from http://orangebox.davidpaulhamilton.net/ 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 8:39 PM by christoc, version 6

Comments

No comments yet.