Several galleries/slideshows on one page

[Barobert]

Slowly getting used to handle the great Highslide JS possibilities, I seem to be completely blind in getting more gallery/slideshows properly fitted on one page. I read many forum topics on multiple galleries etc. I tried to copy RoadRash's example on http://www.roadrash.no/hs-support/two-galleries.html and tried to find another way. Have I look at my page: http://www.bertbolle.com/drost/''Tester.htm .

Example A) For the two-galleries example I used two sets of three coloured squares. The expand nicely, captions are there, but no control bar and no thumbstrip.

Example B) The other set-up is two series of five thumbnails of old photos. They expand OK, but the captions come up whimsically. The control bar is OK, but there are two sets of thumbstrips next to each other, instead of one.

I think I must have messed up settings somewhere when trying to work with 'Slideshowgroup' and I seem to misunderstand something crucial. My settings are at http://www.bertbolle.com/drost/highslid ... .config.js , http://www.bertbolle.com/drost/highslide/highslide.css and http://www.bertbolle.com/drost/highslid ... de-full.js .

Barobert

[RoadRash]

You have conflicts between the stuff in your highslide.config.js file and the Highslide stuff placed between the head tags.
First – you should place all Highslide stuff inside the config file instead of some between the head tags and some in the config file.
Second – when using multiple thumbstrip galleries you need to add a var for each slideshowGroup.
For the first gallery:

Code: Select all

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

For the second gallery:

Code: Select all

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

etc

Each gallery must use different config settings added to the onclick – config1 for the first gallery, config2 for the second gallery etc.

Code: Select all

onclick="return hs.expand(this, config1 )"

Code: Select all

onclick="return hs.expand(this, config2 )"

My example page you refer to in your post doesn’t have that since it wasn’t made for thumbstrip galleries.

You also need to comment out the slideshowGroup for the addSlideshow (add double slash // in front of slideshowGroup) to add the controlbar and thumbstrip to all galleries, not only the gallery with slideshowGroup: 'group1':

Code: Select all

// Add the slideshow controller
hs.addSlideshow({
   //slideshowGroup: 'group1',
   interval: 5000,
   repeat: true,
   useControls: true,
   fixedControls: false,
   overlayOptions: {
      className: 'text-controls',
      opacity: '1',
      position: 'bottom center',
      offsetX: '0',
      offsetY: '-60',
      relativeTo: 'viewport',
      hideOnMouseOut: false
   },
   thumbstrip: {
      mode: 'horizontal',
      position: 'bottom center',
      relativeTo: 'viewport'
   }
});


I’ve made you an example page. All the Highslide stuff is placed between the head tags, but you can put it inside your config file. Replace the addSlideshow part and the var config1 with the stuff from my example page.
http://www.roadrash.no/hs-support/4gall ... strip.html

[Barobert]

Hello RoadRash,

Thank you so much. I am jealous about your talent and knowledge and I feel a bit embarrassed that I take so much of your time. You must have an endless patience.

And yes, it all works now. Have I quick look http://www.bertbolle.com/drost/''Tester.htm . Besides, the Image Tooltips work too, just hover over the thumbs in the album. This is how I want my old photo's presented. The mini-thumbnail as an appetizer, the Image Tooltip as a foretaste and the large Highslide image as the main course.

One hiccup remains. The captions in Gallery 4 have gone, although I mentioned the title like I did in the other three galleries, where the captions appear nicely, according hs.captionEval = 'this.a.title'; . Perhaps a conflict with the Image Tooltips? Anyhow, I tried to get the caption from the Thumbnail's Alt. No result. Then I tried the Thumbnail's title, same (I had adjusted the hs. stuff in the config. file accordingly). My last option was to get the caption from a Subsequent Div, which eventually brought up the caption, but also unwanted text next to the thumbnail. I left one thumbnail in Gallery 4 to show you what I mean. Any idea how to solve this?

Another problem I solved myself. I seemed to have lost the outer boxes around the thumbnail pics. I had given them no background, so the old album paper in Gallery 4 would be visible and make the thumbnails nicely spread over the album page. I think I found the solution by adding the <ul> en <li> tags. Please check if I did it the correct way. If you know a better or simpler way to do it, please let me know.

Ciao!

Barobert

[RoadRash]

Hello Barobert,

I can’t see caption text for any of your images except for the first image in gallery 4. And I can’t find hs.captionEval = 'this.a.title' anywhere – either in the config file or between the head tags. Try adding back hs.captionEval = 'this.a.title'.

Wrong coding for the caption causes the unwanted text next to the thumbnail. You have:

Code: Select all

<span class="highslide-caption">Caption from a subsequent div</span>

You need to use div instead of span:

Code: Select all

<div class="highslide-caption">Caption from a subsequent div</div>

[Barobert]

Hello RoadRash,

Uploadig some of my files seems to have gone wrong. Strange. Did id again. Anyhow, the hs.captionEval = 'this.a.title' is back now. All captions in Galleries 1, 2 and 3 come up nicely, plus the first one of Gallery 4, which is OK.

I changed the <span into <div etc. However, the problem of the unwanted text next to the thumbnail still remains.

Barobert

[RoadRash]

Hello Barobert,

There seems to be something in the tooltip js that breaks the hs.captionEval function in Highslide, so you need to use a caption div instead.
To get rid of the unwanted text next to the thumb you need to add back display: none; to the CSS for the highslide-caption.

Code: Select all

.highslide-caption {
   display: none;
   color: #300;
   font-family: serif !important;
   text-align: center;
   font-size: 14pt !important;
   padding: 2px;
}

And the question I forgot to answer in your previous post:

I seemed to have lost the outer boxes around the thumbnail pics.

You can use ul/li as you did for gallery 4, or you can try adding margin to .highslide img in the highslide.css file.

Code: Select all

.highslide img {
   border: 1px solid #D0D0D0;
   margin: 10px;
}

[Barobert]

Hello RoadRash,

Unfortunately changing the CSS settings regarding .highslide-caption (adding dispaly: none;) as you suggested to me, didn't give the wanted result. Still that nasty text comes up next to the thumb. Sorry to bother you again. Let's keep .

Barobert

[RoadRash]

Caused by a typo - you wrote dispaly: none; instead of display: none;

[Barobert]

Oh dear, oh dear, oh dear...

You made me grovel. I have been cooking tonight and a proper chef uses wine with that. However, never do such a thing while seriously corresponding with RoadRash! I made a mushroom soup and something more. My wife loved it. We have great locally grown Portabello's here (old Swiss Browns), which I like to work with because of their strong flavour. Goes well with good local wine form our town of Denmark. But Aussie wine also can cause typos.

Yes RoadRash, shame on me, I saw it and changed it. Thanks.

Barobert

[RoadRash]

Sounds like a delicious reason for a typo!

[jsdummyfornow]

You have conflicts between the stuff in your highslide.config.js file and the Highslide stuff placed between the head tags.
First – you should place all Highslide stuff inside the config file instead of some between the head tags and some in the config file.
Second – when using multiple thumbstrip galleries you need to add a var for each slideshowGroup.
For the first gallery:

Code: Select all

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

For the second gallery:

Code: Select all

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

etc

Each gallery must use different config settings added to the onclick – config1 for the first gallery, config2 for the second gallery etc.

Code: Select all

onclick="return hs.expand(this, config1 )"

Code: Select all

onclick="return hs.expand(this, config2 )"

My example page you refer to in your post doesn’t have that since it wasn’t made for thumbstrip galleries.

You also need to comment out the slideshowGroup for the addSlideshow (add double slash // in front of slideshowGroup) to add the controlbar and thumbstrip to all galleries, not only the gallery with slideshowGroup: 'group1':

Code: Select all

// Add the slideshow controller
hs.addSlideshow({
   //slideshowGroup: 'group1',
   interval: 5000,
   repeat: true,
   useControls: true,
   fixedControls: false,
   overlayOptions: {
      className: 'text-controls',
      opacity: '1',
      position: 'bottom center',
      offsetX: '0',
      offsetY: '-60',
      relativeTo: 'viewport',
      hideOnMouseOut: false
   },
   thumbstrip: {
      mode: 'horizontal',
      position: 'bottom center',
      relativeTo: 'viewport'
   }
});


I’ve made you an example page. All the Highslide stuff is placed between the head tags, but you can put it inside your config file. Replace the addSlideshow part and the var config1 with the stuff from my example page.
http://www.roadrash.no/hs-support/4gall ... strip.html

Hi there! I love this program but it's cracking my head apart. I have been struggling with odd experiments and I have gotten this far:
http://www.some-nonexistent-domain.com/ ... hotos.html

It worked until I did something, but I don't know what. I have basically created some kind of Frankenstein monster by mixing your code and that other fellow's... I'd like to add the {slideshow} and 'config' stuff but which document does it go in? And, which is the "config" file? Sorry for being a scripting dummy... By the way, the fourth gallery; the one with the "people" loads and works correctly, I think, except that I would like the slideshow to autostart as soon as the thumbnail is clicked... Even better would be to get them display with the thumbnails above... Like I said, I love this program. I am going to buy the "unlimited" license this week... The online wizard is great too, but it seems like the best shot at real flexibility is with the do-it-yourself scripting so ... good thing they make aspirin...

[jsdummyfornow]

Well, I stuck with it and it seems to be working now, except that the first picture in the second book is truncated for some reason and I still can't get it to autoload the slideshow upon clicking a thumbnail but I'll get it eventually. I really love this program...

[RoadRash]

Hi jsdummyfornow, (but not for long )

I’m not exactly sure what you are trying to achieve… Do you want thumbstrips for your galleries? As for now you have no code for thumbstrip. And autoload – do you mean autoplay, or should the gallery open automatically on pageload?

If you choose one of the galleries from the barebones samples we can help you to make four of them in the same page.

You can also use the Highslide Editor to make a gallery with the look and feel you want. (The earlier mentioned highslide.config.js file comes from the Highslide Editor). TheHighslide Editor can’t make several galleries in the same page, but if you make one gallery with the look and feel you want, we can help you add more galleries to the same page.

[jsdummyfornow]

Hi jsdummyfornow, (but not for long )

I’m not exactly sure what you are trying to achieve… Do you want thumbstrips for your galleries?

Originally I did, and I still might, but I like the idea of an organized line of 'first thumb' images which each launch a slideshow as it is now doing.

As for now you have no code for thumbstrip. And autoload – do you mean autoplay, or should the gallery open automatically on pageload?

Well, I do mean autoplay -- if there were multiple galleries on a page it might be weird if the first one opened automatically. So what I mean is, when you click any of the gallery thumbnail images the slideshow should autoplay w/o needing to hit the spacebar or use the control thingie to start it. I can see from your example:

<a class="highslide" href="../samples/full1.jpg"
onclick="return hs.expand(this, { autoplay:true })">
<img src="../samples/thumb1.jpg" alt=""/>
</a>
<a class="highslide" href="../samples/full3.jpg"
onclick="return hs.expand(this)">
<img src="../samples/thumb3.jpg" alt=""/>
</a>

how it would work, but I played around with it and now that works too. This is amazing. As soon as I figure out how to change the duration of the individual slides I'll be almost golden.

Question: for some reason, the page substituted -- ' -- instead of -- " -- in some places, including around images and for the -- alt -- stuff. Is that critical?

If you choose one of the galleries from the barebones samples we can help you to make four of them in the same page.

I might do that; the thumbstrip over one was the one I liked the best, although this is actually the look I want the most:http://www.lapenda.net/ilha.html although I don't necessarily need the "Ken Burns" transitions...

You can also use the Highslide Editor to make a gallery with the look and feel you want. (The earlier mentioned highslide.config.js file comes from the Highslide Editor). TheHighslide Editor can’t make several galleries in the same page, but if you make one gallery with the look and feel you want, we can help you add more galleries to the same page.

When I was messing around with putting the thumbnails into a table, somehow my very careful organization of the galleries got screwed up badly. Now the code shows the first thumbs all over the place but oddly it still functions perfectly. I'm afraid to go in and straighten out the script now for fear of what I might do to its functionality!

I'm really enjoying this program.

[RoadRash]

Here’s an example gallery similar to the on you linked to: http://www.roadrash.no/hs-support/4gall ... custom.htm

If you want to move the gallery into a table you should move all the markup for each gallery into each table cell – both visible thumb and everything inside the hidden container.