GrizzlyAK
Posts: 5
Joined: Sun Jun 04, 2017 7:30 am

Problems setting up 4 galleries on 4 page

Hi, my first time here, as I'm a new Highslide user. Love your product, BTW!

//// EDIT: see my 2nd reply below. This has been resolved. /////

I have highslide working on a new site with single images, but after adding more images, I decided to use the gallery functionality so that the user doesn't have to open each image individually. I have four groups of images on one page that are on different topics, and I want to have each group in a gallery so each gallery only shows those particular images.

I've kinda got it working. The first group on the page works as expect, but the other three do not. I found this post (https://forum.highcharts.com/viewtopic.php?f=1&p=51553) which is almost identical, but I 'think' I've got the correct highslide.config.js file on my server. Before I get to my code, a couple of questions:

(1) do the groups have to be called 'group1', etc.?
(2) do you need to define a gallery config object if you are using the same global settings defined in those objects?
(3) can you define one gallery config object for th e4 groups, similar to the addSlideshow definition, or is each unique?

When I open any one of the GROUP1 images, I get the nav popup and the numbers say 1 of 4 (there are 4 in group1). But when I open any image in groups 2-3, Idon't get the nav popup, but do get numbers that read 1 of 13 (there are a total of 13 images in these three groups.), instead of, say, 1 of 6 for GROUP2. Not sure what I'm doing wrong.

Here is my highslide.config.js:

hs.graphicsDir = '../highslide/graphics/';
hs.showCredits = false;
hs.outlineType = 'rounded-black';
hs.dimmingOpacity = 0.9;
hs.dimmingDuration = 200;
hs.fadeInOut = true;
hs.expandDuration = 350;
hs.align = 'center';
hs.allowMultipleInstances = false;
hs.blockRightClick = true;
hs.captionEval = 'this.thumb.title';
hs.headingEval = 'this.thumb.alt';
hs.captionOverlay.position = 'below';
hs.dragByHeading = false;
hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
useOnHtml: true,
fade: 2 // fading the semi-transparent overlay looks bad in IE
});
hs.numberPosition = "caption";
hs.transitions = ["expand", "crossfade"];

// Add the slideshow controller
hs.addSlideshow({
slideshowGroup: ['group1', 'group2', 'group3', 'group4'],
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
className: 'large-dark',
opacity: 0.6,
position: 'bottom center',
offsetX: 0,
offsetY: -15,
hideOnMouseOut: true
}
});

// gallery config object
var config1 = {
slideshowGroup: 'group1',
numberPosition: 'caption',
transitions: ['expand', 'crossfade']
};

// gallery config object
var config2 = {
slideshowGroup: 'group2',
numberPosition: 'caption',
transitions: ['expand', 'crossfade']
};

// gallery config object
var config3 = {
slideshowGroup: 'group3',
numberPosition: 'caption',
transitions: ['expand', 'crossfade']
};

// gallery config object
var config4 = {
slideshowGroup: 'group4',
numberPosition: 'caption',
transitions: ['expand', 'crossfade']
};


And here is my HTML snippet:

GROUP1
<a href="images/paisley_lg.jpg" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'group1' })">
<img class="imageleft" src="images/paisley.jpg" title="Photo of our Lead, Paisley Wanamaker"/>
</a>
.
.

GROUP2
<a href="images/makeup1_lg.jpg" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'group2' })">
<img class="imageleft" src="images/makeup1.jpg" title="Photo of our Lead, Paisley Wanamaker's, Makeup FX"/>
</a>
.
.

GROUP3
<a href="images/foley1_lg.jpg" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'group3' })">
<img class="imageleft" src="images/foley1.jpg" title="Foley pit, before start"/>
</a>
.
.

GROUP4
<a href="images/audio_lg.jpg" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'group4' })">
<img class="imageleft" src="images/audio.jpg" title="Dead Run Audio Mix timeline, 428 source clips, 100 tracks"/>
</a>
.
.

In my head I have:

<script type="text/javascript" src="../highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="../highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->
Last edited by GrizzlyAK on Tue Jun 06, 2017 11:00 pm, edited 1 time in total.
GrizzlyAK
Posts: 5
Joined: Sun Jun 04, 2017 7:30 am

Re: Problems setting up 4 galleries on 4 page

Oh, and just like in the other post, this works as expected locally, just not on my my web host (which is also Linux). I'm currently working on a test server, which is not a public domain, so using the IP directly. But this has never been a problem with anything I've done in the past. Is there anything in the HS code or JS that might be getting confused by this? I've verified that my highslide.config.js file is updating by changing the hs.dimmingOpacity value and seeing the change live on the server after an upload and refresh, so the file is there.
GrizzlyAK
Posts: 5
Joined: Sun Jun 04, 2017 7:30 am

Re: Problems setting up 4 galleries on 4 page

Doh! Never mind, figured it out. After changing the HTML of the page, adding the group 2-3 code to the onClick, I had failed to upload it. Just did and it is working PERFECT now!
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Problems setting up 4 galleries on 4 page

Glad you've got it working, but a few observations:

1. Don't bother with highslide-with-gallery.js, or any of the other subsets of the script. This will just cause you problems later, and you'll end up chasing your tail. Trust me on this one. The full script isn't very large, so stick to highslide-full.js or the minified version of the same, highslide-full.min.js.

2. You're defining variables for several gallery config objects, but then never using them. Delete all of it. You would use those only if you were using different settings for the different slideshow groups, and wanted a shorthand way of referring to each of them.

3. Similar situation here:

Code: Select all

hs.addSlideshow({
slideshowGroup: ['group1', 'group2', 'group3', 'group4'],
interval: 5000,
Since you're using the same settings for each group, just delete the slideshowGroup parameter - you don't need it:

Code: Select all

hs.addSlideshow({
interval: 5000,
Take a look at the packaged example titled mini-galleries.html. In that example, that line is commented out, so it's not doing anything.

4. You can call the slideshow groups whatever you like. The simple fact that each has a unique name is enough to keep the groups separate. You could call them just 1, 2, 3, and 4, or cat, dog, bird, and turtle.

5. Not sure why you're putting a "close X" on each image - the controlbar already includes a "close" icon. I would think that having two different icons, both of which do the same thing, would confuse your site visitors.

6. It's time to leave XHTML behind. It's obsolete, and dead. The Highslide JS examples are all ancient, so they're still using it, but it's way past time to switch to HTML5.

7. Last but not least, Highslide JS isn't really a "product" any longer. It's abandonware. There's no official support. The code is pretty long in the tooth (it's actually generating HTML tables on the fly), and has some serious limitations. If you're at all concerned with supporting small-display mobile devices, like smartphones, this script just isn't up to the task - navigation targets are too small, no swipe support, and if you need to use a "meta viewport" tag to make your thumbnail page work on small displays, you're in for some nasty surprises with the image expander. ;)
GrizzlyAK
Posts: 5
Joined: Sun Jun 04, 2017 7:30 am

Re: Problems setting up 4 galleries on 4 page

Hey, thanks for the great insight! I will heed your advice on the changes. I did realize that Highslide is no longer supported, but after looking at many other options, it seemed to best fit what I needed to do. If you have another option that you like better, please pass along. About XHTML, I was using an HTML5 doctype, but wasn't sure if it was safe with this code. If it is OK, I'll switch it back. As for the close X, I use it and removed the X from the control bar. I only show left and right arrows there as I find it much cleaner, and I liked the look of the small X top right.

Thanks again!!
Cheers,
Shane
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Problems setting up 4 galleries on 4 page

Besides the shortcomings I've already mentioned, the other big one is that if you want to include videos, you need to use an HTML expander, which is a fixed size. You can put a resize handle on it, but it's not responsive to the viewport. These days, that's tough to put up with.

In short, Highslide JS desperately needs a complete rewrite.

I've hunted for an up-to-date, fully supported lightbox script, and have found only "paid license" solutions (I'm developing free software for others to use, so that's not a good option). I wish Torstein hadn't dropped Highslide JS, but he was barely keeping the wolf from the door when that was his only product. It's hard to blame him for putting his efforts where the money is.

I'll PM you....
GrizzlyAK
Posts: 5
Joined: Sun Jun 04, 2017 7:30 am

Re: Problems setting up 4 galleries on 4 page

Yeah, I'm just using Vimeo for the video, which is painfully slow. I did use something called Sublime, which was nice, but it was abandoned too. I tried to respond to your PM, but looks like you have it turned off. Thanks for the info, I had looked at that one too.

Shane
MisterNeutron
Posts: 440
Joined: Sun Aug 18, 2013 11:20 am

Re: Problems setting up 4 galleries on 4 page

I don't remember turning off PM's, but sho' 'nuf, they were blocked. I was probably trying to evade a spammer. Opened again.

Return to “Highslide JS Usage”