This tutorial shows how you can sprinkle data from NextDB into a webpage of your own design. In the first photogallery tutorial, we showed how to make an unstyled gallery. In this tutorial, we transform the basic photogallery web-table into a stylish and functional photo gallery that looks like this:

This turial requires the existence of the "gallery" table created in the first tutorial, so please complete the first tutorial before attempting this one.

Add An XSLT To Your Database

NextDB allows you to attach XSLT to your webtables, this allows you to create your own HTML output, and to pull data from the NextDB web-table into your HTML. We will dive into XSLT later, but once you have designed an XSLT, this is how you attach it to your web table. Using the web based admin tools login to the database created in the first photogallery tutorial:

Add a row to the SYS_XSLT table and paste the XSLT at the end of this tutorial into the 'src' column and hit save.
Set the 'name' column of the row you create to be 'gallery'
Make sure the SYS_XSLT table is public readable by clicking "Table Data :public" on the table's user interface.

Reference the XSLT in your web-table's URL

To apply the XSLT to your web-table, just modify your web-table's URL to include the XSLT using the ";xslt=gallery" matrix parameter.

http://nextdb.net/nextdb/rest/geoff/gallery/IMG;xslt=gallery

How the XSLT Works

The XSLT below goes into the src column of a row in your SYS_XSLT table. The comments in the XSLT below explain how it works.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
 version="2.0" 
 xmlns:xs="http://www.w3.org/2001/XMLSchema" 
 xpath-default-namespace='http://www.w3.org/1999/xhtml'>
 <!-- we will produce XHTML which is a form of XML--> 
 <xsl:output method="xml"/>
 
 <!-- create a template to copy XHTML document nodes recursively.
 We will call this template like a function when we want to copy the "page links" into the output -->
 <xsl:template match="@*|node()" name="copy-node">
 <xsl:copy>
 <xsl:apply-templates select="@*|node()"/>
 </xsl:copy>
 </xsl:template>

 <!-- this template operates on the html element of NextDB's XHTML view of your data table--> 
 <xsl:template match="html">
 <html> <!-- create the HTML that goes in the destination XHTML output-->
 <head> <!-- -add some css to make it look good-->
 <style type="text/css">
 /*Credits: Dynamic Drive CSS Library */
 /*URL: http://www.dynamicdrive.com/style/ */
 .thumbnail{
 position: relative;
 z-index: 0;
 padding: 5px;
 }
 .thumbnail:hover{
 background-color: transparent;
 z-index: 50;
 }
 .thumbnail span{ /*CSS for enlarged image*/
 position: absolute;
 background-color: lightyellow;
 padding: 5px;
 left: -1000px;
 border: 1px dashed gray;
 visibility: hidden;
 color: black;
 text-decoration: none;
 }
 .thumbnail span img{ /*CSS for enlarged image*/
 border-width: 0;
 padding: 2px;
 }
 .thumbnail:hover span{ /*CSS for enlarged image on hover*/
 visibility: visible;
 top: 0;
 left: 60px; /*position where enlarged image should offset horizontally */
 }
 </style>
 </head>
 <body>
 <xsl:variable name="imgPerRow" select="3"/> <!-- 3 photos per row of the photo gallery table-->
 <table border="1">
 <!-- for every third image, we will treat it as the beginning of a row-->
 <xsl:for-each select="//tbody/tr[position() mod $imgPerRow = 1]"> <!-- use modulo function to find every third image-->
 <tr>
 <xsl:apply-templates select=".|following-sibling::tr[position() &lt; $imgPerRow]"/> <!-- grab next 2 images-->
 </tr>
 </xsl:for-each>
 <!-- We want clickable page links in the table footer, so use our 'copy-node' template to copy them from the source to the destination-->
 <xsl:for-each select="body/table/tfoot/tr/td">
 <tfoot>
 <tr>
 <td>
 <xsl:call-template name="copy-node"/>
 </td>
 </tr>
 </tfoot>
 </xsl:for-each>

 </table>
 <br/>
 <a href="http://nextdb.net/nextdb/rest/geoff/gallery/IMG/edit/true/style/newspaper-a">edit me</a>
 </body>
 </html>

 </xsl:template>
 <xsl:template match="tr">
 <td> 
 <a href="#thumb" class="thumbnail">
 <img width="100px" style="border: 1px dashed gray;" >
 <xsl:attribute name="src">
 <xsl:value-of select="concat(td[@column='img']/a/@href,'/width/100')" />
 </xsl:attribute>
 </img>
 <span>
 <img>
 <xsl:attribute name="src">
 <xsl:value-of select="concat(td[@column='img']/a/@href,'/width/300')" />
 </xsl:attribute>
 </img><br />
 <xsl:value-of select="td[@column='title']" />
 </span>
 </a>
 </td>
 </xsl:template>
</xsl:stylesheet>