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]-->