german translation for galleryfunctions.php (addresses #43)

* add Makefile to generate gettext .pot, .po and .mo files
 * mark translatable texts in galleryfunctions.php

ChangeLog

@@ -0,0 +1,13 @@
+2009-07-11  Jan Dittberner  <jan@dittberner.info>
+
+	* version 0.2
+	* configurable via ini file
+	* themable (two example themes included)
+	* support horizontal and vertical scrolling themes
+	* build script
+	* use a simple template system to allow theming
+	* add installation and configuration instructions
+	* use list for gallery menu
+	* update javascript libraries
+	* render valid XHTML 1.0 strict markup
+	* improved documentation

INSTALL

@@ -0,0 +1,17 @@
+Installation
+------------
+
+ScrollingJQueryGallery comes with all its dependencies
+integrated. Installation is as easy as unpacking the release tarball
+or zip file.
+
+Setup your gallery installation by copying the gallery.ini.tmpl to
+gallery.ini and changing the settings in the copied file to suit your
+system paths.
+
+Configuration
+-------------
+
+The software may be configured by modifying the gallery.ini file. You
+may enable logging by uncommenting the logfile option inside this
+file.

Makefile

@@ -0,0 +1,26 @@
+OBJECTS = *.php includes/*.php themes/*/*.php dummy/*.php
+LANGUAGES = de
+TARGETFILES = $(foreach lang,$(LANGUAGES),locale/$(lang)/LC_MESSAGES/sjqg.mo)
+POFILES = 
+
+all:	$(TARGETFILES) $(POFILES)
+
+%.mo: %.po
+	msgfmt $< -o $@
+
+%.po: locale/sjqg.pot
+	if [ ! -d `dirname "$@"` ]; then mkdir -p `dirname "$@"`; fi
+	if [ -f $@ ]; then \
+		msgmerge -U $@ $<; \
+	else \
+		cp $< $@; \
+	fi
+
+locale/sjqg.pot: $(OBJECTS)
+	xgettext -d sjqg -o sjqg.pot -p locale \
+	 --from-code=UTF8 --sort-output \
+	 --copyright-holder='Jan Dittberner <jan@dittberner.info>' \
+	 --package-name='SJQG' --package-version='0.3' \
+	 --language=PHP $(OBJECTS)
+
+.SECONDARY:

README

@@ -0,0 +1,40 @@
+ScrollingJQuery gallery
+
+© 2007, 2008, 2009 Jan Dittberner <jan@dittberner.info>
+© 2008, 2009 Jeremias Arnstadt <douth024@googlemail.com>
+
+ScrollingJQuery gallery is a image gallery system based on the jQuery
+JavaScript library.
+
+Website
+-------
+
+The project gnuviech-server websitetools project website is located at
+<http://www.gnuviech-server.de/projects/websitetools>.
+
+License
+-------
+
+ScrollingJQueryGallery is free software: you can redistribute it
+and/or modify it under the terms of the GNU General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+ScrollingJQueryGallery is distributed in the hope that it will be
+useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with ScrollingJQueryGallery.  If not, see
+<http://www.gnu.org/licenses/>.
+
+Installation
+------------
+
+For installation and configuration instructions see INSTALL.
+
+Changes
+-------
+
+For latest changes see the ChangeLog file.

bilder/example/galleryinfo.ini

@@ -1,5 +1,6 @@
 [gallery]
 title = Beispielbilder
+weight = 2
 
 [images]
 cimg3033_Small.jpg = Kerze

bilder/example_two/galleryinfo.ini

@@ -0,0 +1,12 @@
+[gallery]
+title = Beispielbilder 2
+weight = 1
+
+[images]
+dsc_4511.jpg = Blume
+dsc_4797.jpg = Himmel
+dsc_4876.jpg = Blumen
+dsc_4923.jpg = Schwalbe
+dsc_3800.jpg = Katze
+dsc_4925.jpg = Landschaft
+dsc_2612.jpg = Kreuz

css/jquery.lightbox.css

@@ -1,220 +1,220 @@
-/*
+/*
- * jQuery Lightbox Plugin (balupton edition) - Lightboxes for jQuery
+ * jQuery Lightbox Plugin (balupton edition) - Lightboxes for jQuery
- * Copyright (C) 2008 Benjamin Arthur Lupton
+ * Copyright (C) 2008 Benjamin Arthur Lupton
- * http://jquery.com/plugins/project/jquerylightbox_bal
+ * http://jquery.com/plugins/project/jquerylightbox_bal
- *
+ *
- * This file is part of jQuery Lightbox (balupton edition).
+ * This file is part of jQuery Lightbox (balupton edition).
- * 
+ * 
- * jQuery Lightbox (balupton edition) is free software: you can redistribute it and/or modify
+ * jQuery Lightbox (balupton edition) is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
+ * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, either version 3 of the
+ * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
+ * License, or (at your option) any later version.
- * 
+ * 
- * jQuery Lightbox (balupton edition) is distributed in the hope that it will be useful,
+ * jQuery Lightbox (balupton edition) is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
+ * GNU Affero General Public License for more details.
- * 
+ * 
- * You should have received a copy of the GNU Affero General Public License
+ * You should have received a copy of the GNU Affero General Public License
- * along with jQuery Lightbox (balupton edition).  If not, see <http://www.gnu.org/licenses/>.
+ * along with jQuery Lightbox (balupton edition).  If not, see <http://www.gnu.org/licenses/>.
- *
+ *
- * @name jquery_lightbox: jquery.lightbox.css
+ * @name jquery_lightbox: jquery.lightbox.css
- * @package jQuery Lightbox Plugin (balupton edition)
+ * @package jQuery Lightbox Plugin (balupton edition)
- * @version 1.3.0-rc1
+ * @version 1.3.0-rc1
- * @date August 24, 2008
+ * @date August 24, 2008
- * @category jQuery plugin
+ * @category jQuery plugin
- * @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
+ * @author Benjamin "balupton" Lupton {@link http://www.balupton.com}
- * @copyright (c) 2008 Benjamin Arthur Lupton {@link http://www.balupton.com}
+ * @copyright (c) 2008 Benjamin Arthur Lupton {@link http://www.balupton.com}
- * @license GNU Affero General Public License - {@link http://www.gnu.org/licenses/agpl.html}
+ * @license GNU Affero General Public License - {@link http://www.gnu.org/licenses/agpl.html}
- * @example Visit {@link http://jquery.com/plugins/project/jquerylightbox_bal} for more information.
+ * @example Visit {@link http://jquery.com/plugins/project/jquerylightbox_bal} for more information.
- */
+ */
-
+
-html, body { margin: 0; padding: 0; height: 100%;}
+html, body { margin: 0; padding: 0; height: 100%;}
-
+
-#lightbox, #lightbox-overlay {
+#lightbox, #lightbox-overlay {
-	position: absolute;
+	position: absolute;
-	top: 0px;
+	top: 0px;
-	left: 0px;
+	left: 0px;
-	bottom:auto;
+	bottom:auto;
-	right:auto;
+	right:auto;
-	
+	
-	z-index:100;
+	z-index:100;
-	width:100%;
+	width:100%;
-	height:auto;
+	height:auto;
-	
+	
-	text-align:center;
+	text-align:center;
-	color:#333333;
+	color:#333333;
-	
+	
-	/* stop stupid conflicts */
+	/* stop stupid conflicts */
-	margin:0px;
+	margin:0px;
-	padding:0px;
+	padding:0px;
-	border:none;
+	border:none;
-	outline:none;
+	outline:none;
-	line-height:0;
+	line-height:0;
-	
+	
-	/* general conflict stopper */
+	/* general conflict stopper */
-	text-decoration:none;
+	text-decoration:none;
-	background:none;
+	background:none;
-	word-spacing:normal;
+	word-spacing:normal;
-	letter-spacing:normal;
+	letter-spacing:normal;
-	float:none;
+	float:none;
-	clear:none;
+	clear:none;
-	display:block;
+	display:block;
-}
+}
-
+
-#lightbox a, #lightbox a:link, #lightbox a:visited, #lightbox a:hover {
+#lightbox a, #lightbox a:link, #lightbox a:visited, #lightbox a:hover {
-	text-decoration:underline;
+	text-decoration:underline;
-	color:#999999;
+	color:#999999;
-}
+}
-
+
-#lightbox-overlay {
+#lightbox-overlay {
-	z-index: 90;
+	z-index: 90;
-	background-color:#000000;
+	background-color:#000000;
-	height: 100%;
+	height: 100%;
-	position:fixed;
+	position:fixed;
-}
+}
-#lightbox-overlay-text {
+#lightbox-overlay-text {
-	text-align: right;
+	text-align: right;
-	margin-right: 20px;
+	margin-right: 20px;
-	margin-top: 20px;
+	margin-top: 20px;
-	color: white;
+	color: white;
-	font-size: 12px;
+	font-size: 12px;
-	cursor: default;
+	cursor: default;
-	line-height:normal;
+	line-height:normal;
-}
+}
-#lightbox-overlay-text a, #lightbox-overlay-text a:hover, #lightbox-overlay-text a:visited, #lightbox-overlay-text a:link {
+#lightbox-overlay-text a, #lightbox-overlay-text a:hover, #lightbox-overlay-text a:visited, #lightbox-overlay-text a:link {
-	color:white;
+	color:white;
-}
+}
-#lightbox-overlay-text span {
+#lightbox-overlay-text span {
-	padding-left:5px;
+	padding-left:5px;
-	padding-right:5px;
+	padding-right:5px;
-}
+}
-
+
-#lightbox img, #lightbox a img, #lightbox a { border:none; outline:none; }
+#lightbox img, #lightbox a img, #lightbox a { border:none; outline:none; }
-
+
-#lightbox-imageBox {
+#lightbox-imageBox {
-	position:relative;
+	position:relative;
-	border:1px solid black;;
+	border:1px solid black;
-	background-color:white;
+	background-color:white;
-	width:400px;
+	width:400px;
-	height:400px;
+	height:400px;
-	margin:0 auto;
+	margin:0 auto;
-}
+}
-
+
-#lightbox-imageContainer {
+#lightbox-imageContainer {
-	padding:1px;
+	padding:1px;
-}
+}
-
+
-#lightbox-loading {
+#lightbox-loading {
-	position:absolute;
+	position:absolute;
-	top:40%;
+	top:40%;
-	left:0%;
+	left:0%;
-	height:25%;
+	height:25%;
-	width:100%;
+	width:100%;
-	text-align:center;
+	text-align:center;
-	line-height:0;
+	line-height:0;
-}
+}
-
+
-#lightbox-nav {
+#lightbox-nav {
-	position:absolute;
+	position:absolute;
-	top:0;
+	top:0;
-	left:0;
+	left:0;
-	height:100%;
+	height:100%;
-	width:100%;
+	width:100%;
-	z-index:10;
+	z-index:10;
-}
+}
-/* #lightbox-imageBox > #lightbox-nav { left: 0; } 
+/* #lightbox-imageBox > #lightbox-nav { left: 0; } 
-#lightbox-nav a { outline: none; }*/
+#lightbox-nav a { outline: none; }*/
-
+
-
+
-#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
+#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
-	display:block;
+	display:block;
-	width:49%;
+	width:49%;
-	height: 100%;
+	height: 100%;
-	background:transparent url("../images/blank.gif") no-repeat; /* Trick IE into showing hover */
+	background:transparent url("../images/blank.gif") no-repeat; /* Trick IE into showing hover */
-	/* cursor:pointer; */
+	/* cursor:pointer; */
-	zoom:1; /* who knows why? */
+	zoom:1; /* who knows why? */
-	
+	
-	padding:0px;
+	padding:0px;
-	margin:0px;
+	margin:0px;
-}
+}
-#lightbox-nav-btnPrev { 
+#lightbox-nav-btnPrev { 
-	left:0;
+	left:0;
-	right:auto;
+	right:auto;
-	float:left;
+	float:left;
-}
+}
-#lightbox-nav-btnNext { 
+#lightbox-nav-btnNext { 
-	left:auto;
+	left:auto;
-	right:0;
+	right:0;
-	float:right;
+	float:right;
-}
+}
-/*
+/*
-.preload_largeLink, #prevLink:hover, #prevLink:visited:hover {
+.preload_largeLink, #prevLink:hover, #prevLink:visited:hover {
-	background:url("../images/prev.gif") left 45% no-repeat;
+	background:url("../images/prev.gif") left 45% no-repeat;
-}
+}
-.preload_nextLink, #nextLink:hover, #nextLink:visited:hover {
+.preload_nextLink, #nextLink:hover, #nextLink:visited:hover {
-	background:url("../images/next.gif") right 45% no-repeat;
+	background:url("../images/next.gif") right 45% no-repeat;
-}
+}
-*/
+*/
-
+
-#lightbox-infoBox {
+#lightbox-infoBox {
-	font:10px Verdana, Helvetica, sans-serif;
+	font:10px Verdana, Helvetica, sans-serif;
-	background-color:#FFFFFF;
+	background-color:#FFFFFF;
-	margin:0 auto;
+	margin:0 auto;
-	padding:0px;
+	padding:0px;
-	
+	
-	/* width: 100%;
+	/* width: 100%;
-	padding: 0 10px 0; */
+	padding: 0 10px 0; */
-}
+}
-
+
-#lightbox-infoContainer {
+#lightbox-infoContainer {
-	padding-left:10px;
+	padding-left:10px;
-	padding-right:10px;
+	padding-right:10px;
-	padding-top:5px;
+	padding-top:5px;
-	padding-bottom:5px;
+	padding-bottom:5px;
-	color:#666;
+	color:#666;
-	
+	
-	line-height:normal;
+	line-height:normal;
-	/* height:30px; */
+	/* height:30px; */
-}
+}
-#lightbox-infoHeader {
+#lightbox-infoHeader {
-	width:100%;
+	width:100%;
-	text-align:center; 
+	text-align:center; 
-}
+}
-#lightbox-caption {
+#lightbox-caption {
-	text-align:justify;
+	text-align:justify;
-}
+}
-#lightbox-caption-title {
+#lightbox-caption-title {
-	font-weight:bold;
+	font-weight:bold;
-}
+}
-#lightbox-caption-description {
+#lightbox-caption-description {
-	font-weight:normal;
+	font-weight:normal;
-}
+}
-
+
-#lightbox-infoFooter {
+#lightbox-infoFooter {
-	margin-top:3px;
+	margin-top:3px;
-	color:#999999;
+	color:#999999;
-}
+}
-#lightbox-currentNumber {
+#lightbox-currentNumber {
-	display:block;
+	display:block;
-	width:49%;
+	width:49%;
-	float:left;
+	float:left;
-	text-align:left;
+	text-align:left;
-}
+}
-#lightbox-close {
+#lightbox-close {
-	display:block;
+	display:block;
-	width:45%;
+	width:45%;
-	float:right;
+	float:right;
-	text-align:right;
+	text-align:right;
-}
+}
-#lightbox-close-button{
+#lightbox-close-button{
-	padding-left:30%;
+	padding-left:30%;
-}
+}
-#lightbox-close-button:hover {
+#lightbox-close-button:hover {
-	color:#666666;
+	color:#666666;
-}
+}
-
+
-#lightbox-infoContainer-clear {
+#lightbox-infoContainer-clear {
-	clear:both; 
+	clear:both; 
-	visibility:hidden;
+	visibility:hidden;
 }

css/slider.css

@@ -1,87 +0,0 @@
-/*
- * Copyright (c) 2008 Jan Dittberner <jan@dittberner.info>
- * Jan Dittberner IT-Consulting & -Solutions
- * Cottbuser Str. 1, D-01129 Dresden
- *
- * Copyright (c) 2008 Jeremias Arnstadt <douth024@googlemail.com>
- *
- * Styles for scrolling layers  
- *
- * This file is part of the ScrollingJQueryGallery component of the
- * gnuviech-server.de Websitetools
- *
- * ScrollingJQueryGallery is free software: you can redistribute it
- * and/or modify it under the terms of the GNU General Public License as
- * published by the Free Software Foundation, either version 3 of the
- * License, or (at your option) any later version.
- *
- * ScrollingJQueryGallery is distributed in the hope that it will be
- * useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
- * General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with ScrollingJQueryGallery.  If not, see
- * <http://www.gnu.org/licenses/>.
- *
- * Version: $Id$
- */
-
-/* Specify width and height in hold and wn, and in clip for wn */
-div#hold	{ 
-   position:relative; 
-   overflow:hidden;
-   width:454px;
-   height:67px;
-   top:0px;
-   left:0px; 
-   z-index:100
-}
-div#wn	{ 
-   position:absolute; 
-   left:0px; 
-   top:0px; 
-   width:475px; 
-   height:67px; 
-   clip:rect(0px, 454px, 66px, 0px); 
-   overflow:hidden;	
-   z-index:1; 
-   padding:0px;
-}
-div#lyr1	{ 
-   position:absolute; 
-   visibility:hidden; 
-   left:0px; 
-   top:0px;
-   width:474px;
-   height:67px; 
-   z-index:1; 
-}
-
-/* Styles for demo, not necessary for scrolling layers */  
-body {
-   overflow:hidden;
-   text-align:left;
-   font: 12px verdana, arial, helvetica, sans-serif;
-   margin-top: 0px;
-   margin-left: 0px;
-   margin-right: 0px;
-   width: auto;
-   height: auto;
-}
-h1 { 
-   font-size:1.4em; 
-   margin:1.5em 0 2em 0; 
-}
-a:link { color:#33c }	
-a:visited { color:#339 }	
-a img { border:none }
-
-table.main { 
-   width:475px; margin:0px;
-   height:65px;
-   background-color:#eee; border:1px dashed #666 
-}
-td.arrows a { padding:0 1em }
-td.spacer { width:38px }
-td.footer { text-align:center; margin:0 }  

gallery.ini.tmpl

@@ -0,0 +1,7 @@
+logfile=gallery.log
+basepath=/
+defaulttheme=default_horizontal
+gallerydir=bilder
+gallerypath=/bilder
+themedir=themes
+themepath=/themes

includes/galleryfunctions.php

@@ -6,7 +6,7 @@
  * @author Jan Dittberner <jan@dittberner.info>
  * @version \$Id$
  *
- * Copyright (c) 2007, 2008 Jan Dittberner <jan@dittberner.info>
+ * Copyright (c) 2007, 2008, 2009 Jan Dittberner <jan@dittberner.info>
  * Jan Dittberner IT-Consulting & -Solutions,
  * Cottbuser Str. 1, D-01129 Dresden
  *
@@ -28,21 +28,36 @@
  * <http://www.gnu.org/licenses/>.
  */
 
-define(GALLERYPREFIX, "bilder");
-define(INFOFILE, "galleryinfo.ini");
 define(IMAGESEC, "images");
 define(GALLERYSEC, "gallery");
 define(GALLERY_RE, '/^[\w\d _-]+$/');
 
-/**
+define(SCALE_WIDTH, 0);
- * Breite der Vorschaubilder.
+define(SCALE_HEIGHT, 1);
- */
+define(SCALE_BOTH, 2);
-$previewwidth = 311;
 
-/**
+$basedir = realpath(implode(DIRECTORY_SEPARATOR, array(dirname(__file__), '..')));
- * Höhe der Thumbnailbilder.
+$inifile = implode(DIRECTORY_SEPARATOR, array($basedir, 'gallery.ini'));
- */
+
-$thumbheight = 67;
+if (!file_exists($inifile)) {
+  die(sprintf(_("required %s not found."), $inifile));
+}
+$configuration = parse_ini_file($inifile);
+if (array_key_exists('logfile', $configuration)) {
+  error_reporting(E_ALL);
+  ini_set('display_errors', 0);
+  ini_set('log_errors', 1);
+  ini_set('error_log', $configuration['logfile']);
+}
+
+require_once('theme.class.php');
+
+if (array_key_exists('theme', $_GET) &&
+    preg_match('/^[a-zA-Z0-9_-]+$/', $_GET['theme'])) {
+  $theme = new Theme($_GET['theme'], $configuration);
+} else {
+  $theme = new Theme($configuration['defaulttheme'], $configuration);
+}
 
 /**
  * Prüft, ob eine Galerie mit dem übergebenen Namen existiert.
@@ -53,8 +68,10 @@ $thumbheight = 67;
  * Verzeichnisnamen hat, sonst @c false
  */
 function galleryExists($galleryname) {
+  global $configuration;
+
   return preg_match(GALLERY_RE, $galleryname) &&
-    realpath(GALLERYPREFIX . DIRECTORY_SEPARATOR . $galleryname);
+    realpath($configuration['gallerydir'] . DIRECTORY_SEPARATOR . $galleryname);
 }
 
 /**
@@ -71,11 +88,15 @@ function galleryExists($galleryname) {
  * wenn keine Konfigurationsdatei vorhanden ist
  */
 function getGalleryConfig($galleryname = null) {
+  global $configuration;
+
   if ($galleryname) {
-    $filepath = realpath(GALLERYPREFIX . DIRECTORY_SEPARATOR .
+    $filepath = realpath(implode(DIRECTORY_SEPARATOR,
-                         $galleryname . DIRECTORY_SEPARATOR . INFOFILE);
+      array($configuration['gallerydir'], $galleryname,
+            'galleryinfo.ini')));
   } else {
-    $filepath = realpath(GALLERYPREFIX . DIRECTORY_SEPARATOR . INFOFILE);
+    $filepath = realpath(implode(DIRECTORY_SEPARATOR,
+      array($configuration['gallerydir'], 'galleryinfo.ini')));
   }
   if (is_file($filepath)) {
     return parse_ini_file($filepath, true);
@@ -97,15 +118,20 @@ function getGalleryConfig($galleryname = null) {
  * @li @a full relative URL des Vollbildes
  */
 function getImageInfo($galleryname, $imagename) {
+  global $theme, $configuration;
+
   $label = getImageLabel($galleryname, $imagename);
   $gallerylabel = getGalleryLabel($galleryname);
+  $scaledimage = getScaledImage($galleryname, $imagename,
+                                $theme->previewsize, SCALE_BOTH);
+  $scaledsize = getimagesize($configuration['gallerydir'] .
+                             DIRECTORY_SEPARATOR . $scaledimage);  
   return array("name" => $imagename,
                "label" => $label,
-               "preview" => GALLERYPREFIX . DIRECTORY_SEPARATOR .
+               "preview" => array($configuration['gallerypath'] . '/' .
-               getScaledImage($galleryname, $imagename,
+                                  $scaledimage, $scaledsize[0], $scaledsize[1]),
-                              $GLOBALS["previewwidth"], false),
+               "full" => implode('/', array($configuration['gallerypath'],
-               "full" => GALLERYPREFIX . DIRECTORY_SEPARATOR . $galleryname .
+                                            $galleryname, $imagename)),
-               DIRECTORY_SEPARATOR . $imagename,
                "title" => sprintf("%s :: %s", $gallerylabel, $label)
                );
 }
@@ -123,7 +149,9 @@ function getImageInfo($galleryname, $imagename) {
  * @return Label zu dem Bild
  */
 function getImageLabel($galleryname, $imagename) {
-  $gallerypath = realpath(GALLERYPREFIX . DIRECTORY_SEPARATOR . $galleryname);
+  global $configuration;
+
+  $gallerypath = realpath($configuration['gallerydir'] . DIRECTORY_SEPARATOR . $galleryname);
   if (empty($gallerypath) || !is_dir($gallerypath)) {
     return false;
   }
@@ -159,34 +187,51 @@ function getGalleryLabel($galleryname) {
   return $label;
 }
 
+function cmpGalleryByWeight($a, $b) {
+  if (($a[0] == $b[0]) && (strcmp($a[1], $b[1]) == 0)) {
+    return 0;
+  }
+  if ($a[0] == $b[0]) {
+    return strcmp($a[1], $b[1]);
+  }
+  return ($a[0] < $b[0]) ? -1 : 1;
+}
+
+function getOrderedGalleries() {
+  global $configuration;
+  $galleries = array();
+
+  foreach (glob(realpath($configuration['gallerydir']) . DIRECTORY_SEPARATOR . '*', GLOB_ONLYDIR) as $directory) {
+    $basename = basename($directory);
+    if (galleryExists($basename)) {
+      $inidata = getGalleryConfig($basename);
+      $weight = (array_key_exists('weight', $inidata[GALLERYSEC])) ?
+        intval($inidata[GALLERYSEC]['weight']) : 0;
+      $galleries[] = array($weight, $basename);
+    }
+  }
+  usort($galleries, 'cmpGalleryByWeight');
+  return $galleries;
+}
+
 /**
  * Liefert die aktuelle Galerie. Die Galerie kann entweder im
  * GET-Parameter @c galleryname stehen, als Wert @a default in der
  * Sektion @a gallery der zentralen @c galleryinfo.ini angegeben
- * werden oder es wird das erste Unterverzeichnis von @c GALLERYPREFIX
+ * werden oder es wird das erste Unterverzeichnis von @c gallerydir
  * verwendet.
  *
  * @return Galeriename
  */
 function getCurrentGallery() {
-  if (galleryExists($_GET["galleryname"])) {
+  global $configuration;
+
+  if (array_key_exists('galleryname', $_GET) &&
+      galleryExists($_GET["galleryname"])) {
     return $_GET["galleryname"];
   }
-  $filepath = realpath(GALLERYPREFIX . DIRECTORY_SEPARATOR . INFOFILE);
+  $galleries = getOrderedGalleries();
-  if (!empty($filepath)) {
+  return (count($galleries) > 0) ? $galleries[0][1] : null;
-    $inidata = getGalleryConfig();
-    if (galleryExists($inidata[GALLERYSEC]["default"])) {
-      return $inidata[GALLERYSEC]["default"];
-    }
-  }
-  foreach (glob(realpath(GALLERYPREFIX) . DIRECTORY_SEPARATOR . '*',
-                GLOB_ONLYDIR) as $directory) {
-    $basename = basename($directory);
-    if (galleryExists($basename)) {
-      return $basename;
-    }
-  }
-  return null;
 }
 
 /**
@@ -204,33 +249,54 @@ function getCurrentGallery() {
  * Maximalwert beachtet werden soll, wenn dieser Parameter @c true
  * ist, wird die Höhe auf @a $maxdim skaliert, ansonsten die Breite
  *
- * @return Pfad des skalierten Bildes relativ zu @a GALLERYPREFIX
+ * @return Pfad des skalierten Bildes relativ zu @a gallerydir
  */
-function getScaledImage($galleryname, $basename, $maxdim, $scaleheight=true) {
+function getScaledImage($galleryname, $basename, $maxdim, $scaletype) {
+  global $configuration;
+
   if ($maxdim == 0) {
     debug_print_backtrace();
   }
-  $gallerydir = realpath(GALLERYPREFIX . DIRECTORY_SEPARATOR . $galleryname);
+  $gallerydir = realpath($configuration['gallerydir'] . DIRECTORY_SEPARATOR . $galleryname);
-  if ($scaleheight) {
+  $originalfile = $gallerydir . DIRECTORY_SEPARATOR . $basename;
-    $scaleddir = sprintf("%s%sscaled_x%d", $galleryname,
+  switch($scaletype) {
-                         DIRECTORY_SEPARATOR, $maxdim);
+  case SCALE_WIDTH:
-  } else {
+    $scaleheight = false;
-    $scaleddir = sprintf("%s%sscaled%dx_", $galleryname,
+    break;
-                         DIRECTORY_SEPARATOR, $maxdim);
+  case SCALE_HEIGHT:
+    $scaleheight = true;
+    break;
+  case SCALE_BOTH:
+    $originalsize = getimagesize($originalfile);
+    $scaleheight = ($originalsize[1] > $originalsize[0]);
+    break;
+  default:
+    header('Content-Type: text/plain');
+    debug_print_backtrace();
+    die(_('Unknown scale type'));
   }
-  $scaleddirpath = GALLERYPREFIX . DIRECTORY_SEPARATOR . $scaleddir;
+  
+  if ($scaleheight) {
+    $scaleddir = sprintf("scaled_x%d", $maxdim);
+  } else {
+    $scaleddir = sprintf("scaled%dx_", $maxdim);
+  }
+  $scaleddirpath = implode(DIRECTORY_SEPARATOR,
+    array($configuration['gallerydir'], $galleryname, $scaleddir));
   if (!is_dir($scaleddirpath)) {
     // versuchen das Thumbnail-Verzeichnis anzulegen
     $mkdir = @mkdir($scaleddirpath, 0755);
     if (!$mkdir) {
-      return $galleryname . DIRECTORY_SEPARATOR . $basename;
+      trigger_error(sprintf(_("could not create directory %s.\n"),
+                            $scaleddirpath),
+                    E_USER_WARNING);
+      return $galleryname . '/' . $basename;
     }
   }
   
   $scaledimage = $scaleddirpath . DIRECTORY_SEPARATOR . $basename;
   if (!is_file($scaledimage)) {
     // Datei erzeugen
-    $originalfile = $gallerydir . DIRECTORY_SEPARATOR . $basename;
     $origimage = imagecreatefromjpeg($originalfile);
     $origx = imagesx($origimage);
     $origy = imagesy($origimage);
@@ -248,7 +314,7 @@ function getScaledImage($galleryname, $basename, $maxdim, $scaleheight=true) {
                        $origx, $origy);
     imagejpeg($newimage, $scaledimage, 90);
   }
-  return $scaleddir . DIRECTORY_SEPARATOR . $basename;
+  return implode('/', array($galleryname, $scaleddir, $basename));
 }
 
 /**
@@ -263,22 +329,29 @@ function getScaledImage($galleryname, $basename, $maxdim, $scaleheight=true) {
  * und dem Ergebnis von getimagesize() als Werten ist.
  */
 function getThumbNailInfo($galleryname) {
+  global $theme, $configuration;
+
   $thumbsizes = array();
-  $thumbwidthsum = 2;
+  $thumbdimsum = 2;
-  foreach (glob(realpath(GALLERYPREFIX . DIRECTORY_SEPARATOR .
+  $scaletype = ($theme->themetype == 'horizontal') ? SCALE_HEIGHT : SCALE_WIDTH;
+  foreach (glob(realpath($configuration['gallerydir'] . DIRECTORY_SEPARATOR .
                          $galleryname) . DIRECTORY_SEPARATOR .
                 '*.jp{e,}g', GLOB_BRACE) as $filename) {
     $basename = basename($filename);
-    $thumbfile = getScaledImage($galleryname, $basename,
+    $thumbfile = getScaledImage($galleryname, $basename, $theme->thumbsize,
-                                $GLOBALS["thumbheight"]);
+                                $scaletype);
-    if ($thumbsize = getimagesize(realpath(GALLERYPREFIX .
+    if ($thumbsize = getimagesize(realpath($configuration['gallerydir'] .
                                            DIRECTORY_SEPARATOR .
                                            $thumbfile))) {
       $thumbsizes[$basename] = array($thumbfile, $thumbsize);
-      $thumbwidthsum = $thumbwidthsum + $thumbsize[0] + 3;
+      if ($theme->themetype == 'horizontal') {
+        $thumbdimsum = $thumbdimsum + $thumbsize[0] + 3;
+      } else {
+        $thumbdimsum = $thumbdimsum + $thumbsize[1] + 3;
+      }
     }
   }
-  return array($thumbwidthsum, $galleryname, $thumbsizes);
+  return array($thumbdimsum, $galleryname, $thumbsizes);
 }
 
 /**
@@ -294,16 +367,25 @@ function getThumbNailInfo($galleryname) {
  * @see getGalleryConfig()
  */
 function getGalleryLinks() {
+  global $configuration;
+
   $retval = array();
-  foreach (glob(realpath(GALLERYPREFIX) . DIRECTORY_SEPARATOR . '*',
+  $galleries = getOrderedGalleries();
-                GLOB_ONLYDIR) as $directory) {
+  foreach ($galleries as $gallery) {
-    $basename = basename($directory);
+    $urlparams = array();
-    if (galleryExists($basename)) {
+    $urlparams['galleryname'] = $gallery[1];
-      $url = sprintf('index.php?galleryname=%s', urlencode($basename));
+    if (array_key_exists('theme', $_GET)) {
-      $retval[] = array('gallery' => $basename,
+      $urlparams['theme'] = $_GET['theme'];
-                        'label' => getGalleryLabel($basename),
-                        'url' => $url);
     }
+    $parts = array();
+    foreach ($urlparams as $key => $value) {
+      $parts[] = sprintf("%s=%s", $key, urlencode($value));
+    }
+    $url = sprintf('index.php?%s',
+                   implode(ini_get('arg_separator.output'), $parts));
+    $retval[] = array('gallery' => $gallery[1],
+                      'label' => getGalleryLabel($gallery[1]),
+                      'url' => htmlspecialchars($url));
   }
   return $retval;
 }
@@ -323,9 +405,11 @@ function getGalleryLinks() {
  * @see getThumbNailInfo()
  */
 function getAllThumbnails(&$thumbinfo) {
+  global $configuration;
+
   $retval = array();
   foreach ($thumbinfo[2] as $basename => $data) {
-    $retval[] = array('src' => GALLERYPREFIX . DIRECTORY_SEPARATOR . $data[0],
+    $retval[] = array('src' => $configuration['gallerypath'] . '/' . $data[0],
                       'sizes' => $data[1][3],
                       'alt' => getImageLabel($thumbinfo[1], $basename));
   }
@@ -347,21 +431,22 @@ function getAllThumbnails(&$thumbinfo) {
  * @see getThumbNailInfo()
  */
 function getFirstPreview(&$thumbinfo) {
+  global $theme, $configuration;
+
   reset($thumbinfo[2]);
   $basename = key($thumbinfo[2]);
   $data = current($thumbinfo[2]);
   $galleryname = $thumbinfo[1];
-  $fullname = GALLERYPREFIX . DIRECTORY_SEPARATOR . $galleryname .
+  $fullname = $configuration['gallerypath'] . '/' . $galleryname . '/' . $basename;
-    DIRECTORY_SEPARATOR . $basename;
   $scaledimage = getScaledImage($galleryname, $basename,
-                                $GLOBALS["previewwidth"], false);
+                                $theme->previewsize, SCALE_BOTH);
-  $scaledimagesize = getimagesize(realpath(GALLERYPREFIX .
+  $scaledimagesize = getimagesize(realpath($configuration['gallerydir'] .
                                            DIRECTORY_SEPARATOR .
                                            $scaledimage));
   $label = getImageLabel($galleryname, $basename);
   return array('title' => $label,
                'full'  => $fullname,
-               'src'   => GALLERYPREFIX . DIRECTORY_SEPARATOR . $scaledimage,
+               'src'   => $configuration['gallerypath'] . '/' . $scaledimage,
                'alt'   => $label,
                'sizes' => $scaledimagesize[3]);
 }

includes/template.class.php

@@ -0,0 +1,63 @@
+<?php
+/**
+ * @file simple template system for ScrollingJQueryGallery
+ *
+ * @author Jan Dittberner <jan@dittberner.info>
+ *
+ * @version $Id$
+ *
+ * Copyright (c) 2009 Jan Dittberner
+ * Jan Dittberner IT-Consulting & -Solutions
+ * Cottbuser Str. 1, D-01129 Dresden
+ *
+ * This file is part of the ScrollingJQueryGallery component of the
+ * gnuviech-server.de Websitetools
+ *
+ * ScrollingJQueryGallery is free software: you can redistribute it
+ * and/or modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * ScrollingJQueryGallery is distributed in the hope that it will be
+ * useful, but WITHOUT ANY WARRANTY; without even the implied warranty
+ * of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with ScrollingJQueryGallery.  If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+/**
+ * This class provides a simple template mechanism. It was inspired by
+ * http://mylittlehomepage.net/ueber-den-sinn-von-php-template-engines
+ * (german).
+ */
+class Template {
+  /**
+   * associative array containing the template content.
+   * @var array
+   */
+  var $content;
+
+  /**
+   * Assign a value to the template.
+   * @param string $name variable name
+   * @param mixed $value variable value
+   */
+  function assign($name, $value) {
+    $this->content[$name] = $value;
+  }
+
+  /**
+   * Display the given template file.
+   * @param string $template template file name
+   */
+  function display($template) {
+    if($this->content) {
+      $content = $this->content;
+    }
+    include($template);
+  }
+}
+?>

includes/theme.class.php

@@ -0,0 +1,96 @@
+<?php
+/**
+ * @file defines a theme class for ScrollingJQueryGallery
+ *
+ * @author Jan Dittberner <jan@dittberner.info>
+ *
+ * @version $Id$
+ *
+ * Copyright (c) 2009 Jan Dittberner
+ * Jan Dittberner IT-Consulting & -Solutions
+ * Cottbuser Str. 1, D-01129 Dresden
+ *
+ * This file is part of the ScrollingJQueryGallery component of the
+ * gnuviech-server.de Websitetools
+ *
+ * ScrollingJQueryGallery is free software: you can redistribute it
+ * and/or modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation, either version 3 of
+ * the License, or (at your option) any later version.
+ *
+ * ScrollingJQueryGallery is distributed in the hope that it will be
+ * useful, but WITHOUT ANY WARRANTY; without even the implied warranty
+ * of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with ScrollingJQueryGallery.  If not, see
+ * <http://www.gnu.org/licenses/>.
+ */
+
+$dir = dirname(realpath(__file__));
+require("$dir" . DIRECTORY_SEPARATOR . "template.class.php");
+
+/**
+ * Theme class.
+ */
+class Theme {
+  /**
+   * Theme type 'horizontal' or 'vertical'
+   * @var string
+   */
+  var $themetype;
+
+  /**
+   * Size of preview images. Used for calculating preview image sizes.
+   * @var int
+   */
+  var $previewsize;
+
+  /**
+   * Size of thumbnail images. Depending on the theme type this is
+   * used for calculating the width (vertical themes) or height
+   * (horizontal themes) of the thumbnal images.
+   * @var int
+   */
+  var $thumbsize;
+
+  var $name;
+  var $template;
+  var $config;
+
+  /**
+   * Constructor for themes. Expects a theme name and initializes the
+   * internal state of the instance from the 'theme.ini' file in the
+   * named theme's directory.
+   * @param string $name the directory name of the theme
+   */
+  function __construct($name, &$configuration) {
+    $themeini = realpath(implode(DIRECTORY_SEPARATOR,
+      array($configuration['themedir'], $name, 'theme.ini')));
+    if (!$themeini) {
+      die("invalid theme $name");
+    }
+    $themeconfig = parse_ini_file($themeini);
+    $this->name = $name;
+    $this->themetype = $themeconfig['themetype'];
+    $this->previewsize = intval($themeconfig['previewsize']);
+    $this->thumbsize = intval($themeconfig['thumbsize']);
+    $this->config = $configuration;
+  }
+
+  function getTemplate() {
+    if (!$this->template) {
+      $this->template = new Template();
+      $this->template->assign('themepath',
+        implode(DIRECTORY_SEPARATOR, array($this->config['themepath'], $this->name)));
+    }
+    return $this->template;
+  }
+
+  function display() {
+    $this->template->display(implode(DIRECTORY_SEPARATOR,
+      array($this->config['themedir'], $this->name, 'theme.php')));
+  }
+}
+?>

index.php

@@ -1,41 +1,43 @@
 <?php
-  /**
+/**
-   * @file
+ * @file Startseite für ScrollingJQueryGallery. Diese Datei erledigt
-   * Startseite für ScrollingJQueryGallery. Diese Datei erledigt die
+ * die Ausgabe im Browser.
-   * Ausgabe im Browser.
+ *
-   *
+ * @author Jan Dittberner <jan@dittberner.info>, Jeremias Arnstadt
-   * @author Jan Dittberner <jan@dittberner.info>, Jeremias Arnstadt
+ * <douth024@googlemail.com>
-   * <douth024@googlemail.com>
+ *
-   * @version \$Id$
+ * @version $Id$
-   *
+ *
-   * Copyright (c) 2008 Jan Dittberner
+ * Copyright (c) 2008, 2009 Jan Dittberner
-   * Jan Dittberner IT-Consulting & -Solutions
+ * Jan Dittberner IT-Consulting & -Solutions
-   * Cottbuser Str. 1, D-01129 Dresden
+ * Cottbuser Str. 1, D-01129 Dresden
-   *
+ *
-   * Copyright (c) 2008 Jeremias Arnstadt
+ * Copyright (c) 2008 Jeremias Arnstadt
-   *
+ *
-   * This file is part of the ScrollingJQueryGallery component of the
+ * This file is part of the ScrollingJQueryGallery component of the
-   * gnuviech-server.de Websitetools
+ * gnuviech-server.de Websitetools
-   *
+ *
-   * ScrollingJQueryGallery is free software: you can redistribute it
+ * ScrollingJQueryGallery is free software: you can redistribute it
-   * and/or modify it under the terms of the GNU General Public
+ * and/or modify it under the terms of the GNU General Public License
-   * License as published by the Free Software Foundation, either
+ * as published by the Free Software Foundation, either version 3 of
-   * version 3 of the License, or (at your option) any later version.
+ * the License, or (at your option) any later version.
-   *
+ *
-   * ScrollingJQueryGallery is distributed in the hope that it will be
+ * ScrollingJQueryGallery is distributed in the hope that it will be
-   * useful, but WITHOUT ANY WARRANTY; without even the implied
+ * useful, but WITHOUT ANY WARRANTY; without even the implied warranty
-   * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-   * See the GNU General Public License for more details.
+ * GNU General Public License for more details.
-   *
+ *
-   * You should have received a copy of the GNU General Public License
+ * You should have received a copy of the GNU General Public License
-   * along with ScrollingJQueryGallery.  If not, see
+ * along with ScrollingJQueryGallery.  If not, see
-   * <http://www.gnu.org/licenses/>.
+ * <http://www.gnu.org/licenses/>.
-   */
+ */
 
-  /**
+$basedir = realpath(dirname(__file__));
-   * Inkludiert die Funktionsbibliothek.
+
-   */
+/**
-require 'includes/galleryfunctions.php';
+ * Inkludiert die Funktionsbibliothek.
+ */
+require($basedir . '/includes/galleryfunctions.php');
 
 /**
  * Name der aktuellen Galerie.
@@ -47,90 +49,35 @@ $gallery   = getCurrentGallery();
  */
 $thumbinfo = getThumbNailInfo($gallery);
 
-?>
+$scripts = array($configuration['basepath'] . 'js/jquery.js',
-<!DOCTYPE HTML PUBLIC
+                 $configuration['basepath'] . 'js/jquery.colorBlend.js',
- "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd">
+                 $configuration['basepath'] . 'js/jquery.lightbox.js',
-<head>
+                 $configuration['basepath'] . 'scripts/ourhandlers.js');
-<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+$styles  = array();
-<title><?php print getGalleryTitle($thumbinfo); ?></title>
+
-<link rel="stylesheet" type="text/css" href="css/main.css" />
+$template = $theme->getTemplate();
-<link rel="stylesheet" href="css/format.css" type="text/css" />
+
-<link rel="stylesheet" href="css/jquery.lightbox.css" type="text/css" />
+if ($theme->themetype == 'horizontal') {
-<script src="scripts/jquery.js" type="text/javascript" ></script>
+  $inlinestyles = sprintf("#scrollable { width:%dpx; }\n", $thumbinfo[0]);
-<script src="js/jQuery.colorBlend.pack.js" type="text/javascript"></script>
+  $inlinescript = array("var themetype='horizontal';");
-<script src="js/jquery.lightbox.packed.js" type="text/javascript" ></script>
+} else {
-<script src="scripts/ourhandlers.js" type="text/javascript" ></script>
+  $inlinestyles = sprintf("#scrollable { height:%dpx; }\n", $thumbinfo[0]);
-<style type="text/css">
+  $inlinescript = array("var themetype='vertical';");
-<?php
-  printf("#scrollable { width:%dpx; }", $thumbinfo[0]);
-?>
- a {
-	font-size: 9px;
 }
-a:link {
+$inlinescript[] = "var basepath='" . $configuration['basepath'] . "';";
-	text-decoration: none;
+
-}
+$template->assign('scripts', $scripts);
-a:visited {
+$template->assign('styles', $styles);
-	text-decoration: none;
+$template->assign('inlinestyle', $inlinestyles);
-}
+$template->assign('inlinescript', implode("\n", $inlinescript));
-a:hover {
+$template->assign('title', getGalleryTitle($thumbinfo));
-	text-decoration: none;
+$template->assign('gallerylinks', getGalleryLinks());
-}
+$template->assign('thumbnails', getAllThumbnails($thumbinfo));
-a:active {
+$template->assign('firstpreview', getFirstPreview($thumbinfo));
-	text-decoration: none;
+$template->assign('firstdescription', getFirstDescription($thumbinfo));
-}
+$template->assign('lang', 'de');
-</style>
+$template->assign('gallery', $gallery);
-</head>
+
-<body>
+$theme->display();
-<!-- container -->
+
-<div id="container">
+?>
-  <div id="content">
-   <div id="menu"><?php
- foreach (getGalleryLinks() as $data) {
-   if ($data['gallery'] == $gallery) {
-     $active = ' class="active"';
-   }
-   printf('<a href="%s"%s>%s</a>', $data['url'], $active, $data['label']);
- } ?></div>
-   <div id="content_container">
-     <div id="slider">
-       <div id="arrleft"><img src="css/grafiken/aro-lft.png" alt="nach links"
-        width="10" height="65" /></div>
-       <div id="imgscroller"><div id="scrollable"><?php
-         // zeigt die eingelesenen Thumnails an
-         foreach (getAllThumbnails($thumbinfo) as $thumbdata) {
-           printf('<div class="thumbnail"><img src="%s" alt="%s" %s /></div>',
-                  $thumbdata['src'], $thumbdata['alt'], $thumbdata['sizes']);
-         }
-       ?></div></div>
-       <div id="arrright"><img src="css/grafiken/aro-rt.png" alt="nach rechts"
-        width="10" height="65" /></div>
-     </div>
-   </div>
-   <div id="content_sub">
-      <div id="content_main">
-        <div class="bildposition"><?php
-          // bindet die Bilder in den Hauptbereich ein
-          $data = getFirstPreview($thumbinfo);
-          printf('<a  class="lightbox" title="%s" href="%s" rel="lightbox">' .
-                 '<img id="contentimg" src="%s" alt="%s" %s /></a>',
-                 $data['title'], $data['full'], $data['src'], $data['alt'],
-                 $data['sizes']);
-        ?></div>
-      </div>
-      <div id="content_nav">
-        <img id="backbtn" src="css/grafiken/back.png" alt="back" class="back"
-         width="10" height="10" top="0"><img id="fwdbtn"
-         src="css/grafiken/next.png" alt="next" class="next" width="10"
-         height="10" top="0">
-      </div>
-      <div class="imgdescription" id="imagedescription"><?php
-        // liest die Bildbeschreibung für das jeweilige Bild (wenn definiert)
-        print getFirstDescription($thumbinfo);
-      ?></div>
-    </div>
-  </div> 
-</div>            
-<!-- /container -->
-</body>
-</html>

js/jquery.color.js

@@ -0,0 +1,128 @@
+/*
+ * jQuery Color Animations
+ * Copyright 2007 John Resig
+ * Released under the MIT and GPL licenses.
+ */
+
+(function(jQuery){
+
+    // We override the animation for all of these color styles
+    jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){
+        jQuery.fx.step[attr] = function(fx){
+            if ( fx.state == 0 ) {
+                fx.start = getColor( fx.elem, attr );
+                fx.end = getRGB( fx.end );
+            }
+
+            fx.elem.style[attr] = "rgb(" + [
+                Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
+                Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
+                Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
+            ].join(",") + ")";
+        }
+    });
+
+    // Color Conversion functions from highlightFade
+    // By Blair Mitchelmore
+    // http://jquery.offput.ca/highlightFade/
+
+    // Parse strings looking for color tuples [255,255,255]
+    function getRGB(color) {
+        var result;
+
+        // Check if we're already dealing with an array of colors
+        if ( color && color.constructor == Array && color.length == 3 )
+            return color;
+
+        // Look for rgb(num,num,num)
+        if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
+            return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
+
+        // Look for rgb(num%,num%,num%)
+        if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
+            return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
+
+        // Look for #a0b1c2
+        if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
+            return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
+
+        // Look for #fff
+        if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
+            return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
+
+        // Look for rgba(0, 0, 0, 0) == transparent in Safari 3
+        if (result = /rgba\(0, 0, 0, 0\)/.exec(color))
+            return colors['transparent'];
+
+        // Otherwise, we're most likely dealing with a named color
+        return colors[jQuery.trim(color).toLowerCase()];
+    }
+
+    function getColor(elem, attr) {
+        var color;
+
+        do {
+            color = jQuery.curCSS(elem, attr);
+
+            // Keep going until we find an element that has color, or we hit the body
+            if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )
+                break;
+
+            attr = "backgroundColor";
+        } while ( elem = elem.parentNode );
+
+        return getRGB(color);
+    };
+
+    // Some named colors to work with
+    // From Interface by Stefan Petre
+    // http://interface.eyecon.ro/
+
+    var colors = {
+        aqua:[0,255,255],
+        azure:[240,255,255],
+        beige:[245,245,220],
+        black:[0,0,0],
+        blue:[0,0,255],
+        brown:[165,42,42],
+        cyan:[0,255,255],
+        darkblue:[0,0,139],
+        darkcyan:[0,139,139],
+        darkgrey:[169,169,169],
+        darkgreen:[0,100,0],
+        darkkhaki:[189,183,107],
+        darkmagenta:[139,0,139],
+        darkolivegreen:[85,107,47],
+        darkorange:[255,140,0],
+        darkorchid:[153,50,204],
+        darkred:[139,0,0],
+        darksalmon:[233,150,122],
+        darkviolet:[148,0,211],
+        fuchsia:[255,0,255],
+        gold:[255,215,0],
+        green:[0,128,0],
+        indigo:[75,0,130],
+        khaki:[240,230,140],
+        lightblue:[173,216,230],
+        lightcyan:[224,255,255],
+        lightgreen:[144,238,144],
+        lightgrey:[211,211,211],
+        lightpink:[255,182,193],
+        lightyellow:[255,255,224],
+        lime:[0,255,0],
+        magenta:[255,0,255],
+        maroon:[128,0,0],
+        navy:[0,0,128],
+        olive:[128,128,0],
+        orange:[255,165,0],
+        pink:[255,192,203],
+        purple:[128,0,128],
+        violet:[128,0,128],
+        red:[255,0,0],
+        silver:[192,192,192],
+        white:[255,255,255],
+        yellow:[255,255,0],
+        transparent: [255,255,255]
+    };
+
+})(jQuery);

js/jquery.colorBlend.js

@@ -0,0 +1,566 @@
+/**
+ * jQuery Plugin colorBlend v1.6.0
+ * Requires jQuery 1.2.6+ (Not tested with earlier versions).
+ * Based on the Fade plugin http://plugins.jquery.com/project/fade
+ * Code losely based on the Cycle plugin http://plugins.jquery.com/project/cycle It was a great resource in creating this one) 
+ * Copyright (c) 2007-2008 Aaron E. [jquery at happinessinmycheeks dot com] 
+ * 
+ *	@param: Object Array. Arguments need to be in object notation.
+ *	Returns: jQuery.
+ *	Options:	
+ *		param:		What css color option you wish to fade. 
+ *					Such as "background-color", "color", "boarder-color", "scrollbar-face-color" etc.
+ *					(default: "background-color).
+ *		fps:		Frames per second (default: 30).
+ *		cycles:		How many times you want the object to fade. 0 = Infinite. (default: 0).
+ *		random:		Will transition from a random color to a random color. (default: false).
+ *					Note: Will change isFade to false.
+ *		isFade:		Will fade from the original color and back to the original color. (default: true).
+ *					Note: Cannont set to true if random is set to true.
+ *		fromColor:	*DEPRECIATED* Starting color. accepts RGB, Hex, Name values.
+ *					Will be overwritten if random is set to true. Also accepts "random" as an option.
+ *		toColor:	*DEPRECIATED* Ending color. Same as above.
+ *		colorList:	Now accepts an array of color strings! colorList can accept 3 or 6 digit hex colors (#000000, #000) it can also accept rgb and color names. 
+ *		alpha:		Opacity of element! accepts numerical array and old comma seperated string. (Default: [100, 100]). 
+ *		isQueue:	Will queue up color aniimations for a paramater. 
+ *	Examples: 
+ *		$("body").colorBlend([{fromColor:"black", toColor:"white", param:"color"}]);
+ *		var myColors = [
+ *			{param:'color', colorList["white", "black"]},
+ *			{param:'background-color', random: true, alpha:[20,75]},
+ *			{param:'border-left-color', colorList: ["random", "black"]},
+ *			{param:'border-right-color', fromColor:"white", "black"]},
+ *			{param:'border-top-color', colorList: ["white", "black", "pink"]},
+ *			{param:'border-bottom-color', colorList: ["white", "tomato", "lime"]}
+ *		];
+ *		$("tr").colorBlend(myColors);
+ *
+ *	Known issues: 
+ *			* If used on a lot of objects it can cause major browser slowdown and it will eat a lot of cpu. 
+ *			* Still one flickering bug when it comes to opacity. Trying to track it down. 
+ *
+ *	Additions:
+ *		1.0.2
+ *			* Added "parent" as a valid color value. Will check parents until valid color is found. 
+ *				defaults to white if there are no parents with color.
+ *		1.0.3
+ *			* Added Alpha/Opacity blending! Add alpha:"0,100" to list of parameters. 
+ *				Note: Will change the opacity of element only, not the property!
+ *				If you only want text to appear and dissapear, you'll have to put it in it's own element, otherise the whole
+ *				element will fade, not just your text.
+ *		1.0.4
+ *			* Alpha will now take just one argument alpha:"30" if you want to just change the alpha and not have it animate. 
+ *			* Current is now the default fromColor value. The current value will get the current color of the element. If current is transparent, it will get the parent color.
+ *			* Opposite is now the default toColor value.
+ *
+ *		1.3.0
+ *			* Added Queueing ability, so an animation will take arguments and process them once they are available. 
+ *			* Added Action parameter available arguments are stop, pause, and resume. Resume continues a paused animation. Where stop lets you assign a whole new animation to the element.
+ *			* Added isQueue as an option allows you to decide if you want an option to be queued or not
+ *
+ *		1.4.0
+ *			* Added pause all, stop all, resume all.
+ *			* Have objects stored in an non-named array for traversing.
+ *		1.6.0
+ *			* Changed some internals for smaller quicker code. 
+ *			* Added colorList. fromColor and toColor still work, but they are just converted into a colorList.
+ *			* Changed alpha to an array as well, can use more than 2 params. Still works with older string based param.
+ *	Bugs fixed:
+ *		1.0.1 
+ *			* Undesired flickering effect if colorBlend was called multiple times on the same css parameter.
+ *		1.0.2 
+ *			* Noticed element would keep color attributes in certain circumstances.
+ *		1.0.4
+ *			* Fixed bug where under certain conditions the color would flicker. 
+ *		1.0.5
+ *			* Great find by cratchit and he supplied the fix. Can now call colorBlend without any options. 
+ *		1.2.0
+ *			* Flicker fix in 1.0.4 caused other issues. Fixed for good. 
+ *			* Found that if you try to get current color from scroll bar, it blows up. Added check for undefined as a color. Defaults to white.
+ *		1.3.0
+ *			* Found MORE flickering issues, and fixed them. I guess it's not over until the fat lady sings. Didn't see any more flicking, but I don't hear a fat lady.
+ *		1.5.0
+ *			* In my ignorance I noticed that alpha is taken care of quite nicely by jquery itself. No need to fix what isn't broke. Removed the custom stuff I had placed in.
+ *			* Found an issue where if pausing and resuming something repeatitivly it might not sync up and cause weird flashing effects. Added isPOrS variable to check if paused or stopped. Seems to work. 
+ *		1.6.1
+ *			* Found that in my last release I had accidentally hosed the "current", "random", "parent" and "opposite" options for the color list.
+ */
+  
+(function($) {
+	var ver = '1.6.1';
+	var gObj = [];
+	var q = 0;
+	var tfps = [];
+	var cnt = 0;
+	var cid = 0;
+	
+	$.fn.colorBlend = function(opts) {
+		if(!opts) { opts = [{}]; }
+		
+		var arrySelected = [];
+		this.each(function() {
+			arrySelected[arrySelected.length] = $.data($(this).get(0));
+		});
+
+		return this.each(function() {
+			var $cont = $(this);
+			var uId = $.data($cont.get(0));
+			var isFlagAll = false;
+			
+			if(udf(gObj[uId])) {
+				gObj[uId] = [];
+			}
+
+			$.each(opts, function(i, v){
+				var isFound = false;
+				opts[i] = $.extend({}, $.fn.colorBlend.defaults, opts[i]);
+				opts[i].queue = [];
+				opts[i].internals = $.extend({}, $.fn.colorBlend.internals);
+				opts[i].parent = $cont;
+
+				if(opts[i].param == "all") {
+					isFlagAll = FlagAll(opts[i].action);
+				}
+								
+				$.each(gObj[uId], function(j, w) {
+					if(gObj[uId][j].param.toLowerCase() == opts[i].param.toLowerCase() 
+					|| opts[i].param.toLowerCase() == 'all') {
+						if(!gObj[uId][j].internals.animating) {
+							gObj[uId].splice(j, 1, setOptions(opts[i]));
+						}
+						isFound = true;
+						return false;
+					}
+				});
+				
+				if(!isFound) {
+					gObj[uId].push(setOptions(opts[i]));
+				}
+			});
+
+			if(!isFlagAll) {
+				$.each(gObj[uId], function(i, v){
+					var ani = gObj[uId][i].internals.animating;
+					var pausedOrStopped = gObj[uId][i].internals.isPOrS;
+					
+					$.each(opts, function(j, w) {
+						if(gObj[uId][i].param.toLowerCase() != opts[j].param.toLowerCase()) {
+							return true;
+						}
+
+						switch(opts[j].action) {
+							case "stop":
+							case "pause":
+								clearTimeout(gObj[uId][i].internals.tId);
+								gObj[uId][i].internals.isPOrS = true;
+								pausedOrStopped = true;
+								if(opts[j].action == "stop") {
+									gObj[uId][i].internals.animating = false;
+								}
+							break;
+							case "resume":
+								ani = true;
+								pausedOrStopped = false;
+								gObj[uId][i].internals.isPOrS = false;
+								go(gObj[uId][i]);
+							break;
+							default:
+								if(ani) {
+									if(gObj[uId][i].isQueue && gObj[uId][i].cycles > 0) {
+										gObj[uId][i].queue.push(setOptions(opts[j]));
+									}
+								}
+							break;
+						}
+					});
+					
+					if(!ani && !pausedOrStopped) {
+						go(gObj[uId][i]);
+					} 
+				});
+			}
+		});
+		
+		function FlagAll(action) {
+			var res = false;
+			$.each(arrySelected, function(i, v) {
+				var curObj = gObj[v];
+				$.each(curObj, function(j, w) {
+					switch(action) {
+						case "stop":
+						case "pause": 
+							res = true;
+							clearTimeout(curObj[j].internals.tId);
+							curObj[j].internals.isPOrS = true;
+							if(action == "stop") {
+								curObj[j].internals.animating = false;
+							}
+						break;
+						case "resume": 
+							res = true;
+							curObj[j].internals.isPOrS = false;
+							go(curObj[j]);
+						break;
+					}
+				});
+			});
+
+			return res;
+		};
+	};
+
+	$.fn.colorBlend.defaults = {
+		fps:30,
+		duration:1000,
+		param:"background-color",
+		cycles:0,
+		random:false,
+		isFade:true,
+		fromColor:"",
+		toColor:"",
+		colorList: ["current", "opposite"],
+		alpha:["100", "100"],
+		action:"",
+		isQueue:true
+	};
+	
+	$.fn.colorBlend.internals = {
+		aniArray:  [],
+		alphaArry: [],
+		pos: 0,
+		currentCycle: 0,
+		direction: 1,
+		frames: 0,
+		delay: 0,
+		fromRand: false,
+		toRand: false,
+		animating: false,
+		tId: 0,
+		isPOrS: false
+	};
+
+	function setOptions(Opts) {
+		if(!Opts.internals.animating) {
+			var alphaParam = typeof(Opts.alpha) == "string" ? Opts.alpha.split(",") : Opts.alpha;
+
+			if(Opts.fromColor != "" && Opts.toColor != "") {
+				switch(Opts.fromColor.toLowerCase()) {
+					case "current":
+						Opts.fromColor = Opts.parent.css(Opts.param);
+						break;
+					case "parent":
+					case "transparent":
+						Opts.fromColor = checkParentColor(Opts.parent, Opts.param);
+						break;
+					case "opposite":
+						Opts.fromColor = OppositeColor(Opts.toColor);
+						break;
+					case "random":
+						Opts.fromColor = rndColor();
+						Opts.internals.fromRand = true;
+						break;
+				}
+					
+				switch(Opts.toColor.toLowerCase()) {
+					case "current":
+						Opts.toColor = Opts.parent.css(Opts.param);
+						break;
+					case "parent":
+					case "transparent":
+						Opts.toColor = checkParentColor(Opts.parent, Opts.param);
+						break;
+					case "opposite":
+						Opts.toColor = OppositeColor(Opts.fromColor);
+						break;
+					case "random":
+						Opts.toColor = rndColor();
+						Opts.internals.toRand = true;
+						break;
+				}
+				
+				Opts.colorList = [Opts.fromColor, Opts.toColor];
+			}
+			
+			if(Opts.colorList.length == 1) {
+				if(Opts.colorList[0].toLowerCase() == "random") {
+					Opts.internals.toRand = true;
+					Opts.colorList[0] = rndColor();
+				}
+			}
+			
+			$.each(Opts.colorList, function(i, v) {
+				switch(v.toLowerCase()) {
+					case "current": 
+						Opts.colorList[i] = Opts.parent.css(Opts.param) == "transparent" ? checkParentColor(Opts.parent, Opts.param) : Opts.parent.css(Opts.param);
+						break;
+					case "parent":
+					case "transparent":
+						Opts.colorList[i] = checkParentColor(Opts.parent, Opts.param);
+						break;
+					case "opposite":
+						Opts.colorList[i] = OppositeColor(toHexColor(checkParentColor(Opts.parent, Opts.param)));
+						break;
+					case "random":
+						Opts.colorList[i] = rndColor();
+						break;
+				}
+			});
+			
+			Opts.internals.currentCycle = Opts.cycles > 0 ? Opts.cycles : 0;
+			Opts.internals.frames = Math.floor(Opts.fps * (Opts.duration / 1000));
+			Opts.internals.delay = Math.floor(Opts.duration / ((Opts.internals.frames+1)*Opts.colorList.length));
+
+			if(Opts.random) {
+				Opts.isFade = false;
+				Opts.colorList = [rndColor(), rndColor()];
+			}
+				
+			if(Opts.isFade) {
+				Opts.internals.currentCycle = Opts.internals.currentCycle * 2;
+				Opts.internals.delay = Math.floor(Opts.internals.delay / 2);
+				Opts.internals.frames = Math.floor(Opts.internals.frames / 2);
+			}					
+				
+			Opts.internals.alphaArry = buildAlphaAni(alphaParam, Opts.internals.frames);
+			Opts.internals.aniArray = buildAnimation(Opts.colorList, Opts.internals.frames);
+			return Opts;
+		}
+	}
+
+	function go(Opts) {
+		if(!Opts.internals.isPOrS) {
+			var sendStop = false;
+
+			Opts.internals.animating = true;
+
+			Opts.parent.css(Opts.param, Opts.internals.aniArray[Opts.internals.pos]);
+			setAlpha(Opts.parent, Opts.internals.alphaArry[Opts.internals.pos]);
+
+			Opts.internals.pos += Opts.internals.direction; 
+
+			if(Opts.internals.pos < 0 || Opts.internals.pos >= Opts.internals.aniArray.length) {
+				Opts.internals.currentCycle -= Opts.internals.currentCycle != 0 ? 1 : 0;
+				Opts.internals.direction = Opts.internals.direction * -1;
+				Opts.internals.pos += Opts.internals.direction;
+
+				if(Opts.random) {
+					Opts.colorList = [Opts.colorList[Opts.colorList.length-1], rndColor()];
+					Opts.internals.aniArray = buildAnimation(Opts.colorList, Opts.internals.frames);
+				}
+
+				if(!Opts.isFade) {
+					Opts.internals.direction = 1;
+					Opts.internals.pos = 0;
+				}
+
+				if(Opts.internals.currentCycle == 0 && Opts.cycles > 0) {
+					sendStop = true;
+				}
+			}
+
+			if(!sendStop) {
+				Opts.internals.tId = setTimeout(function(){go(Opts);}, Opts.internals.delay);
+			} else {
+				clearTimeout(Opts.internals.tId);
+				Opts.internals.tId = 0;
+				if(Opts.isQueue && Opts.queue.length > 0) {
+					var tmp = Opts.queue.concat();
+					tmp.splice(0,1);
+					Opts = $.extend(Opts, Opts.queue.shift());
+					Opts.queue = tmp.concat();
+					Opts.internals.tId = setTimeout(function(){go(Opts);}, Opts.internals.delay);
+				} else {
+					Opts.internals.animating = false;
+					Opts.internals.isPOrS = true;
+				}
+			}
+		}
+	}
+
+	function setAlpha(elm, opacity) {
+		elm.css("opacity", parseFloat(opacity / 100));
+	}
+
+	function buildAlphaAni(alphaList, frames) {
+		var frame = 0;
+		var res = [];
+		var h = 0;
+		
+		for(var i = 0;i < alphaList.length-1;i++) {
+			var startOpacity = alphaList[i];
+			var endOpacity = alphaList[i+1];
+			for(frame = 0;frame<=frames;frame++) {
+				h = Math.floor(startOpacity * ((frames-frame)/frames) + endOpacity * (frame/frames));
+				res[res.length] = h
+			}
+		}
+		
+		if(h != alphaList[alphaList.length-1]) {
+			res[res.length] = parseInt(alphaList[alphaList.length-1]);
+		}
+		
+		return res;
+	}
+
+	function buildAnimation(colorList, frames) {
+		var frame = 0;
+		var r,g,b,h;
+		var res = [];
+		for(var i = 0;i < colorList.length-1;i++) {
+			var fc = getRGB(colorList[i]); 
+			var tc = getRGB(colorList[i+1]); 
+
+			for(frame = 0;frame<=frames;frame++) {
+				r = Math.floor(fc[0] * ((frames-frame)/frames) + tc[0] * (frame/frames));
+				g = Math.floor(fc[1] * ((frames-frame)/frames) + tc[1] * (frame/frames));
+				b = Math.floor(fc[2] * ((frames-frame)/frames) + tc[2] * (frame/frames));
+				h = ColorDecToHex(r, g, b);
+				res[res.length] = h;
+			}
+		}
+
+
+		if(h.toLowerCase() != toHexColor(colorList[colorList.length-1])) {
+			res[res.length] = toHexColor(colorList[colorList.length-1]);
+		}
+		
+		return res;
+	}
+
+	var colors = {
+		aliceblue:"F0F8FF", antiquewhite:"FAEBD7", aqua:"00FFFF", aquamarine:"7FFFD4",
+		azure:"F0FFFF", beige:"F5F5DC", bisque:"FFE4C4", black:"000000",
+		blanchedalmond:"FFEBCD", blue:"0000FF", blueviolet:"8A2BE2", brown:"A52A2A",
+		burlywood:"DEB887", cadetblue:"5F9EA0", chartreuse:"7FFF00", chocolate:"D2691E",
+		coral:"FF7F50", cornflowerblue:"6495ED", cornsilk:"FFF8DC", crimson:"DC143C",
+		cyan:"00FFFF", darkblue:"00008B", darkcyan:"008B8B", darkgoldenrod:"B8860B",
+		darkgray:"A9A9A9", darkgreen:"006400", darkkhaki:"BDB76B", darkmagenta:"8B008B",
+		darkolivegreen:"556B2F", darkorange:"FF8C00", darkorchid:"9932CC", darkred:"8B0000",
+		darksalmon:"E9967A", darkseagreen:"8FBC8F", darkslateblue:"483D8B", darkslategray:"2F4F4F",
+		darkturquoise:"00CED1", darkviolet:"9400D3", deeppink:"FF1493", deepskyblue:"00BFFF",
+		dimgray:"696969", dodgerblue:"1E90FF", firebrick:"B22222", floralwhite:"FFFAF0",
+		forestgreen:"228B22", fuchsia:"FF00FF", gainsboro:"DCDCDC", ghostwhite:"F8F8FF",
+		gold:"FFD700", goldenrod:"DAA520", gray:"808080", grey:"808080", green:"008000",
+		greenyellow:"ADFF2F", honeydew:"F0FFF0", hotpink:"FF69B4", indianred:"CD5C5C",
+		indigo:"4B0082", ivory:"FFFFF0", khaki:"F0E68C", lavender:"E6E6FA",
+		lavenderblush:"FFF0F5", lawngreen:"7CFC00", lemonchiffon:"FFFACD", lightblue:"ADD8E6",
+		lightcoral:"F08080", lightcyan:"E0FFFF", lightgoldenrodyellow:"FAFAD2", lightgreen:"90EE90",
+		lightgrey:"D3D3D3", lightpink:"FFB6C1", lightsalmon:"FFA07A", lightseagreen:"20B2AA",
+		lightskyblue:"87CEFA", lightslategray:"778899", lightsteelblue:"B0C4DE", lightyellow:"FFFFE0",
+		lime:"00FF00", limegreen:"32CD32", linen:"FAF0E6", magenta:"FF00FF",
+		maroon:"800000", mediumaquamarine:"66CDAA", mediumblue:"0000CD", mediumorchid:"BA55D3",
+		mediumpurple:"9370DB", mediumseagreen:"3CB371", mediumslateblue:"7B68EE", mediumspringgreen:"00FA9A",
+		mediumturquoise:"48D1CC", mediumvioletred:"C71585", midnightblue:"191970", mintcream:"F5FFFA",
+		mistyrose:"FFE4E1", moccasin:"FFE4B5", navajowhite:"FFDEAD", navy:"000080",
+		oldlace:"FDF5E6", olive:"808000", olivedrab:"6B8E23", orange:"FFA500",
+		orangered:"FF4500", orchid:"DA70D6", palegoldenrod:"EEE8AA", palegreen:"98FB98",
+		paleturquoise:"AFEEEE", palevioletred:"DB7093", papayawhip:"FFEFD5", peachpuff:"FFDAB9",
+		peru:"CD853F", pink:"FFC0CB", plum:"DDA0DD", powderblue:"B0E0E6",
+		purple:"800080", red:"FF0000", rosybrown:"BC8F8F", royalblue:"4169E1",
+		saddlebrown:"8B4513", salmon:"FA8072", sandybrown:"F4A460", seagreen:"2E8B57",
+		seashell:"FFF5EE", sienna:"A0522D", silver:"C0C0C0", skyblue:"87CEEB",
+		slateblue:"6A5ACD", slategray:"708090", snow:"FFFAFA", springgreen:"00FF7F",
+		steelblue:"4682B4", tan:"D2B48C", teal:"008080", thistle:"D8BFD8",
+		tomato:"FF6347", turquoise:"40E0D0", violet:"EE82EE", wheat:"F5DEB3",
+		white:"FFFFFF", whitesmoke:"F5F5F5", yellow:"FFFF00", yellowgreen:"9ACD32"
+	};
+
+	function OppositeColor(value) {
+		value = toHexColor(value).split("#").join('').split('');
+		var hexVals = "0123456789abcdef";
+		var revHexs = hexVals.split('').reverse().join('');
+		var currentPos;
+		for(var i = 0;i < value.length;i++) {
+			currentPos = hexVals.indexOf(value[i]);
+			value[i] = revHexs.substring(currentPos,currentPos+1);
+		}
+		
+		return "#" + value.join('');
+	}
+
+	function ColorDecToHex(r,g,b) {
+		r = r.toString(16); if (r.length == 1) r = '0' + r;
+		g = g.toString(16); if (g.length == 1) g = '0' + g; 
+		b = b.toString(16); if (b.length == 1) b = '0' + b;
+		return "#" + r + g + b;
+	}
+
+	function ColorHexToDec(value) {
+		var res = [];
+		value = value.replace("#", "");
+		for(var i = 0;i < 3;i++) {
+			res[res.length] = parseInt(value.substr(i * 2, 2), 16);
+		}
+		return res.join(',');
+	}
+
+	// Color Conversion functions from highlightFade
+	// By Blair Mitchelmore
+	// http://jquery.offput.ca/highlightFade/
+	// Parse strings looking for color tuples [255,255,255]
+	function getRGB(color) {
+		var result;
+
+		// Check if we're already dealing with an array of colors
+		if ( color && color.constructor == Array && color.length == 3 )
+			return color;
+
+		// Look for rgb(num,num,num)
+		if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
+			return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
+
+		// Look for rgb(num%,num%,num%)
+		if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
+			return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
+
+		// Look for #a0b1c2
+		if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
+			return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
+
+		// Look for #fff
+		if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
+			return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
+
+		// Otherwise, we're most likely dealing with a named color
+		return ColorHexToDec(colors[jQuery.trim(color).toLowerCase()]).split(',');
+	}
+
+	function toHexColor(value) {
+		var rgb = getRGB(value);
+		return ColorDecToHex(parseInt(rgb[0]), parseInt(rgb[1]), parseInt(rgb[2]));
+	}
+
+	function checkParentColor(elm, param) {
+		/*White is chosen as default to eliminate issues between IE and FF*/
+		var pColr = "#ffffff";
+		
+		$(elm).parents().each(function(){
+			var result = $(this).css(param);
+			if(result != 'transparent' && result != '') {
+				pColr = result;
+				return false;
+			}
+		});
+		
+		return pColr;
+	}
+
+	function rndColor() {
+		var res = [];
+		var cm;
+		for(var i = 0;i < 3;i++) {
+			cm = randRange(0, 255).toString(16); 
+			if (cm.length == 1) cm = '0' + cm;
+			res[res.length] = cm;
+		}
+		return "#" + res.join('');
+	}
+
+	function randRange(lowVal, highVal) {
+		 return Math.floor(Math.random()*(highVal-lowVal+1))+lowVal;
+	}
+
+	function udf(val) {
+		return typeof(val) == 'undefined' ? true : false;
+	}
+})(jQuery);

locale/de/LC_MESSAGES/sjqg.po

@@ -0,0 +1,30 @@
+# German translation for SJQG
+# Copyright (C) 2009 Jan Dittberner <jan@dittberner.info>
+# This file is distributed under the same license as the
+# scrollingJqueryGallery package.
+# Jan Dittberner <jan@dittberner.info>, 2009.
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: SJQG 0.3\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2009-07-31 23:11+0200\n"
+"PO-Revision-Date: 2009-07-31 23:11+0200\n"
+"Last-Translator: Jan Dittberner <jan@dittberner.info>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: includes/galleryfunctions.php:276
+msgid "Unknown scale type"
+msgstr "Unbekannter Skalierungstyp"
+
+#: includes/galleryfunctions.php:290
+#, php-format
+msgid "could not create directory %s.\n"
+msgstr "Konnte Verzeichnis %s nicht anlegen.\n"
+
+#: includes/galleryfunctions.php:43
+#, php-format
+msgid "required %s not found."
+msgstr "benötigte %s nicht gefunden."

locale/sjqg.pot

@@ -0,0 +1,31 @@
+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR Jan Dittberner <jan@dittberner.info>
+# This file is distributed under the same license as the PACKAGE package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
+#
+#, fuzzy
+msgid ""
+msgstr ""
+"Project-Id-Version: SJQG 0.3\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2009-07-31 23:11+0200\n"
+"PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
+"Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
+"Language-Team: LANGUAGE <LL@li.org>\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=CHARSET\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+#: includes/galleryfunctions.php:276
+msgid "Unknown scale type"
+msgstr ""
+
+#: includes/galleryfunctions.php:290
+#, php-format
+msgid "could not create directory %s.\n"
+msgstr ""
+
+#: includes/galleryfunctions.php:43
+#, php-format
+msgid "required %s not found."
+msgstr ""

release/build.sh

@@ -0,0 +1,57 @@
+#!/bin/sh
+#
+# Build script for ScrollingJQueryGallery
+#
+# Author: Jan Dittberner <jan@dittberner.info>
+#
+# Copyright © 2009 Jan Dittberner
+# Jan Dittberner IT-Consulting & -Solutions
+# Cottbuser Str. 1, D-01129 Dresden, Germany
+#
+# This file is part of the ScrollingJQueryGallery component of the
+# gnuviech-server.de Websitetools
+#
+# ScrollingJQueryGallery is free software: you can redistribute it
+# and/or modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation, either version 3 of
+# the License, or (at your option) any later version.
+#
+# ScrollingJQueryGallery is distributed in the hope that it will be
+# useful, but WITHOUT ANY WARRANTY; without even the implied warranty
+# of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+# General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with ScrollingJQueryGallery.  If not, see
+# <http://www.gnu.org/licenses/>.
+
+set -e
+
+BASEPATH=`dirname "$0"`/..
+VERSION="0.2"
+PROJECT="scrollingjquerygallery"
+
+BASEPATH=`realpath "${BASEPATH}"`
+TEMPDIR=`mktemp -d`
+
+ln -s "$BASEPATH" "${TEMPDIR}/${PROJECT}-${VERSION}"
+
+# release tar file
+TARFILE=`realpath "${BASEPATH}/../"`/${PROJECT}-${VERSION}.tar.gz
+tar czhf "$TARFILE" -C "${TEMPDIR}" \
+  --exclude '*/.git' --exclude '*/bilder' --exclude '.svn' \
+  --exclude '*~' --exclude 'gallery.ini' \
+  "${PROJECT}-${VERSION}"
+gpg --detach-sign --armor "$TARFILE"
+md5sum "$TARFILE" > "$TARFILE.md5"
+echo "release is in $TARFILE"
+
+# sample images tar file
+TARFILE=`realpath "${BASEPATH}/../"`/${PROJECT}-resources-${VERSION}.tar.gz
+tar czhf "$TARFILE" -C "${TEMPDIR}" \
+  --exclude '.svn' "${PROJECT}-${VERSION}/bilder"
+gpg --detach-sign --armor "$TARFILE"
+md5sum "$TARFILE" > "$TARFILE.md5"
+echo "resources are in $TARFILE"
+
+rm -r "$TEMPDIR"

resources/sjqg_favicon.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve">
+<rect fill="#921422" width="20" height="20"/>
+<path fill="#FFFFFF" d="M12.101,9.172l-4.824,3.4l3.628,4.277l0.252-2.347c10.443-0.187,9.117-11.23-0.395-9.89
+	C1.827,5.506-2.441,15.297,8.595,14.728L6.899,12.83c-4.02,0.615-3.919-6.143,4.244-7.472c8.035-0.675,4.352,7.276,0.336,7.111
+	L12.101,9.172z"/>
+</svg>

scripts/ourhandlers.js

@@ -1,7 +1,7 @@
 /*
 * Image scrolling JQuery code.
 *
-* Copyright (c) 2007, 2008 Jan Dittberner <jan@dittberner.info>
+* Copyright (c) 2007, 2008, 2009 Jan Dittberner <jan@dittberner.info>
 * Jan Dittberner IT-Consulting & -Solutions
 * Cottbuser Str. 1, D-01129 Dresden
 *
@@ -51,36 +51,53 @@ function getPathParts(imagesrc) {
 }
 
 function updateContentImage(pathParts) {
-    $.getJSON("ajaxrequest.php", {
+    $.get(basepath + "ajaxrequest.php", {
         "imagename"   : pathParts.filename,
         "galleryname" : pathParts.gallery
     }, function(data, textStatus) {
         $("#imagedescription").text(data["label"]);
-        $("#content_main img").attr("alt", data["label"]);
+        $('#content_main img').attr('alt', data.label).attr('src', data.preview[0]).attr('width', data.preview[1]).attr('height', data.preview[2]);
-        $("#content_main img").attr("src", data["preview"]);
+        $("#content_main a").attr("href", data["full"]).attr("title", data["label"]);
-        $("#content_main a").attr("href", data["full"]);
-        $("#content_main a").attr("title", data["label"]);
         document.title = data["title"];
-    });
+    }, 'json');
 }
 
 $(document).ready(function() {
-    $("#arrleft").mouseover(function() {
+    if (themetype == 'horizontal') {
-        $("#scrollable").animate({
+        $("#arrleft").mouseover(function() {
-            left: "0px"
+            $("#scrollable").animate({
-        }, 500);
+                left: "0px"
-    }).mouseout(function() {
+            }, 500);
-        $("#scrollable").stop();
+        }).mouseout(function() {
-    });
+            $("#scrollable").stop();
-    $("#arrright").mouseover(function() {
+        });
-        offset = parseInt($("#imgscroller").css("width")) -
+        $("#arrright").mouseover(function() {
-            parseInt($("#scrollable").css("width"));
+            var offset = parseInt($("#imgscroller").css("width")) -
-        $("#scrollable").animate({
+                parseInt($("#scrollable").css("width"));
-            left: offset + "px"
+            $("#scrollable").animate({
-        }, 500);
+                left: offset + "px"
-    }).mouseout(function() {
+            }, 500);
-        $("#scrollable").stop();
+        }).mouseout(function() {
-    });
+            $("#scrollable").stop();
+        });
+    } else {
+        $('#arrup').mouseover(function() {
+            $('#scrollable').animate({
+                top: "0px"
+            }, 500);
+        }).mouseout(function() {
+            $('#scrollable').stop();
+        });
+        $('#arrdown').mouseover(function() {
+            var offset = parseInt($('#imgscroller').css('height')) -
+                parseInt($('#scrollable').css('height'));
+            $('#scrollable').animate({
+                top: offset + "px"
+            }, 500);
+        }).mouseout(function() {
+            $('#scrollable').stop();
+        });
+    }
     $("#backbtn").click(function() {
         $("div.thumbnail img").each(function(i) {
             var curparts = getPathParts($("img#contentimg").attr("src"));

themes/default_horizontal/css/format.css

@@ -1,4 +1,4 @@
-/*
+git sta/*
  * Copyright (c) 2008 Jan Dittberner <jan@dittberner.info>
  * Jan Dittberner IT-Consulting & -Solutions
  * Cottbuser Str. 1, D-01129 Dresden
@@ -66,17 +66,15 @@ a.lightbox img {
 }
 #imagedescription {
 position:relative;
-  weight: 330px;
   height: 25px;
-  top: 300px;
+  top: 330px;
   left: 0px;
   color: #ffffff;
   font-size:10px;
   font-style:normal;
   font-weight:normal;
   text-align:center;
-  vertical-align:center;
+  vertical-align:center;  
-  
 }
 .imgdescription {
   color: #ffffff;

themes/default_horizontal/css/main.css

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2008 Jan Dittberner <jan@dittberner.info>
+ * Copyright (c) 2008, 2009 Jan Dittberner <jan@dittberner.info>
  * Jan Dittberner IT-Consulting & -Solutions
  * Cottbuser Str. 1, D-01129 Dresden
  *
@@ -137,13 +137,16 @@ a:active {
 }
 
 #menu {
-   position:absolute; 
+   list-style:none;
+   display:inline;
+   position:absolute;
    width:330px; 
    height:14px;  
    left: 143.5px;
    top: 553px;
    margin-top:2px;
    z-index:10;
+   padding:0;
 }
 
 #sub_menu {
@@ -200,7 +203,7 @@ a:active {
 #content_sub {
    position:absolute;
    width:330px;
-   height:330px;
+   height:350px;
    left: 143px;
    top: 149px;
 }
@@ -210,7 +213,7 @@ a:active {
    width:20px; 
    height:10px; 
    left: 298px;
-   top: 305.5px;
+   top: 330px;
    z-index:1;
 }
 
@@ -218,8 +221,8 @@ a:active {
    position:absolute;
    width:311px;
    height:311px;
-   top: 9.5px;
+   top: 9px;
-   left: 9.5px;
+   left: 9px;
    text-align:center;
    font-weight: normal;
 }
@@ -245,9 +248,49 @@ a:active {
 //////////////Menu///////////////////
 
 
-.kontakt a {background-image: url("../grafiken/kontakt_1.png"); width:64px;height:13px;border:0px;}
+a.menu { 
-.kontakt a:hover {background-image: url("../grafiken/kontakt_2.png")}
+	display:block;
+	text-align:center;
+	width:16ex;
+	padding:2px;
+	text-decoration:none;
+}
 
+a.menu:link {
+	color:#ffffff;
+	background-color:#3d0000;
+	padding-left:4px;
+	padding-right:4px;
+	padding-top:2px;
+	padding-bottom:2px;
+}
+
+a.menu:visited {
+	color:#ffffff;
+	background-color:#3d0000;
+	padding-left:4px;
+	padding-right:4px;
+	padding-top:2px;
+	padding-bottom:2px;
+}
+
+a.menu:hover {
+	color:#ffffff;
+	background-color:#454648;
+	padding-left:4px;
+	padding-right:4px;
+	padding-top:2px;
+	padding-bottom:2px;
+}
+
+a.menu:active {
+	color:#ffffff;
+	background-color:#454648;
+	padding-left:4px;
+	padding-right:4px;
+	padding-top:2px;
+	padding-bottom:2px;
+}
 ////////////////////////////////////
 
 

themes/default_horizontal/theme.ini

@@ -0,0 +1,4 @@
+themename=Horizontal default theme
+themetype=horizontal
+previewsize=311
+thumbsize=67

themes/default_horizontal/theme.php

@@ -0,0 +1,80 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $content['lang'] ; ?>">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title><?php echo $content['title']; ?></title>
+<style type="text/css">
+<?php print($content['inlinestyle']); ?>
+
+a {
+	font-size: 9px;
+}
+a:link {
+	text-decoration: none;
+}
+a:visited {
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: none;
+}
+a:active {
+	text-decoration: none;
+}
+</style>
+<?php foreach ($content['styles'] as $style) { ?>
+<link rel="stylesheet" type="text/css" href="<?php echo $style; ?>" />
+<?php } ?>
+<link rel="stylesheet" type="text/css" href="<?php echo $content['themepath']; ?>/css/main.css" />
+<link rel="stylesheet" type="text/css" href="<?php echo $content['themepath']; ?>/css/format.css" />
+<script type="text/javascript"><!--
+<?php echo $content['inlinescript']; ?>
+
+//--></script>
+<?php foreach ($content['scripts'] as $script) { ?>
+<script type="text/javascript" src="<?php echo $script; ?>"></script>
+<?php } ?>
+</head>
+<body>
+  <div id="container">
+    <div id="content">
+      <ul id="menu"><?php
+ foreach ($content['gallerylinks'] as $data) {
+   printf('<li class="menu%s"><a class="menu" href="%s">%s </a></li>',
+          ($data['gallery'] == $content['gallery']) ? ' active' : '',
+          $data['url'], $data['label']);
+ } ?></ul>
+      <div id="content_container">
+      <div id="slider">
+        <div id="arrleft"><img src="<?php echo $content['themepath']; ?>/images/aro-lft.png" alt="nach links" width="10" height="65" /></div>
+        <div id="imgscroller"><div id="scrollable"><?php
+          // show Thumnails an
+         foreach ($content['thumbnails'] as $thumbdata) {
+ ?><div class="thumbnail"><img src="<?php echo $thumbdata['src']; ?>" alt="<?php echo $thumbdata['alt']; ?>" <?php echo $thumbdata['sizes']; ?> /></div><?php
+ } ?></div></div>
+        <div id="arrright"><img src="<?php echo $content['themepath']; ?>/images/aro-rt.png" alt="nach rechts" width="10" height="65" /></div>
+      </div>
+    </div>
+    <div id="content_sub">
+      <div id="content_main">
+        <div class="bildposition"><?php
+          // bindet die Bilder in den Hauptbereich ein
+   $data = $content['firstpreview'];
+          printf('<a  class="lightbox" title="%s" href="%s" rel="lightbox">' .
+                 '<img id="contentimg" src="%s" alt="%s" %s /></a>',
+                 $data['title'], $data['full'], $data['src'], $data['alt'],
+                 $data['sizes']);
+        ?></div>
+      </div>
+      <div id="content_nav">
+        <img id="backbtn" src="<?php echo $content['themepath']; ?>/images/back.png" alt="back" class="back" width="10" height="10" /><img id="fwdbtn" src="<?php echo $content['themepath']; ?>/images/next.png" alt="next" class="next" width="10" height="10" />
+      </div>
+      <div class="imgdescription" id="imagedescription"><?php
+        echo $content['firstdescription']; 
+      ?></div>
+    </div>
+  </div> 
+</div>
+</body>
+</html>

themes/default_vertical/css/main.css

@@ -0,0 +1,49 @@
+/*
+ * Copyright (c) 2009 Jan Dittberner <jan@dittberner.info>
+ * Jan Dittberner IT-Consulting & -Solutions
+ * Cottbuser Str. 1, D-01129 Dresden
+ *
+ * This file is part of the ScrollingJQueryGallery component of the
+ * gnuviech-server.de Websitetools
+ *
+ * ScrollingJQueryGallery is free software: you can redistribute it
+ * and/or modify it under the terms of the GNU General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * ScrollingJQueryGallery is distributed in the hope that it will be
+ * useful, but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with ScrollingJQueryGallery.  If not, see
+ * <http://www.gnu.org/licenses/>.
+ *
+ * Version: $Id$
+ */
+@charset "UTF-8";
+
+body {
+   font-family:Verdana, Arial, sans-serif;
+}
+
+#slider {
+   width:90px;
+   float:left;
+   margin-left:10px;
+   margin-right:10px;
+}
+
+#arrup, #arrdown {
+   heigt:10px;
+}
+
+#imgscroller {
+   height:200px;
+   overflow:hidden;
+}
+
+#scrollable {
+   position:relative;
+}

themes/default_vertical/theme.ini

@@ -0,0 +1,4 @@
+themename=Vertical default theme
+themetype=vertical
+previewsize=311
+thumbsize=90

themes/default_vertical/theme.php

@@ -0,0 +1,52 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $content['lang'] ; ?>">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title><?php echo $content['title']; ?></title>
+<style type="text/css">
+<?php print($content['inlinestyle']); ?>
+</style>
+<?php foreach ($content['styles'] as $style) { ?>
+<link rel="stylesheet" type="text/css" href="<?php echo $style; ?>" />
+<?php } ?>
+<link rel="stylesheet" type="text/css" href="<?php echo $content['themepath']; ?>/css/main.css" />
+<script type="text/javascript"><!--
+<?php echo $content['inlinescript']; ?>
+
+//--></script>
+<?php foreach ($content['scripts'] as $script) { ?>
+<script type="text/javascript" src="<?php echo $script; ?>"></script>
+<?php } ?>
+</head>
+<body>
+  <ul id="menu"><?php foreach ($content['gallerylinks'] as $data) {
+   printf('<li class="menu%s"><a class="menu" href="%s">%s </a></li>',
+          ($data['gallery'] == $content['gallery']) ? ' active' : '',
+          $data['url'], $data['label']);
+  } ?></ul>
+  <div id="slider">
+    <div id="arrup">up</div>
+    <div id="imgscroller">
+      <div id="scrollable"><?php
+   foreach($content['thumbnails'] as $thumb) {
+   ?><div class="thumbnail"><img src="<?php echo $thumb['src']; ?>" alt="<?php echo $thumb['alt']; ?>" <?php echo $thumb['sizes']; ?> /></div><?php
+ } ?></div></div>
+    <div id="arrdown">down</div>
+  </div>
+  <div id="content_main"><?php
+    $data = $content['firstpreview'];
+    printf('<a class="lightbox" title="%s" href="%s" rel="lightbox">' .
+           '<img id="contentimg" src="%s" alt="%s" %s /></a>',
+           $data['title'], $data['full'], $data['src'], $data['alt'],
+           $data['sizes']);
+  ?></div>
+  <div class="imgdescription" id="imagedescription"><?php
+    echo $content['firstdescription']; 
+  ?></div>
+  <div id="content_nav">
+    <span id="backbtn">Back</span>
+    <span id="fwdbtn">Forward</span>
+  </div>
+</body>
+</html>