There are many galleries available in one form or the other through the Umbraco forum. Probably the most commonly used one is that which ships with the Creative Web Specialist package. I have always wanted to incorporate a gallery that utilises the jquery Lightbox toolset, and was inspired to see the excellent gallery that bob has created at http://www.baty-barr.com/pics.aspx. To this end I started on a process of searching for a gallery package. I was extremely surprised to see that none exist as a standalone package, and there are no complete instructions on how to create a gallery. So after much googling and fiddling with XSLT, I managed to get mine right. I hope someone will find this useful someday to create their own gallery in Umbraco.

I must add, I wanted my end user to not have to worry about choosing images, so I designed it to read from a folder. Also, I claim no credit for any XSLT as it has merely been extracted, chopped and combined from the wonderful resource on the web. So if you see something that is yours, please let me know and I will credit you appropriately.

EDIT: I have modified the Gallery XSLT to allow for captions and "alt" mouseover on the thumbnails. The caption will show below the thumbnail, and in the lightbox "popup". The caption is the name of the node for your media, so you will need to edit your media nodes to give them nice captions.

Prerequisites:

1. ImageGen installed
2. the jquery js file added to your scripts folder and referenced in your master template
3. the jquery Lightbox file added to your scripts folder and referenced in your master template
4. The lightbox images placed appropriately and the js file modified to reference them (all explained at http://leandrovieira.com/projects/jquery/lightbox)
5. the necessary lightbox code in your master template (I use the "rel" option).

Here is how it is all referenced in my master template:

 1: <!-- Jquery Lightbox-> <script src="/Scripts/JS/jquery.js" type="text/javascript"></script>

 1:  <script src="/scripts/JS/jquery_lightbox_05_pack.js" type="text/javascript">

 1: </script> <link href="/CSS/jquery_lightbox.css" rel="stylesheet" type="text/css" media="screen"/> <script type="text/javascript"> $(function() { $('a[@rel*=lightbox]').lightBox(); // Select all links that contains lightbox in the attribute rel });

</script>

PART A: THE GALLERY PAGE

Step 1: Create the XSLT

Create the XSLT, and associated macro for the individual gallery. Right click on "XSLT Files" and choose create. Choose the clean template, and tick "Create macro". Give it a filename (I chose bb_gallery in recognition to baty-barr!). Then paste the following XSLT into that new file:

 1: <?xml version="1.0" encoding="UTF-8"?>

 2: <!DOCTYPE xsl:Stylesheet [ &lt;!ENTITY nbsp "&#x00A0;"> ]>

 3: <xsl:stylesheet

 4:     version="1.0"

 5:     xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

 6:     xmlns:msxml="urn:schemas-microsoft-com:xslt"

 7:     xmlns:umbraco.library="urn:umbraco.library"

 8:     exclude-result-prefixes="msxml umbraco.library">

 9:    

10: <xsl:output method="xml" omit-xml-declaration="yes"/>

11: <xsl:param name="currentPage"/>

12: <xsl:variable name="docFolder" select="number($currentPage/data [@alias = 'ImgFolder'])"/>

13: <xsl:template match="/">

14: 

15: <xsl:if test="$currentPage/data [@alias = 'ImgFolder'] != 0">

16:     <dl id="listNavigation">

17:     <xsl:for-each select="umbraco.library:GetMedia($docFolder, 'true')/node">

18:         <div style="padding:7px;border: 1px solid #ddd; float:left; margin-right: 10px; margin-bottom: 15px;">

19:             <a href="{./data [@alias='umbracoFile']}" rel='lightbox' title="{./@nodeName}">

20:                 <img>

21:                     <xsl:attribute name="src">/umbraco/imageGen.aspx?image=<xsl:value-of select="./data [@alias='umbracoFile']" />&amp;width=200&amp;height=100&amp;constrain=true</xsl:attribute>

22:                     <xsl:attribute name="class">reflect rheight25 ropacity35</xsl:attribute>

23:                     <xsl:attribute name ="style">border:none;</xsl:attribute>

24:                 </img>

25:             </a>

26:             <div style=" font-size: 0.9em; padding-top: 0.2em ;width:130px;">

27:                     <xsl:value-of select="./@nodeName" />

28:             </div>

29:         </div>

30:     </xsl:for-each>

31:     </dl>

32: </xsl:if>

33: </xsl:template>

34: </xsl:stylesheet>

You will not need to do anything to the associated macro

Step 2: Set up the Document Type

The next step involves setting up a document type and its associated template for the gallery. Under the "Settings" section, right click on "Document Types" and choose create. Give it an appropriate name (i.e. bb_Gallery) and check "Create Matching Template". Now we will need to edit and add a couple of properties.

1. Under the info tab, check bb_gallery under "Allowed Templates" and make sure bb_gallery is the default template.
2. Under "Tabs" add a new tab appropriately named (i.e "images")
3. You can also tabs for "content" and "metadata"
4. Under the "Generic Properties" tab you can now add the required parameters
   • Alias: ImgFolder; Name: Folder with Images; Type: Mediapicker; Tab: Images
   • Alias: mainGalleryIMG; Name: Image for Gallery Selection; Type: Mediapicker; Tab: Images [Note: this is used for a gallery list page]
   • Alias: PageHeader; Name: Page Header; Type: TextString; Tab: Content [Note: this is referenced in the gallery List XSLT, so add it if you want a gallery listing]
   • [Optional] Alias: bodyText; Name: Content; Type: Richtextbox Editor ; Tab: Content
   • Alias: PageTitle; Name: Page title; Type: TextString ; Tab: Metadata
   • You can also add items for description and keywords if you desire

Here is what mine looks like:

Next we will need to edit the other document types that will be able to have the gallery as child nodes (i.e. Front Page, TextPage etc)

Step 3: Set up the Template

The final step involves adding the bb_gallery macro to the created template. Go to the template that was created and use the "insert umbraco macro" button to add the gallery macro. You should now be able to add a gallery to the content, and if you have your jquery setup correctly it should all work

PART B: THE MULTIPLE GALLERY LISTING PAGE

If you wish to add additional functionality to your gallery, and have a "gallery listing page", then read on.

The gallery listing page is designed to present a pictoral and textual listing of all galleries underneath it.

Step 1: Create the XSLT

Create the XSLT, and associated macro for the individual gallery. Right click on "XSLT Files" and choose create. Choose the clean template, and tick "Create macro". Give it a filename (i.e bb_Gallery List). Then paste the following XSLT into that new file:

 1: <?xml version="1.0" encoding="UTF-8"?>

 2: <!DOCTYPE xsl:Stylesheet [ &amp;lt;!ENTITY nbsp "&#x00A0;"> ]>

 3: <xsl:stylesheet

 4:     version="1.0"

 5:     xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

 6:     xmlns:msxml="urn:schemas-microsoft-com:xslt"

 7:     xmlns:umbraco.library="urn:umbraco.library"

 8:     exclude-result-prefixes="msxml umbraco.library">

 9: <xsl:output method="xml" omit-xml-declaration="yes"/>

10: <xsl:param name="currentPage"/>

11: <xsl:template match="/">

12: <xsl:for-each select="$currentPage/node [string(data [@alias='umbracoNaviHide']) != '1']">

13:      <xsl:variable name="picFile" select="number(./data [@alias = 'mainGalleryIMG'])"/>

14:         <xsl:variable name="galImage" select="umbraco.library:GetMedia($picFile,0)/data[@alias='umbracoFile']"/>

15:             <div style="padding:7px;border: 1px solid #ddd; float:left; margin-right: 10px; margin-bottom: 15px;">

16:                 <a href="{umbraco.library:NiceUrl(@id)}">

17:                     <img>

18:                         <xsl:attribute name="src">/umbraco/imageGen.aspx?image=<xsl:value-of select="$galImage"/>&amp;width=200&amp;height=100&amp;constrain=true</xsl:attribute>

19:                         <xsl:attribute name="alt"><xsl:value-of select="(./data [@alias = 'PageHeader'])"/></xsl:attribute>

20:                         <xsl:attribute name="class">reflect rheight25 ropacity35</xsl:attribute>

21:                         <xsl:attribute name="style">border:none;</xsl:attribute>

22:                     </img>

23:                 </a>

24:                 <div style=" font-size: 0.9em; padding-top: 0.2em;width:130px;">

25:                     <a href="{umbraco.library:NiceUrl(@id)}"><xsl:value-of select="(./data [@alias = 'PageHeader'])"/></a>

26:                 </div>

27:             </div>

28: </xsl:for-each>

29: </xsl:template>

30: </xsl:stylesheet>

The XSLT above references PageHeader from the gallery document type properties, so make sure you have added this. Also, I had to check "skip error testing" because of a known problem with V3 and GetMedia parsing Int32, so you may also have to do that. You will not need to do anything to the associated macro

Step 2: Set up the Document Type

The next step involves setting up a document type and its associated template for the gallery listing. Under the "Settings" section, right click on "Document Types" and choose create. Give it an appropriate name (i.e. bb_Gallery List) and check "Create Matching Template". Now we will need to edit and add a couple of properties.

1. Under the info tab, check bb_gallery List under "Allowed Templates" and make sure bb_gallery List is the default template.
2. You can also tabs for "content" and "metadata"
3. Under the "Generic Properties" tab you can now add the required parameters
   • Alias: PageHeader; Name: Page Header; Type: TextString; Tab: Content
   • [Optional] Alias: bodyText; Name: Content; Type: Richtextbox Editor ; Tab: Content
   • Alias: PageTitle; Name: Page title; Type: TextString ; Tab: Metadata
   • You can also add items for description and keywords if you desire

Step 3: Set up the Template

The final step involves adding the bb_gallery List macro to the created template. Go to the template that was created and use the "insert umbraco macro" button to add the gallery macro. You should now be able to add a gallery listing to the content, and add galleries underneath it.

PART C: IN ACTION

Unfortunately I do not have it in action on a live site, and if I link to a development site, that link will fail at some point. So, for now I will give you screenshots of it in action:

Gallery List Page

Gallery Page

Lightbox Navigation