screenshots as homepage
authorDavid Solbach <d@vidsolbach.de>
Sun, 3 Oct 2010 19:14:47 +0000 (21:14 +0200)
committerDavid Solbach <d@vidsolbach.de>
Sun, 3 Oct 2010 19:14:47 +0000 (21:14 +0200)
16 files changed:
www/floating_cards/back.png [new file with mode: 0644]
www/floating_cards/floating_cards.desktop [new file with mode: 0644]
www/floating_cards/forward.png [new file with mode: 0644]
www/floating_cards/next.png [new file with mode: 0644]
www/floating_cards/prev.png [new file with mode: 0644]
www/floating_cards/preview.png [new file with mode: 0644]
www/floating_cards/style.css [new file with mode: 0644]
www/floating_cards/template.xsl [new file with mode: 0644]
www/floating_cards/up.png [new file with mode: 0644]
www/gallery.xml [new file with mode: 0644]
www/index.html [new file with mode: 0644]
www/screenshot04_png/original_screenshot04.png [new file with mode: 0644]
www/screenshot04_png/screenshot04.png [new file with mode: 0644]
www/screenshot04_png/screenshot04.png.html [new file with mode: 0644]
www/screenshot04_png/thumb_screenshot04.jpeg [new file with mode: 0644]
www/thumb_size.css [new file with mode: 0644]

diff --git a/www/floating_cards/back.png b/www/floating_cards/back.png
new file mode 100644 (file)
index 0000000..955d1d3
Binary files /dev/null and b/www/floating_cards/back.png differ
diff --git a/www/floating_cards/floating_cards.desktop b/www/floating_cards/floating_cards.desktop
new file mode 100644 (file)
index 0000000..252c8f2
--- /dev/null
@@ -0,0 +1,115 @@
+[Desktop Entry]
+X-SuSE-translate=true
+Name=Floating Cards
+Name[bg]=Плаващи карти
+Name[ca]=Cartes flotants
+Name[ca@valencia]=Cartes flotants
+Name[da]=Flydende kort
+Name[en_GB]=Floating Cards
+Name[es]=Cartas Fluctuantes
+Name[et]=Hõljuvad kaardid
+Name[eu]=Txartel mugikorrak
+Name[gl]=Tarxetas flutuantes
+Name[is]=Flotspjöld
+Name[it]=Carte sparse
+Name[km]=កាត​អថេរ
+Name[lv]=Peldošās kartītes
+Name[nb]=Flytende kort
+Name[nl]=Drijvende kaarten
+Name[pt]=Cartas Flutuantes
+Name[pt_BR]=Cartas flutuantes
+Name[ru]=Всплывающие миниатюры
+Name[sv]=Svävande kort
+Name[th]=แผงลอย
+Name[uk]=Картки, що плавають
+Name[x-test]=xxFloating Cardsxx
+Name[zh_CN]=浮动卡片
+Name[zh_TW]=紙牌浮空
+Comment=A dark theme with floating thumbnail/description cards. Fast navigation through the gallery.
+Comment[bg]=Тъмен изглед с плаващи карти с миниатюри и описания. Бързо прелистване на галериите.
+Comment[ca]=Un tema fosc amb cartes de miniatures/descripcions flotants. Navegació ràpida per la galeria.
+Comment[ca@valencia]=Un tema fosc amb cartes de miniatures/descripcions flotants. Navegació ràpida per la galeria.
+Comment[da]=Et mørkt tema med flydende kort med miniaturer/beskrivelse. Hurtig navigation gennem galleriet.
+Comment[en_GB]=A dark theme with floating thumbnail/description cards. Fast navigation through the gallery.
+Comment[es]=Un tema oscuro con cartas con miniaturas/descripciones. Navegación rápida por la galería.
+Comment[et]=Tume teema hõljuvate pisipildi/kirjelduskaartidega. Kiire liikumine galeriis.
+Comment[eu]=Gai iluna koadro txiki edo azalpenen txartel mugikorrekin. Galerian zehar azkar nabigatzeko.
+Comment[gl]=Un tema escuro con tarxetas de miniatura/descrición flutuantes. Navegación rápida pola galería.
+Comment[is]=Dökkt þema með smámyndaum og lýsingum á fljótandi spjöldum. Hröð fletting í gegnum myndasafn.
+Comment[it]=Un tema scuro con carte descrittive e miniature sparse. Navigazione veloce nella galleria.
+Comment[km]=ស្បែក​ខ្មៅ​ដែល​មាន​កាត​រូបភាព​តូច​ៗ​/សេចក្តី​ពិពណ៌នា​អថេរ​ ។ ការ​រុក​រក​រហ័ស​តាម​រយៈ​វិចិត្រ​សាល ។
+Comment[lv]=Tumša tēma ar peldošām sīktēlu/apraksta kartītēm. Ātra navigācija cauri galerijai.
+Comment[nb]=Et mørkt tema med flytende kort med minibilder/beskrivelser. Rask navigering gjennom galleriet.
+Comment[nl]=Een donket thema met drijvende miniatuur/beschrijvingskaarten. Snelle navigatie door de galerij.
+Comment[pt]=Um tema escuro com cartões com miniaturas/descrições. Navegação rápida pela galeria.
+Comment[pt_BR]=Um tema escuro com cartas de miniatura/descrição flutuantes. Navegação rápida pela galeria.
+Comment[ru]=Тёмное оформление со всплывающими панелями миниатюр, обеспечивающими быструю навигацию по галерее.
+Comment[sv]=Ett mörkt tema med svävande miniatyrbilder och beskrivningar. Snabb navigering genom galleriet.
+Comment[th]=ชุดตกแต่งโทนสีมืด โดยมีแผงแสดงภาพตัวอย่าง/รายละเอียดต่าง ๆ ซึ่งทำให้สามารถท่องดูแกลเลอรีได้อย่างรวดเร็ว
+Comment[uk]=Темна тема з картками мініатюр або описів, що неначебто плавають панеллю. Пришвидшує орієнтування у галереї.
+Comment[x-test]=xxA dark theme with floating thumbnail/description cards. Fast navigation through the gallery.xx
+Comment[zh_CN]=带有浮动缩略图/描述卡片的暗色调主题。快速导航画册。
+Comment[zh_TW]=使用浮空縮圖/描述卡的暗色主題。快速瀏覽藝廊。
+
+[X-HTMLExport Author]
+Name=Jiří Boháč
+Name[ast]=Jiří Boháč
+Name[bg]=Jiří Boháč
+Name[ca]=Jiří Boháč
+Name[ca@valencia]=Jiří Boháč
+Name[cs]=Jiří Boháč
+Name[da]=Jiří Boháč
+Name[de]=Jiří Boháč
+Name[en_GB]=Jiří Boháč
+Name[es]=Jiří Boháč
+Name[et]=Jiří Boháč
+Name[eu]=Jiří Boháč
+Name[gl]=Jiří Boháč
+Name[hu]=Jiří Boháč
+Name[is]=Jiří Boháč
+Name[it]=Jiří Boháč
+Name[km]=Jiří Boháč
+Name[lv]=Jiří Boháč
+Name[nb]=Jiří Boháč
+Name[nds]=Jiří Boháč
+Name[nl]=Jiří Boháč
+Name[pa]=Jiří Boháč
+Name[pt]=Jiří Boháč
+Name[pt_BR]=Jiří Boháč
+Name[ru]=Jiří Boháč
+Name[sv]=Jiří Boháč
+Name[th]=Jiří Boháč
+Name[uk]=Jiří Boháč
+Name[x-test]=xxJiří Boháčxx
+Name[zh_CN]=Jiří Boháč
+Name[zh_TW]=Jiří Boháč
+Url=mailto:jbohac@jikos.cz
+
+[X-HTMLExport Preview]
+Name=Floating Cards
+Name[bg]=Плаващи карти
+Name[ca]=Cartes flotants
+Name[ca@valencia]=Cartes flotants
+Name[da]=Flydende kort
+Name[en_GB]=Floating Cards
+Name[es]=Cartas Fluctuantes
+Name[et]=Hõljuvad kaardid
+Name[eu]=Txartel mugikorrak
+Name[gl]=Tarxetas flutuantes
+Name[is]=Flotspjöld
+Name[it]=Carte sparse
+Name[km]=កាត​អថេរ
+Name[lv]=Peldošās kartītes
+Name[nb]=Flytende kort
+Name[nl]=Drijvende kaarten
+Name[pt]=Cartas Flutuantes
+Name[pt_BR]=Cartas flutuantes
+Name[ru]=Всплывающие миниатюры
+Name[sv]=Svävande kort
+Name[th]=แผงลอย
+Name[uk]=Картки, що плавають
+Name[x-test]=xxFloating Cardsxx
+Name[zh_CN]=浮动卡片
+Name[zh_TW]=紙牌浮空
+Url=preview.png
+
diff --git a/www/floating_cards/forward.png b/www/floating_cards/forward.png
new file mode 100644 (file)
index 0000000..f36dbf0
Binary files /dev/null and b/www/floating_cards/forward.png differ
diff --git a/www/floating_cards/next.png b/www/floating_cards/next.png
new file mode 100644 (file)
index 0000000..43ec100
Binary files /dev/null and b/www/floating_cards/next.png differ
diff --git a/www/floating_cards/prev.png b/www/floating_cards/prev.png
new file mode 100644 (file)
index 0000000..0fc2dfa
Binary files /dev/null and b/www/floating_cards/prev.png differ
diff --git a/www/floating_cards/preview.png b/www/floating_cards/preview.png
new file mode 100644 (file)
index 0000000..133f8e2
Binary files /dev/null and b/www/floating_cards/preview.png differ
diff --git a/www/floating_cards/style.css b/www/floating_cards/style.css
new file mode 100644 (file)
index 0000000..db894ed
--- /dev/null
@@ -0,0 +1,250 @@
+body {
+       background-color: #111;
+       color: #888;
+       margin: 0;
+       font-family: sans-serif;
+}
+
+a {
+       color: #ccc;
+       text-decoration: none;
+}
+
+a:hover {
+       color: #fff;
+}
+
+img {
+       border: 0;
+       padding: 0;
+       margin: 0;
+}
+
+/*********************************************************/
+/* back and forward picture selection tabs on page edges */
+
+div.select {
+       padding: 0 0 0 0;
+       margin: 0 0 0 0;
+       background-color: #444;
+       background-repeat: no-repeat;
+       background-position: center;
+       position: fixed;
+       width: 0px;
+       height: 33%;
+       top: 33%;
+}
+
+div.select:hover {
+       width: auto;
+       max-width: 80%;
+}
+
+div.select.back {
+       left: 0px;
+       background-image: url('back.png');
+       background-position: left;
+       padding-left: 20px;
+}
+div.select.forward {
+       right: 0px;
+       background-image: url('forward.png');
+       background-position: right;
+       padding-right: 20px;
+}
+
+
+div.select ul {
+       padding: 0 0 0 0;
+       margin: 0 0 0 0;
+       display:none;
+       height: 100%;
+}
+
+div.select.back ul {
+       float: left;    
+}
+div.select.forward ul {
+       float: right;
+}
+
+div.select:hover ul {
+       display: inline-block;
+}
+
+
+div.select ul li {
+       margin-top: 16px;
+       margin-bottom: 10000px;         /* hack; prevent other than the first line of cards from showing */
+       margin-left: 2px;
+       margin-right: 2px;
+       vertical-align: text-top;
+       border-bottom-color: #666;
+}
+
+div.select ul li a {
+       border-color: #666;
+}
+
+div.select ul li a:hover {
+       border-color: #fff;
+}
+
+
+div.select.back ul li {
+       float: right;
+       margin-right: 16px;
+}
+div.select.forward ul li {
+       float: left;
+       margin-left: 16px;
+}
+
+
+/*********************************************************/
+/* header and navigation buttons at top of page          */
+
+
+h1,h2 {
+       padding: 0 0 0 0;
+       margin: 0 125px 0 125px;        /* clear the (fixed-size) div.nav buttons in the corners */
+       font-size: 80%;
+       text-align: center;
+}
+
+h1 {
+       padding-top: 0.3em;
+       padding-bottom: 0.3em;
+}
+
+h2 {
+       min-height: 1em;                /* 1em here tries to approximate the font height to prevent the picture from moving up when the description is not present */
+       font-weight: normal;
+}
+
+div.nav {
+       position: fixed;
+       top: 0;
+}
+
+div.nav.left {
+       left: 0;
+}
+
+div.nav.right {
+       right: 0;
+}
+
+div.nav a {
+       padding-left: 20px;
+       padding-right: 20px;
+       background-color: #444;
+}
+
+
+div.nav a:hover {
+       background-color: #666;
+}
+
+       
+div.nav.right a {
+       margin-left: 5px;
+       float: right;
+}
+
+div.nav.left a {
+       margin-right: 5px;
+       float: left;
+}
+
+
+div.nav img {
+       margin-left: 5px;
+       margin-right: 5px;
+       margin-top: 3px;
+       margin-bottom: 3px;
+       vertical-align: middle;
+}
+
+/*********************************************************/
+/* cards with descriptions                               */
+/* used by: collection, collection list, back/forward    */
+
+li {
+       margin: 24px;
+       float: left;
+       list-style: none;
+       overflow: hidden;
+       
+       /* when not hovered, bottom border of the li is shown */
+       border-bottom-style: solid;
+       border-bottom-width: 1px;
+       border-bottom-color: #444;
+
+}
+
+li:hover {
+       /* allow the overflow to overlap other cards */
+       position: relative;     
+       overflow: visible;
+}
+
+li a {
+
+       background-color: #000;
+
+       display: block;
+       padding: 9px;
+       
+       text-align: center;
+       font-size: 10px;
+       margin: 0px;
+
+       border-style: solid;
+       border-width: 1px;
+       border-color: #444;
+
+
+}
+
+li a:hover {
+       border-color: #fff;
+}
+
+
+/*********************************************************/
+/* image page                                                   */
+
+div.image {
+       padding-top: 0.5em;
+       margin: 0 auto;
+       width: 95%;
+       text-align: center;
+}
+
+
+div.image img {
+       padding: 20px;
+       background-color: #000;
+       border: 1px solid #444;
+}
+
+
+/*********************************************************/
+/* very dark and non-disturbing footer                   */
+
+p.footer {
+       clear: both;
+       border-top: 1px solid #333;
+       font-size: 70%;
+       text-align: right;
+       color: #333;
+}
+
+p.footer a {   
+       color: #444;
+}
+
+p.footer a:hover {     
+       color: #666;
+}
diff --git a/www/floating_cards/template.xsl b/www/floating_cards/template.xsl
new file mode 100644 (file)
index 0000000..bec1c04
--- /dev/null
@@ -0,0 +1,350 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE stylesheet [
+]>
+
+<xsl:transform version="1.0"
+       xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+       xmlns:exsl="http://exslt.org/common"
+       extension-element-prefixes="exsl">
+<xsl:output method="xml" indent="yes" 
+       doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+        doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" />
+
+<!-- **** image page ******************************************************************* -->
+<xsl:template name="imagePage">
+<xsl:param name="max_thumb_height" />
+<xsl:param name="max_thumb_width" />
+       <html>
+       <head>
+               <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+               <title><xsl:value-of select="title"/></title>
+               <link rel="stylesheet" type="text/css" href="../floating_cards/style.css"/>
+               <link rel="stylesheet" type="text/css" href="../thumb_size.css"/>
+       </head>
+       <body class="image">
+       <h1>
+               <xsl:value-of select="title"/>
+               (<xsl:value-of select="position()"/>/<xsl:value-of select="last()"/>):
+       </h1>
+       <h2>
+               <xsl:value-of select="description"/>
+       </h2>
+       
+       <!-- the image itself -->
+       <div class="image">
+       <xsl:choose>
+               <xsl:when test="original/@fileName != ''">
+                       <a href="{original/@fileName}">
+                       <img src="{full/@fileName}" width="{full/@width}" height="{full/@height}" alt=""/>
+                       </a>
+               </xsl:when>
+               <xsl:otherwise>
+                       <img src="{full/@fileName}" width="{full/@width}" height="{full/@height}" alt=""/>
+               </xsl:otherwise>
+       </xsl:choose>
+       </div>
+
+       <!-- navigation buttons at the top -->
+       <div class="nav right">
+               <xsl:if test="position() &lt; last()">
+                       <a href="{following-sibling::image[position()=1]/full/@fileName}.html">
+                               <img src="../floating_cards/next.png" alt="&gt;"/>
+                       </a>
+               </xsl:if>
+               <xsl:if test="position() &gt; 1">
+                       <a href="{preceding-sibling::image[position()=1]/full/@fileName}.html">
+                               <img src="../floating_cards/prev.png" alt="&lt;"/>
+                       </a>
+               </xsl:if>
+       </div>
+       
+       <div class="nav left">
+               <xsl:choose>
+                       <xsl:when test="count(/collections/collection) &gt; 1">
+                               <a href="../{../fileName}.html">
+                               <img src="../floating_cards/up.png" alt="&lt;&lt;&lt;"/></a>
+                       </xsl:when>
+                       <xsl:otherwise>
+                               <a href="../index.html">
+                               <img src="../floating_cards/up.png" alt="&lt;&lt;&lt;"/></a>
+                       </xsl:otherwise>
+               </xsl:choose>
+       </div>
+                       
+       <!-- back/forward selection controls -->
+       
+       <!-- the maximum expected window width to calculate the maximum number of thumbnails to display -->
+       <xsl:variable name="max_screen_width" select="2000"/>
+
+       <!-- the div has a max-width of 80%, margins + padding + border of 38px -->
+       <xsl:variable name="select_count" select="floor($max_screen_width * 0.8 div ($max_thumb_width + 38))"/>
+
+       <xsl:variable name="current" select='position()'/>
+
+       <xsl:if test="position() &gt; 1">
+               <div class="select back">
+               <ul>
+                       <xsl:for-each select="../image[
+                                       position() &gt;= $current - $select_count 
+                                       and position() &lt; $current]"
+                       >
+                       <xsl:sort select="position()" data-type="number" order="descending"/>
+                               <xsl:call-template name="thumbnail">
+                                       <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
+                                       <xsl:with-param name="pre_description"><xsl:value-of select="$current - position()"/>: </xsl:with-param>
+                                       <xsl:with-param name="img_path"><xsl:value-of select="thumbnail/@fileName"/></xsl:with-param>
+                                       <xsl:with-param name="link_path"><xsl:value-of select="full/@fileName"/>.html</xsl:with-param>
+                               </xsl:call-template>
+                       </xsl:for-each>
+               </ul>
+               </div>
+       </xsl:if>
+       
+       <xsl:if test="position() &lt; last()">
+               <div class="select forward">
+               <ul>
+                       <xsl:for-each select="../image[
+                                       position() &gt; $current 
+                                       and position() &lt;= $current + $select_count]"
+                       >
+                               <xsl:call-template name="thumbnail">
+                                       <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
+                                       <xsl:with-param name="pre_description"><xsl:value-of select="$current + position()"/>: </xsl:with-param>
+                                       <xsl:with-param name="img_path"><xsl:value-of select="thumbnail/@fileName"/></xsl:with-param>
+                                       <xsl:with-param name="link_path"><xsl:value-of select="full/@fileName"/>.html</xsl:with-param>
+                               </xsl:call-template>
+                       </xsl:for-each>
+               </ul>
+               </div>
+       </xsl:if>
+
+       </body>
+       </html>
+</xsl:template>
+
+<!-- **** collection page *************************************************************** -->
+<xsl:template name="collectionPage">
+<xsl:param name="max_thumb_height" />
+<xsl:param name="max_thumb_width" />
+       <html>
+       <head>
+               <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+               <title><xsl:value-of select="name"/></title>
+               <link rel="stylesheet" type="text/css" href="floating_cards/style.css"/>
+               <link rel="stylesheet" type="text/css" href="thumb_size.css"/>
+       </head>
+       <body class="collection">
+
+       <!-- for multi-collection galleries, up is "index.html", otherwise "../" -->
+       <xsl:variable name="up">
+               <xsl:choose>
+               <xsl:when test="count(/collections/collection) &gt; 1">index.html</xsl:when>
+               <xsl:otherwise>../</xsl:otherwise>
+               </xsl:choose>
+       </xsl:variable>
+       
+       <!-- header and navigation buttons -->
+       <h1><xsl:value-of select="name"/></h1>
+       <div class="nav left">
+               <a href="{$up}">
+               <img src="floating_cards/up.png" alt="&lt;&lt;&lt;"/></a>
+       </div>
+
+       <!-- list of image thumbnails -->
+       <ul>
+               <xsl:variable name="folder" select='fileName'/>
+               <xsl:for-each select="image">
+                       <xsl:call-template name="thumbnail">
+                               <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
+                               <xsl:with-param name="pre_description"><xsl:value-of select="position()"/>: </xsl:with-param>
+                               <xsl:with-param name="img_path"><xsl:value-of select="$folder"/>/<xsl:value-of select="thumbnail/@fileName"/></xsl:with-param>
+                               <xsl:with-param name="link_path"><xsl:value-of select="$folder"/>/<xsl:value-of select="full/@fileName"/>.html</xsl:with-param>
+                       </xsl:call-template>
+                       <exsl:document href='{$folder}/{full/@fileName}.html'
+                               method="xml" indent="yes" 
+                               doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+                               octype-public="-//W3C//DTD XHTML 1.0 Strict//EN">                       
+                                       <xsl:call-template name="imagePage">
+                                               <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
+                                               <xsl:with-param name="max_thumb_width"><xsl:value-of select="$max_thumb_width"/></xsl:with-param>
+                                       </xsl:call-template>
+                       </exsl:document>
+               </xsl:for-each>
+       </ul>
+
+       <p class="footer">
+               HTML export <a href="http://www.kipi-plugins.org/">KIPI Plugin</a> (Floating Cards theme)
+               <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict!</a>
+               <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS!</a>
+       </p>
+       </body>
+       </html>
+</xsl:template>
+
+
+<!-- **** collection list page ********************************************************** -->
+<xsl:template name="collectionListPage">
+<xsl:param name="max_thumb_height" />
+<xsl:param name="max_thumb_width" />
+       <html>
+       <head>
+               <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+               <title><xsl:value-of select="$i18nCollectionList"/></title>
+               <link rel="stylesheet" type="text/css" href="floating_cards/style.css"/>
+               <link rel="stylesheet" type="text/css" href="thumb_size.css"/>
+       </head>
+       <body class="collectionlist">
+       
+       <!-- header and navigation buttons -->
+       <h1>
+               <xsl:value-of select="$i18nCollectionList"/>
+       </h1>
+       <div class="nav left">
+               <a href="../">
+               <img src="floating_cards/up.png" alt="&lt;&lt;&lt;"/></a>
+       </div>
+       
+       <!-- list of collection thumbnails -->
+       <ul>
+               <xsl:for-each select="collections/collection">
+                       <!-- Use first image as collection image -->
+                       <xsl:for-each select="image[1]">
+                       <xsl:call-template name="thumbnail">
+                               <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
+                               <xsl:with-param name="force_description">
+                                       <xsl:value-of select="../name"/> (<xsl:value-of select="count(../image)"/>)
+                               </xsl:with-param>
+                               <xsl:with-param name="img_path"><xsl:value-of select="../fileName"/>/<xsl:value-of select="thumbnail/@fileName"/></xsl:with-param>
+                               <xsl:with-param name="link_path"><xsl:value-of select="../fileName"/>.html</xsl:with-param>
+                       </xsl:call-template>
+                       </xsl:for-each>
+                       
+                       <exsl:document href="{fileName}.html"
+                               method="xml" indent="yes" 
+                               doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
+                               octype-public="-//W3C//DTD XHTML 1.0 Strict//EN">                       
+                               <xsl:call-template name="collectionPage">
+                                       <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
+                                       <xsl:with-param name="max_thumb_width"><xsl:value-of select="$max_thumb_width"/></xsl:with-param>
+                               </xsl:call-template>
+                       </exsl:document>
+               </xsl:for-each>
+       </ul>
+       
+       <p class="footer">
+               HTML export <a href="http://www.kipi-plugins.org/">KIPI Plugin</a> (Floating Cards theme)
+               <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict!</a>
+               <a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS!</a>
+       </p>
+       </body>
+       </html>
+</xsl:template>
+
+<!-- **** thumbnail template **************************************************************** -->
+<xsl:template name="thumbnail">
+<xsl:param name="max_thumb_height" />
+<xsl:param name="pre_description" />
+<xsl:param name="force_description" />
+<xsl:param name="link_path" />
+<xsl:param name="img_path" />
+
+       <!-- the image is automatically centered horizontally inside the card;
+            for vertical centering, calculate the padding -->
+       <xsl:variable name="padding_top">
+               <xsl:value-of select="floor(($max_thumb_height - thumbnail/@height) div 2)"/>
+       </xsl:variable>
+       
+       <xsl:variable name="padding_bottom">
+               <xsl:value-of select="$max_thumb_height - thumbnail/@height - $padding_top"/>
+       </xsl:variable>
+               
+       <li>
+               <a href="{$link_path}">
+               <!-- don't pollute the HTML with unnecessary zero paddings -->
+               <xsl:choose>
+                       <xsl:when test="$padding_top > 0">
+                               <img style="margin: {$padding_top}px 0 {$padding_bottom}px 0;" src="{$img_path}" alt=""/>
+                       </xsl:when>
+                       <xsl:otherwise>
+                               <img src="{$img_path}" alt=""/>
+                       </xsl:otherwise>
+               </xsl:choose>
+               <br/>
+               <xsl:choose>
+                       <xsl:when test="string($force_description) != ''">
+                               <xsl:value-of select="$force_description"/>
+                       </xsl:when>
+                       <xsl:when test="string(description) != ''">
+                               <xsl:value-of select="$pre_description"/>
+                               <xsl:value-of select="description"/>
+                       </xsl:when>
+                       <xsl:otherwise>
+                               <xsl:value-of select="$pre_description"/>
+                               <xsl:value-of select="title"/>
+                       </xsl:otherwise>
+               </xsl:choose>
+               </a>
+       </li>
+</xsl:template>
+
+<!-- **** main template **************************************************************** -->
+<xsl:template match="/">
+
+       <!-- determine the maximum thumbnail dimensions;
+            the height needs to be passed to all templates for
+             proper padding of thumbnails -->
+       <xsl:variable name="max_thumb_width">
+               <xsl:for-each select="/collections/collection/image">
+                       <xsl:sort select="thumbnail/@width" data-type="number" order="descending"/>
+                       <xsl:if test="position()=1">
+                               <xsl:value-of select="thumbnail/@width"/>
+                       </xsl:if>
+               </xsl:for-each>
+       </xsl:variable>
+       <xsl:variable name="max_thumb_height">
+               <xsl:for-each select="/collections/collection/image">
+                       <xsl:sort select="thumbnail/@height" data-type="number" order="descending"/>
+                       <xsl:if test="position()=1">
+                               <xsl:value-of select="thumbnail/@height"/>
+                       </xsl:if>
+               </xsl:for-each>
+       </xsl:variable>
+       
+
+       <!-- create thumb_size.css specifying thumbnail width/height
+            based on the maximum thumbnail dimensions -->
+       <exsl:document href='thumb_size.css' method="text">
+li {
+       width: <xsl:value-of select="$max_thumb_width + 20"/>px;
+       height: <xsl:value-of select="$max_thumb_height + 40"/>px;
+}
+
+li a {
+       min-height: <xsl:value-of select="$max_thumb_height + 21"/>px;
+}
+       </exsl:document>
+
+       <!-- If there is only one collection in the gallery, make
+            index.html the collection page; otherwise create a
+            collection list page.  -->
+       <xsl:choose>
+               <xsl:when test="count(collections/collection) &gt; 1">
+                       <xsl:call-template name="collectionListPage">
+                               <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
+                               <xsl:with-param name="max_thumb_width"><xsl:value-of select="$max_thumb_width"/></xsl:with-param>
+                       </xsl:call-template>
+
+               </xsl:when>
+               <xsl:otherwise>
+                       <xsl:for-each select="collections/collection">
+                               <xsl:call-template name="collectionPage">
+                                       <xsl:with-param name="max_thumb_height"><xsl:value-of select="$max_thumb_height"/></xsl:with-param>
+                                       <xsl:with-param name="max_thumb_width"><xsl:value-of select="$max_thumb_width"/></xsl:with-param>
+                               </xsl:call-template>
+                       </xsl:for-each>
+               </xsl:otherwise>
+       </xsl:choose>
+</xsl:template>
+
+
+</xsl:transform>
diff --git a/www/floating_cards/up.png b/www/floating_cards/up.png
new file mode 100644 (file)
index 0000000..4949e5a
Binary files /dev/null and b/www/floating_cards/up.png differ
diff --git a/www/gallery.xml b/www/gallery.xml
new file mode 100644 (file)
index 0000000..aed1163
--- /dev/null
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<collections>
+ <collection>
+  <name>screenshot04.png</name>
+  <fileName>screenshot04_png</fileName>
+  <comment></comment>
+  <image>
+   <title>screenshot04</title>
+   <description></description>
+   <date>2010-10-03T17:44:58</date>
+   <full fileName="screenshot04.png" height="480" width="800"/>
+   <thumbnail fileName="thumb_screenshot04.jpeg" height="120" width="120"/>
+   <original fileName="original_screenshot04.png" height="480" width="800"/>
+   <exif>
+    <exifimagemake>nicht verfügbar</exifimagemake>
+    <exifimagemodel>nicht verfügbar</exifimagemodel>
+    <exifimageorientation>nicht verfügbar</exifimageorientation>
+    <exifimagexresolution>nicht verfügbar</exifimagexresolution>
+    <exifimageyresolution>nicht verfügbar</exifimageyresolution>
+    <exifimageresolutionunit>nicht verfügbar</exifimageresolutionunit>
+    <exifimagedatetime>nicht verfügbar</exifimagedatetime>
+    <exifimageycbcrpositioning>nicht verfügbar</exifimageycbcrpositioning>
+    <exifphotoexposuretime>nicht verfügbar</exifphotoexposuretime>
+    <exifphotofnumber>nicht verfügbar</exifphotofnumber>
+    <exifphotoexposureprogram>nicht verfügbar</exifphotoexposureprogram>
+    <exifphotoisospeedratings>nicht verfügbar</exifphotoisospeedratings>
+    <exifphotoshutterspeedvalue>nicht verfügbar</exifphotoshutterspeedvalue>
+    <exifphotoaperturevalue>nicht verfügbar</exifphotoaperturevalue>
+    <exifphotofocallength>nicht verfügbar</exifphotofocallength>
+   </exif>
+  </image>
+ </collection>
+</collections>
diff --git a/www/index.html b/www/index.html
new file mode 100644 (file)
index 0000000..74b8a62
--- /dev/null
@@ -0,0 +1,26 @@
+<?xml version="1.0"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>screenshot04.png</title>
+    <link rel="stylesheet" type="text/css" href="floating_cards/style.css" />
+    <link rel="stylesheet" type="text/css" href="thumb_size.css" />
+  </head>
+  <body class="collection">
+    <h1>screenshot04.png</h1>
+    <div class="nav left">
+      <a href="../">
+        <img src="floating_cards/up.png" alt="&lt;&lt;&lt;" />
+      </a>
+    </div>
+    <ul>
+      <li>
+        <a href="screenshot04_png/screenshot04.png.html"><img src="screenshot04_png/thumb_screenshot04.jpeg" alt="" /><br />1: screenshot04</a>
+      </li>
+    </ul>
+    <p class="footer">
+               HTML export <a href="http://www.kipi-plugins.org/">KIPI Plugin</a> (Floating Cards theme)
+               <a href="http://validator.w3.org/check?uri=referer">Valid XHTML 1.0 Strict!</a><a href="http://jigsaw.w3.org/css-validator/check/referer">Valid CSS!</a></p>
+  </body>
+</html>
diff --git a/www/screenshot04_png/original_screenshot04.png b/www/screenshot04_png/original_screenshot04.png
new file mode 100644 (file)
index 0000000..1ab142c
Binary files /dev/null and b/www/screenshot04_png/original_screenshot04.png differ
diff --git a/www/screenshot04_png/screenshot04.png b/www/screenshot04_png/screenshot04.png
new file mode 100644 (file)
index 0000000..1ab142c
Binary files /dev/null and b/www/screenshot04_png/screenshot04.png differ
diff --git a/www/screenshot04_png/screenshot04.png.html b/www/screenshot04_png/screenshot04.png.html
new file mode 100644 (file)
index 0000000..f0f3ad2
--- /dev/null
@@ -0,0 +1,27 @@
+<?xml version="1.0"?>
+<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <title>screenshot04</title>
+    <link rel="stylesheet" type="text/css" href="../floating_cards/style.css" />
+    <link rel="stylesheet" type="text/css" href="../thumb_size.css" />
+  </head>
+  <body class="image">
+    <h1>screenshot04
+               (1/1):
+       </h1>
+    <h2></h2>
+    <div class="image">
+      <a href="original_screenshot04.png">
+        <img src="screenshot04.png" width="800" height="480" alt="" />
+      </a>
+    </div>
+    <div class="nav right"></div>
+    <div class="nav left">
+      <a href="../index.html">
+        <img src="../floating_cards/up.png" alt="&lt;&lt;&lt;" />
+      </a>
+    </div>
+  </body>
+</html>
diff --git a/www/screenshot04_png/thumb_screenshot04.jpeg b/www/screenshot04_png/thumb_screenshot04.jpeg
new file mode 100644 (file)
index 0000000..ba72069
Binary files /dev/null and b/www/screenshot04_png/thumb_screenshot04.jpeg differ
diff --git a/www/thumb_size.css b/www/thumb_size.css
new file mode 100644 (file)
index 0000000..277403b
--- /dev/null
@@ -0,0 +1,10 @@
+
+li {
+       width: 140px;
+       height: 160px;
+}
+
+li a {
+       min-height: 141px;
+}
+       
\ No newline at end of file