It is currently Thu Sep 18, 2014 7:45 pm Advanced search

Multiple Galleries on one page

Help for using the Highslide Editor, the visual way of setting up Highslide.

Multiple Galleries on one page

Postby johnduckworth » Fri Nov 26, 2010 10:40 pm

I am slowly getting to understand this excellent program you have written, but still struggle with some of the terminology.
I have a gallery that I think is perfect for my wishes, and I would like to put at least 3 or 4 galleries on one page. I have read (and reread!) article http://highslide.com/forum/viewtopic.php?f=7&t=7483 and article viewtopic.php?f=4&t=4682 but do not quite understand what I must do.

I have created a test page here:
http://www.duckworthhouse.com/2Gal/test2.htm

Each gallery works perfectly except that when in slide show mode it plays all the slides, rather than only the ones in each gallery.

I have created each gallery in Editor. Even though I saved each gallery as gal1 and gal2, it seems that when ÔÇ£unzippedÔÇØ all the images have gone into the same folder, rather than kept separate.

In article 7483, you said:
Each button (View examples) must have a unique id ÔÇô this id must be used as thumbnailId.
The first image for each gallery must also have a unique id ÔÇô this id must be used in the document.getElementById code for the corresponding button.


How do I create this id? Does each slide have a thumbnailID? Is it the code in HTML? Or do I have to open a .js file or .css file and modify those. If so which one? (I just do not understand!)

If it is the code for HTML, the code for gallery 1 that Editor produced (both step2 and step 3 combined) is: (The code produced for gallery 2 is almost identical!)
Code: Select all
[i]<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]-->
<h3>Gallery 1</h3>
<div class="highslide-gallery">
   <ul>
   <li>
   <a href="highslide/images/large/1473470_1.jpg" class="highslide"
         title=""
         onclick="return hs.expand(this, config1 )">
      <img src="highslide/images/thumbs/1473470_1.jpg"  alt=""/>
   </a>
   </li>
   <li>
   <a href="highslide/images/large/1473470_2.jpg" class="highslide"
         title=""
         onclick="return hs[/i].expand(this, config1 )">
      <img src="highslide/images/thumbs/1473470_2.jpg"  alt=""/>
   </a>
   </li>
   <li>
   <a href="highslide/images/large/lagoon.jpg" class="highslide"
         title=""
         onclick="return hs.expand(this, config1 )">
      <img src="highslide/images/thumbs/lagoon.jpg"  alt=""/>
   </a>
   </li>
   <li>
   <a href="highslide/images/large/leopardcat.jpg" class="highslide"
         title=""
         onclick="return hs.expand(this, config1 )">
      <img src="highslide/images/thumbs/leopardcat.jpg"  alt=""/>
   </a>
   </li>
   </ul>
   <div style="clear:both"></div></div>


In article 7483, you said:

Markup for your first gallery:
Code: Select all
<div class="highslide-gallery portfolio">
<a id="opener1" href="javascript:;" onclick="document.getElementById('thumb1').onclick(); return false;"><img src="i/button-view-examples.png" alt=`View Examples` /></a>
<div style="display: none;">

<a id="thumb1" class='highslide' href='i/windows/casement/1.jpg' onclick="return hs.expand(this, {thumbnailId: 'opener1', slideshowGroup: 1 })"><img src="i/windows/casement/1.jpg" alt="" /></a>

<a class='highslide' href='i/windows/casement/2.jpg' onclick="return hs.expand(this, {thumbnailId: 'opener1', slideshowGroup: 1 })"><img src="i/windows/casement/2.jpg" alt="" /></a>

<a class='highslide' href='i/windows/casement/3.jpg'
onclick="return hs.expand(this, {thumbnailId: 'opener1', slideshowGroup: 1 })"><img src="i/windows/casement/3.jpg" alt="" /></a>

</div>
</div>


Should I be putting this sort of code into my HTML instead of the code that the editor produced?
What does ÔÇ£Code : Select allÔÇØ mean at the start of the instructions?

In the code that the Editor produced, I do not see anything like
Code: Select all
<a id="opener1" href="javascript:;" onclick="document.getElementById('thumb1').onclick(); return


Should I copy this into my HTML code, and if so should I put it in ÔÇ£step 2ÔÇØ or ÔÇ£Step 3ÔÇØ?
Lastly, do I have to go through the code and put the yellow highlighted bits into each line where there is a slide?
I know I am asking a lot, but I love this program and would dearly love it to work on my site
Thank you.
John
johnduckworth
 
Posts: 8
Joined: Wed Nov 24, 2010 9:47 pm

Re: Multiple Galleries on one page

Postby RoadRash » Fri Feb 18, 2011 5:41 am

IÔÇÖve answered your other post: viewtopic.php?f=7&t=9473

Some clarifications
This post doesnÔÇÖt refer to the same type of gallery that you are using: http://highslide.com/forum/viewtopic.php?f=7&t=7483 This post was about how to open a gallery from a thumbnail that isnÔÇÖt a part of the gallery, and thatÔÇÖs why he needed to use thumbnailId and document.getElementById(). You donÔÇÖt need to use these when all your thumbnails belongs to the gallery.

The second half of this FAQ: viewtopic.php?f=4&t=4682 (from If you created your gallery in the Editor) applies to your issue; how to have two galleries in the same page.

You asked: "What does ÔÇ£Code : Select allÔÇØ mean at the start of the instructions?"
Clicking ÔÇ£SELECT ALLÔÇØ will mark all the text inside the code box so you easily can copy it and paste it where you need to use it.
Hilde
Highslide Support Team

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

Re: Multiple Galleries on one page

Postby muriel » Tue Sep 27, 2011 12:17 pm

Hi there.
I am depressed! Before to give up I try one more time with you. I try to set 2 highslide gallery in one page. I can't. I try all your informations, probably mixed every things at the end!
viewtopic.php?f=7&t=7483
http://www.highslide.com/forum/viewtopic.php?f=4&t=4682
http://www.highslide.com/examples/mini-galleries.html
Please be more specific about where to copy or change the information (highslide.config.js/body/head). I couldn't found for the head the information on highslide.js file for the parameter hs.graphicsDir. But I found the contralbar on highslide.config.js for the control, config and group...
my page is http://interclubnice.fr/france.html
Thanks a lot and sorry to be so beginner!
Muriel
muriel
 
Posts: 5
Joined: Tue Sep 27, 2011 11:49 am

Re: Multiple Galleries on one page

Postby RoadRash » Tue Sep 27, 2011 4:35 pm

Hi Muriel,

I've answered your other post with the same topic: viewtopic.php?f=7&t=12592
Hilde
Highslide Support Team

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


Return to Highslide Editor

Who is online

Users browsing this forum: No registered users and 2 guests