From e0e7dfa2e0ac67c947ea21911f432797860ff24b Mon Sep 17 00:00:00 2001
From: Martin Mares <mj@ucw.cz>
Date: Thu, 27 Dec 2012 22:22:30 +0100
Subject: [PATCH] Gallery2: Further HighSlide hackery

---
 gal2/UCW/Gallery/Web/HighSlide.pm  | 19 +++++++------------
 gal2/highslide/highslide.config.js | 13 ++++++-------
 gal2/highslide/highslide.css       | 26 ++++++++++++++++----------
 3 files changed, 29 insertions(+), 29 deletions(-)

diff --git a/gal2/UCW/Gallery/Web/HighSlide.pm b/gal2/UCW/Gallery/Web/HighSlide.pm
index fc9650b..c6bedbf 100644
--- a/gal2/UCW/Gallery/Web/HighSlide.pm
+++ b/gal2/UCW/Gallery/Web/HighSlide.pm
@@ -35,13 +35,13 @@ sub theme_head_extras($) {
 <link rel=stylesheet href='$tdir/style.css' type='text/css' media=all>
 <script type="text/javascript" src="$hsdir/highslide-with-gallery.js"></script>
 <script type="text/javascript" src="$hsdir/highslide.config.js" charset="utf-8"></script>
+<script type="text/javascript">
+hs.graphicsDir = '$hsdir/graphics/';
+</script>
 <link rel="stylesheet" type="text/css" href="$hsdir/highslide.css">
 <!--[if lt IE 7]>
 <link rel="stylesheet" type="text/css" href="$hsdir/highslide-ie6.css">
 <![endif]-->
-<style type="text/css">
-.brum { border: 1px solid green; }
-</style>
 AMEN
 }
 
@@ -60,13 +60,13 @@ sub show_links($$$$) {
 
 sub show_pre_thumbs($) {
 	my ($self) = @_;
-	print "<div class='highslide-gallery'>\n\n";
+	print "\n<div class='highslide-gallery'><ul>\n";
 	$self->{hs_thumb_counter} = 0;
 }
 
 sub show_post_thumbs($) {
 	my ($self) = @_;
-	print "</div>\n\n";
+	print "</ul></div>\n\n";
 }
 
 sub show_thumb($) {
@@ -79,17 +79,12 @@ sub show_thumb($) {
 	my $tw = $tm->{w};
 	my $th = $tm->{h};
 	my $thumb = $self->get('ThumbUrlPrefix') . "$tf/$photo_id.jpg";
-	my $ml = int(($box_w - $tw)/2);
-	my $mr = $box_w - $tw - $ml;
-	my $mt = int(($box_h - $th)/2);
-	my $mb = $box_h - $th - $mt;
 	# HighSlide requires title either for all images, or for none
 	my $tit = " title=\"$annot\"";
 	my $aid = $self->{hs_thumb_counter}++ ? "" : " id=thumb1";
-	print "<span style='border: 1px solid green; padding: ${mt}px ${mr}px ${mb}px ${ml}px'>\n";
-	print "<a$aid href='$click_url' class=highslide onclick='return hs.expand(this)'>";
+	my $photo_url = $self->get('PhotoUrlPrefix') . "$photo_id.jpg";
+	print "<li><a$aid href='$click_url' class=highslide onclick='return hs.expand(this, { src: \"$photo_url\" })'>";
 	print "<img src='$thumb' width=$tw height=$th alt='Photo'$tit></a>\n";
-	print "</span>\n";
 }
 
 sub attach($$) {
diff --git a/gal2/highslide/highslide.config.js b/gal2/highslide/highslide.config.js
index 90fa957..56fca57 100644
--- a/gal2/highslide/highslide.config.js
+++ b/gal2/highslide/highslide.config.js
@@ -2,7 +2,6 @@
  *	Site-specific configuration settings for Highslide JS
  */
 
-hs.graphicsDir = '/gal2/highslide/graphics/';
 hs.showCredits = false;
 hs.outlineType = 'custom';
 hs.fadeInOut = false;
@@ -13,14 +12,14 @@ hs.height = 840;
 hs.allowMultipleInstances = false;
 hs.captionEval = 'this.thumb.title';
 hs.captionOverlay = { position: "top" };
-hs.expandDuration = 0;
-hs.restoreDuration = 0;
-hs.dimmingDuration = 0;
-hs.transitionDuration = 0;
+hs.expandDuration = 100;
+hs.restoreDuration = 100;
+hs.dimmingDuration = 100;
+hs.transitionDuration = 100;
 hs.slideshowGroup = 'group1';
 hs.thumbnailId = 'thumb1';
 hs.numberPosition = 'caption';
-hs.transitions = ['expand', 'expand'];
+hs.transitions = ['expand', 'crossfade'];
 
 // Add the slideshow controller
 hs.addSlideshow({
@@ -39,7 +38,7 @@ hs.addSlideshow({
 	},
 	thumbstrip: {
 		mode: 'horizontal',
-		position: 'bottom',
+		position: 'bottom center',
 		relativeTo: 'image'
 	}
 
diff --git a/gal2/highslide/highslide.css b/gal2/highslide/highslide.css
index c2dc163..28bfc23 100644
--- a/gal2/highslide/highslide.css
+++ b/gal2/highslide/highslide.css
@@ -143,8 +143,6 @@ a.highslide-credits:hover i {
 	float: left;
 	width: 106px;
 	height: 106px;
-	border: 1px solid silver;
-	background: #ededed;
 	margin: 2px;
 	padding: 0;
 	line-height: 0;
@@ -889,10 +887,10 @@ html>/**/body .highslide-gallery ul img {
 	display: none;
 }
 
+/*********************/
+/* Customized styles */
+/*********************/
 
-/*****************************************************************************/
-/* The following styles are added by the Highslide Editor                    */
-/*****************************************************************************/
 .highslide-wrapper, .highslide-outline {
 	background: #111111;
 }
@@ -919,16 +917,24 @@ html>/**/body .highslide-gallery ul img {
 	background-color: white;
 	background-image: url(graphics/loader.white.gif);
 }
-
 .highslide-controls {
 	position: static !important;
 	margin: 0;
 	width: 120px !important;
 }
 .highslide-gallery ul li {
-	width: 106px;
-	height: 106px;
-	border: 1px solid #D0D0D0;
-	background: #EDEDED;
+	width: 130px;
+	height: 110px;
+	border: 1px solid #505;
 	margin: 2px;
 }
+
+/*
+.highslide-thumbstrip {
+	background-color: black;
+	border: 1px solid white;
+	padding-top: 8px;
+	padding-bottom: 0px;
+	width: 100%;
+}
+*/
-- 
2.39.2