Gallery2: Further HighSlide hackery

diff --git a/gal2/UCW/Gallery/Web/HighSlide.pm b/gal2/UCW/Gallery/Web/HighSlide.pm
index fc9650b2661732a731582ee74ed01fb49d369423..c6bedbf62e70e969f53488dd64c9ec80c2838b95 100644 (file)
--- 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 90fa9577be114ce75c1404280f2fbfff3c8fa15e..56fca57a52bcfb8122a5062e79cfa9037ad76df0 100644 (file)
--- 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 c2dc163c40e0285ef2a281a1697706b34808f4ee..28bfc2304c31c4d99f21e2a225bc025637f00c46 100644 (file)
--- 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%;
+}
+*/