http://www.zenphoto.org/support/ zenphoto forums Topic: Highslide with galleries and thumbstrips en Thu, 20 Jun 2013 06:30:20 +0000 http://www.zenphoto.org/support/topic.php?id=5673#post-32908 Sat, 20 Jun 2009 06:34:30 +0000 Denn 32908@http://www.zenphoto.org/support/ <p>Hi,</p> <p>I've been trying for a while now to add a newer highslide with galleries and thumbstrips but to no avail. What happens is when I change the js code and move it all up I get a "loading" message on the thumbnail when it is clicked but the highslide never comes up. clicking the thumb again stops the loading message. I can't figure out if it is some weird interaction between the newer hs and zen or what but I've tried a lot of things an gotten nowhere.</p> <p>The basics, to start, are (I hope I'm posting code properly here with backticks but I've only done this a little here) </p> <p>In standard highslide theme the script block includes:<br /> <pre><code>&lt;script type=&quot;text/javascript&quot;&gt; hs.graphicsDir = &#39;&lt;?= $_zp_themeroot ?&gt;/highslide/graphics/&#39;; hs.outlineType = &#39;rounded-white&#39;; window.onload = function() { hs.preloadImages(); } &lt;/script&gt;</code></pre> <p>With the gallery version the code should look like this (from what I can tell from the docs.)</p> <pre><code>&lt;script type=&quot;text/javascript&quot;&gt; hs.graphicsDir = &#39;&lt;?= $_zp_themeroot ?&gt;/highslide/graphics/&#39;; /*next 4 lines added*/ hs.align = &#39;center&#39;; hs.transitions = [&#39;expand&#39;, &#39;crossfade&#39;]; hs.fadeInOut = true; hs.dimmingOpacity = 0.8; hs.outlineType = &#39;rounded-white&#39;; /*next 3 lines*/ hs.captionEval = &#39;this.thumb.alt&#39;; hs.marginBottom = 105; /* make room for the thumbstrip and the controls*/ hs.numberPosition = &#39;caption&#39;; /*next block added*/ /* Add the slideshow providing the controlbar and the thumbstrip*/ hs.addSlideshow({ //slideshowGroup: &#39;group1&#39;, interval: 5000, repeat: false, useControls: true, overlayOptions: { className: &#39;text-controls&#39;, position: &#39;bottom center&#39;, relativeTo: &#39;viewport&#39;, offsetY: -60 }, thumbstrip: { position: &#39;bottom center&#39;, mode: &#39;horizontal&#39;, relativeTo: &#39;viewport&#39; } }); /*end added block*/ window.onload = function() { hs.preloadImages(); } &lt;/script&gt;</code></pre> <p>Any ideas, leads, things to test or head slappingly obvious pointers welcome.</p> <p>Denn </p>