How to Insert Lightbox in Office Live

Works in:            

This solution uses the lightbox files that have been modified by http://softprizm.com to work with Office Live.

1.  Download the necessary scripts, css, and image files:

2.  Upload the images to the image gallery, and upload the scripts and css files to the document gallery.  Refer to the Readme included in the ZIP for further instructions!

3.  Paste the following code in a Custom Footer module at the top of the page you want to use Lightbox on, you only have to do this once per page, even if you have multiple images.

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<script type="text/javascript" src="/Documents/prototype.jsx"></script>
<script type="text/javascript" src="/Documents/scriptaculous.jsx?load=effects,builder"></script>
<script type="text/javascript" src="/Documents/lightbox.jsx"></script>
<link rel="stylesheet" href="/Documents/lightbox.css" type="text/css" media="screen" />
</xsl:template>
</xsl:stylesheet>

4.  Next paste the following code into another Custom Footer module, you can also paste just the <a>....</a> part in the same custom footer module if you desire:

With text link, in a seperate module:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<a href="images/imagename.jpg" rel="lightbox" title="Image title">Link Text</a>
</xsl:template>
</xsl:stylesheet>

Parameters

Image Source  > Change to the source of your image:

Image title > Change to a good short description of the image

Link Text > change any text you desire, this is the link that people will click on.

With thumbnail link:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<a href="images/imagename.jpg" rel="lightbox" title="Image title"><img src="/images/lightthumb0.jpg" /></a>
</xsl:template>
</xsl:stylesheet>

Parameters

href  image location  /images/imagename.jpg

title image's title

src thumb image location  /images/thumbname.jpg

Example: 

Advanced Options

To create an gallery add [galleryname] to the end of re="lightbox": <a href="images/lightimages6.jpg" rel="lightbox[snowyimages]" title="Sunset over snowy trees"><img src="/images/lightthumb6.jpg" /></a>, every image that has [galleryname] will be added to that gallery

You can also have more than one gallery per page, you just need to make sure they have different names.  The image to the right is part of the image gallery example below:                                                                                                    ^ Module 7

 Snowy Trees   Snowy Cabin   Trees with Snow  Crater Lake

Code in four custom footer modules:

Module 1:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<a href="images/lightimages3.jpg" rel="lightbox" title="Snowy trees"><img src="/images/lightthumb3.jpg" /></a>
</xsl:template>
</xsl:stylesheet>

Module 2:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<a href="images/lightimages4.jpg" rel="lightbox" title="Cabin surronded by trees">Snowy Cabin</a>
</xsl:template>
</xsl:stylesheet>

Module 3:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<a href="images/lightimages3.jpg" rel="lightbox" title="Snowy trees">Snowy Trees</a>
</xsl:template>
</xsl:stylesheet>

Module 4:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<a href="images/lightimages7.jpg" rel="lightbox" title="Crater Lake">Crater Lake</a>
</xsl:template>
</xsl:stylesheet>

                 ^ Module 1                        ^ Module 2                       ^ Module 3

                 ^ Module 4                         ^ Module 5                      ^ Module 6

Code in six custom footer modules:

Module 1:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<a href="images/lightimages3.jpg" rel="lightbox[snowyimages]" title="Snowy trees"><img src="/images/lightthumb3.jpg" /></a>
</xsl:template>
</xsl:stylesheet>

Module 2:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<a href="images/lightimages4.jpg" rel="lightbox[snowyimages]" title="Snowy Cabin surrounded by trees"><img src="/images/lightthumb4.jpg" /></a>
</xsl:template>
</xsl:stylesheet>

Module 3:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<a href="images/lightimages5.jpg" rel="lightbox[snowyimages]" title="Trees with Snow"><img src="/images/lightthumb5.jpg" /></a>
</xsl:template>
</xsl:stylesheet>

Module 4:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<a href="images/lightimages6.jpg" rel="lightbox[snowyimages]" title="Snow covered cabin"><img src="/images/lightthumb6.jpg" /></a>
</xsl:template>
</xsl:stylesheet>

Module 5:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<a href="images/lightimages7.jpg" rel="lightbox[snowyimages]" title="Cratar Lake"><img src="/images/lightthumb7.jpg" /></a>
</xsl:template>
</xsl:stylesheet>

Module 6:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<a href="images/lightimages8.jpg" rel="lightbox[snowyimages]" title="Winter River"><img src="/images/lightthumb8.jpg" /></a>
</xsl:template>
</xsl:stylesheet>

Module 7:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" omit-xml-declaration="yes"/>
<xsl:template match="/">
<a href="images/lightimages9.jpg" rel="lightbox[snowyimages]" title="Snow with barn landscape"><img src="/images/lightthumb9.jpg" /></a>
</xsl:template>
</xsl:stylesheet>

While you could combine them all into one custom footer module, it is much easier to leave them all seperate so you can have better control of spacing, alignment, ect.