Hi Andy,

To do this, insert the thumbnail image in your HTML content, wrap it in a link to the full size image and then add the REL property set to GB_Image[] as shown below.

<a href="/Data/Sites/1/media/FullSizeImages/sunset.jpg" rel="gb_image[]"><img alt="" src="/Data/Sites/1/media/Thumbnails/sunset.jpg" style="width: 100px; height: 75px;" /></a>

HTH,
Joe D.

Hi Andy,

You can set the title property of the link to whatever you want for the caption. The caption will be above the image. You can take a look at http://orangoo.com/labs/greybox/normal_usage.html for more information on GreyBox.

<a href="/Data/Sites/1/media/FullSizeImages/sunset.jpg" rel="gb_image[]" title="Sunset"><img alt="" src="/Data/Sites/1/media/Thumbnails/sunset.jpg" style="width: 100px; height: 75px;" /></a>

HTH,
Joe

Hi Andy,

You can use lightbox if you prefer it over greybox. They both will work alongside of each other. Just follow the instructions on this page: http://www.huddletogether.com/projects/lightbox2/#how.

You will want to upload the javascript files to /ClientScript and then include the javascript links in your layout.master after the <asp:ScriptManager control. Notice, you do not need the Prototype.js reference because that is already included in mojoPortal. Something like this:

<asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" />
<script type="text/javascript" src="/ClientScript/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/ClientScript/lightbox.js"></script>

At this point, you need to add the CSS for lightbox to your site. Do this by:

1. Create a new directory at \data\style\lightbox
2. Create another new directory at \data\style\lightbox\images
3. Upload the lightbox images to \data\style\lightbox\images
4. Edit the lightbox.css file and replace all of the instances of ../images/ with images/
5. Upload the modified lightbox.css file to \data\style\lightbox
6. Add the following to the style.config file located in your skin directory
   <file cssvpath="/Data/style/LightBox/lightbox.css" imagebasevpath="/Data/style/lightbox/">none</file>

Now, all you need to do is reference lightbox in your image:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

HTH,
Joe D.

P.S. I removed the "buy Joe a cup of Joe" link because the signature field has a character limit and I wanted to include the Community Manager badge. If you are interested in buying me a cup of joe, you can visit my site here: http://josephmdavis.com/buyjoecoffee-product.aspx

Thank you for the coffee! I am anxious to see your completed site!

-Joe D.