It is currently Sun Oct 26, 2014 7:10 am Advanced search

Several galleries/slideshows on one page

Technical support, bug reports, feature requests and more.

Several galleries/slideshows on one page

Postby Barobert » Wed Aug 05, 2009 9:38 am

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
User avatar
Barobert
 
Posts: 52
Joined: Mon Jul 06, 2009 5:13 am
Location: Denmark, Western Australia

Re: Several galleries/slideshows on one page

Postby RoadRash » Wed Aug 05, 2009 2:41 pm

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
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Several galleries/slideshows on one page

Postby Barobert » Thu Aug 06, 2009 3:20 am

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
User avatar
Barobert
 
Posts: 52
Joined: Mon Jul 06, 2009 5:13 am
Location: Denmark, Western Australia

Re: Several galleries/slideshows on one page

Postby RoadRash » Thu Aug 06, 2009 9:40 am

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>
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Several galleries/slideshows on one page

Postby Barobert » Thu Aug 06, 2009 10:15 am

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
User avatar
Barobert
 
Posts: 52
Joined: Mon Jul 06, 2009 5:13 am
Location: Denmark, Western Australia

Re: Several galleries/slideshows on one page

Postby RoadRash » Thu Aug 06, 2009 11:27 am

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;
}
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Several galleries/slideshows on one page

Postby Barobert » Thu Aug 06, 2009 1:29 pm

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 :lol: :lol: .

Barobert
User avatar
Barobert
 
Posts: 52
Joined: Mon Jul 06, 2009 5:13 am
Location: Denmark, Western Australia

Re: Several galleries/slideshows on one page

Postby RoadRash » Thu Aug 06, 2009 1:52 pm

Caused by a typo - you wrote dispaly: none; instead of display: none; :D
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Several galleries/slideshows on one page

Postby Barobert » Thu Aug 06, 2009 2:05 pm

Oh dear, oh dear, oh dear... :oops:

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
User avatar
Barobert
 
Posts: 52
Joined: Mon Jul 06, 2009 5:13 am
Location: Denmark, Western Australia

Re: Several galleries/slideshows on one page

Postby RoadRash » Thu Aug 06, 2009 2:59 pm

Sounds like a delicious reason for a typo! :lol:
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Several galleries/slideshows on one page

Postby jsdummyfornow » Sun Aug 30, 2009 6:24 am

RoadRash wrote: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...
_____________________________________________
Our motto: "If it aint' broke, break it!"
User avatar
jsdummyfornow
 
Posts: 22
Joined: Sun Aug 30, 2009 5:57 am

Re: Several galleries/slideshows on one page

Postby jsdummyfornow » Sun Aug 30, 2009 9:16 am

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...
_____________________________________________
Our motto: "If it aint' broke, break it!"
User avatar
jsdummyfornow
 
Posts: 22
Joined: Sun Aug 30, 2009 5:57 am

Re: Several galleries/slideshows on one page

Postby RoadRash » Sun Aug 30, 2009 2:11 pm

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.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Several galleries/slideshows on one page

Postby jsdummyfornow » Sun Aug 30, 2009 5:51 pm

RoadRash wrote: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.
_____________________________________________
Our motto: "If it aint' broke, break it!"
User avatar
jsdummyfornow
 
Posts: 22
Joined: Sun Aug 30, 2009 5:57 am

Re: Several galleries/slideshows on one page

Postby RoadRash » Sun Aug 30, 2009 11:08 pm

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.
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
 
Posts: 8225
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Next

Return to Highslide JS Usage

Who is online

Users browsing this forum: Exabot [Bot] and 4 guests