xslt image gallery

hrbmxco · Mar 8, 2006

hello. Im making an image gallery using XML. I would like to display the images 4 on a line, or as many lines as it takes to display all the images. Would XSLT be the best way to go. I can get the images to display, i just dont know how to get 4 images per line. Any help would be great

Thanks
zach

JontyMC · Mar 9, 2006

What code do you have at the moment?

Jon

"I don't regret this, but I both rue and lament it.

hrbmxco · Mar 9, 2006

hello.. for the xml document i have:
<?xml version="1.0" encoding="utf-8" ?>
<gallery>
<image>
<thumb>T_Image1.jpg</thumb>
<original>Image1.jpg</original>
<caption>Image 1 Caption</caption>
</image>

<image>
<thumb>T_Image2.jpg</thumb>
<original>Image2.jpg</original>
<caption>Image 2 Caption</caption>
</image>

<image>
<thumb>T_Image3.jpg</thumb>
<original>Image3.jpg</original>
<caption>Image 3 Caption</caption>
</image>

<image>
<thumb>T_Image4.jpg</thumb>
<original>Image4.jpg</original>
<caption>Image 4 Caption</caption>
</image>

<image>
<thumb>T_Image5.jpg</thumb>
<original>Image5.jpg</original>
<caption>Image 5 Caption</caption>
</image>

<image>
<thumb>T_Image6.jpg</thumb>
<original>Image6.jpg</original>
<caption>Image 6 Caption</caption>
</image>
</gallery>

and for the XSLT I have:
<xsl:stylesheet xmlns:xsl="

http://www.w3.org/1999/XSL/Transform"

version="1.0">

<xsl:template match="/">
<xsl:for-each select="//image">
<xsl:apply-templates select="original" />
<xsl:apply-templates select="caption" />
</xsl:for-each>
</xsl:template>

<xsl:template match="original">
<a border = "0">
<xsl:attribute name="href">
uploaded_images/original/<xsl:value-of select="." />
</xsl:attribute>

<img>
<xsl:attribute name="src">
uploaded_images/T_<xsl:value-of select="." />
</xsl:attribute>
</img>
</a>
</xsl:template>

<xsl:template match="caption">
<xsl:value-of select="." />
</xsl:template>

</xsl:stylesheet>

I would like the captions to be under the pics. The lines dont have to be 4 pictures long, but there needs to be at least 3 pictures per line.

Thanks for the help
zach

JontyMC · Mar 10, 2006

You need to use mod to split the images into groups. I would do something like this:

Code:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="[URL unfurl="true"]http://www.w3.org/1999/XSL/Transform">[/URL]
  <xsl:output method="xml" indent="yes" encoding="iso-8859-1" doctype-public="-//W3C//DTD XHTML 1.1//EN" doctype-system="[URL unfurl="true"]http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"[/URL] omit-xml-declaration="yes"/>
  <xsl:template match="/">
    <html>
      <head>
        <title>Pictures</title>
      </head>
      <body>
        <table cellpadding="5" cellspacing="5" border="1" style="border-collapse: collapse; text-align: center;">
          <tbody>
            <xsl:apply-templates select="gallery/image[position() mod 4 = 1]" mode="tr"/>
          </tbody>
        </table>
      </body>
    </html>
  </xsl:template>
  <xsl:template match="image" mode="tr">
    <xsl:variable name="pos" select="(position() - 1) * 4 + 1"/>
    <tr>
      <xsl:apply-templates select="../image[position() &gt;= $pos and position() &lt; $pos + 4]" mode="td"/>
    </tr>
  </xsl:template>
  <xsl:template match="image" mode="td">
    <td>
      <a href="javascript: window.open('{original}');">
        <img src="{thumb}" alt="{caption}" style="border: none;"/>
      </a>
      <br/>
      <xsl:value-of select="caption"/>
    </td>
  </xsl:template>
</xsl:stylesheet>

Jon

"I don't regret this, but I both rue and lament it.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

xslt image gallery

hrbmxco

Programmer

JontyMC

Programmer

hrbmxco

Programmer

JontyMC

Programmer

Similar threads

Part and Inventory Search

Sponsor