Highslide JS/highslide with gallerie

[muriel]

HELLLLLPPPPPP


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

[RoadRash]

Hi Muriel,

First you need to use highslide-full.js instead of highslide-with-gallery.js. This is necessary because you are opening the galleries from an image map.
Replace this line in the head of your html page:

Code: Select all

<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>

With this:

Code: Select all

<script type="text/javascript" src="highslide/highslide-full.js"></script>

Find this in your highslide.config.js file:

Code: Select all

var config1 = {
   slideshowGroup: 'group1',
   numberPosition: 'heading',
   transitions: ['expand', 'crossfade']
};

And replace it with this:

Code: Select all

var config1 = {
   slideshowGroup: 'group1',
   thumbnailId: 'gallery-opener',
   numberPosition: 'heading',
   transitions: ['expand', 'crossfade']
};

Then add this at the bottom of your highslide.config.js file for the second gallery:

Code: Select all

var config2 = {
   slideshowGroup: 'group2',
   thumbnailId: 'gallery-opener2',
   numberPosition: 'heading',
   transitions: ['expand', 'crossfade']
};

Still in the highslide.config.js file: remove the highlighted line from this part of the coding:

Code: Select all

// Add the slideshow controller
hs.addSlideshow({
   slideshowGroup: 'group1',
   interval: 2500,
   repeat: true,
   useControls: true,
   fixedControls: 'fit',
   overlayOptions: {
      className: 'text-controls',
      opacity: 1,
      position: 'bottom center',
      offsetX: 50,
      offsetY: -10,
      relativeTo: 'viewport',
      hideOnMouseOut: false
   },
   thumbstrip: {
      mode: 'vertical',
      position: 'leftpanel',
      relativeTo: 'image'
   }
});

In your HTML page - this part of your code is correct:

Code: Select all

<area shape="rect" coords="735,300,883,334" id="gallery-opener2" href="javascript:;" onclick="document.getElementById('thumb2').onclick()"/>
<area shape="rect" coords="433,306,592,340" id="gallery-opener" href="javascript:;" onclick="document.getElementById('thumb1').onclick()" />

I don’t know which images belongs to which gallery - I assume some of them belongs to the first gallery (Margot Bailet) and some of the to the second gallery (Nastasia Noens)?
The anchor (a tag) for the first image in the first gallery must have id="thumb1".
This is what you have now:

Code: Select all

<div class="hidden-container">
   [color=#FF0000]<a id="thumb1"[/color]
   <a href="highslide/images/large/a11-viwd-mc-05-676.jpg" class="highslide"
         title=""
         onclick="return hs.expand(this, config1 )">

      <img src="highslide/images/thumbs/a11-viwd-mc-05-676.jpg"  alt=""/>
   </a>

This will not work because id="thumb1" is added to an unfinished anchor above the actually markup for the image.
This is how it must look:

Code: Select all

<div class="hidden-container">
   <a id="thumb1" href="highslide/images/large/a11-viwd-mc-05-676.jpg" class="highslide"
         title=""
         onclick="return hs.expand(this, config1 )">

      <img src="highslide/images/thumbs/a11-viwd-mc-05-676.jpg"  alt=""/>
   </a>

Then you need to add id="thumb2" to the anchor for the image you want to be the first image for the second gallery. You also need to replace config1 with config2 in the onclick event for all images that belong to the second gallery.
Example:

Code: Select all

   <a id="thumb2" href="highslide/images/large/a11-viwd-mc-05-676.jpg" class="highslide"
         title=""
         onclick="return hs.expand(this, config2 )">

      <img src="highslide/images/thumbs/a11-viwd-mc-05-676.jpg"  alt=""/>
   </a>

The last issue with your page is that none of the elements between the body tag and the opening anchor for the galleries have any margins. Because of this, the galleries will expand from the wrong spot in the page. You can fix this by adding margin-top: 1px; to #lvdc

Code: Select all

#lvdc {
   height: 677px;
   width: 1060px;
   margin-top: 1px;
   margin-right: auto;
   margin-left: auto;
}

[muriel]

Thanks so much for you help Hilde. Your informations were very clear and very easy to follow.
I still depress because on : http://interclubnice.fr/france.html it doesn't work at all. So I did a new try on : http://interclubnice.fr/comite.html
including your informations. I noticed when I add :
"title=""
onclick="return hs.expand(this, config2 )">
<img src= etc...
on the second gallery then the slideshow desapere : I have the same result than with : http://interclubnice.fr/france.html. So I didn't add it.
I try many things....I still see all the little images on the left and my first gallery doesnt stop.
Is it because I named my file : highslide and higslide2 and highslide-example-2.html ?
Hope you have the solution...

[RoadRash]

Regarding this page: http://interclubnice.fr/france.html
You missed this part from my previous post:

Then add this at the bottom of your highslide.config.js file for the second gallery:

Code: Select all

var config2 = {
   slideshowGroup: 'group2',
   thumbnailId: 'gallery-opener2',
   numberPosition: 'heading',
   transitions: ['expand', 'crossfade']
};

Regarding this page: http://interclubnice.fr/comite.html
The onclick events for each image for the second gallery must have config2 instead of config1.

Code: Select all

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

[muriel]

Dear Hilde,
Thanks so much for your patience and answer.
I did try to add on http://interclubnice.fr/comite.html :

Code: Select all

"title=""
onclick="return hs.expand(this, config2 )">
<img src= etc...

BUT IT DID NOT WORK; SO
I did write on highslide-custom.js the part you mentionned in your first answer.
Here is what I have on the second gallery/highslide2/highslide-custom.js :

Code: Select all

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

var config2 = {
   slideshowGroup: 'group2',
   thumbnailId: 'gallery-opener2',
   numberPosition: 'heading',
   transitions: ['expand', 'crossfade']
};

THEN I HAVE TO DO SOMETHING ELSE :
Maybe if you do not see it, it is because you look at the highslide/highslide-custom.js IN THE HEAD :

Code: Select all

<script type="text/javascript" src="highslide/highslide-full.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]-->

SO IF I CHANGE "highslide/highslide.config.js"
with
"highslide2/highslide.config.js"
It will work....

YES IT DOES!!!!!!!!!!!!!!!!!!

SO I need to add more than 2 slides show in the same page, how will I do? because the head will not receive "highslide2/highslide.config.js" ; "highslide3/highslide.config.js" , "highslide4/highslide.config.js"
I will need to add a gallery for each girl at the
beginning of the ski season. And I have a full page that will receive many galleries..CAN I DO THE SAME WAY? i don't thnik so....

Muriel

[RoadRash]

You can use the same highslide.config.js file for both your pages (comite.html and france.html), there’s no need for a second, third and fourth folder because of the highslide.config.js file.
For now, when you have two galleries in each page, the highslide.config.js file must look like this:

Code: Select all

/**
*   Site-specific configuration settings for Highslide JS
*/
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'custom';
hs.dimmingOpacity = 0.75;
hs.transitionDuration = 300;
hs.align = 'center';
hs.marginBottom = 70;
hs.marginLeft = 100;
hs.captionEval = 'this.a.title';
hs.captionOverlay.position = 'below';
hs.registerOverlay({
   html: '<div class="closebutton" onclick="return hs.close(this)" title="Fermer"></div>',
   position: 'top right',
   useOnHtml: true,
   fade: 2 // fading the semi-transparent overlay looks bad in IE
});

// Add the slideshow controller
hs.addSlideshow({
   
   interval: 2500,
   repeat: true,
   useControls: true,
   fixedControls: 'fit',
   overlayOptions: {
      className: 'text-controls',
      opacity: 1,
      position: 'bottom center',
      offsetX: 50,
      offsetY: -10,
      relativeTo: 'viewport',
      hideOnMouseOut: false
   },
   thumbstrip: {
      mode: 'vertical',
      position: 'leftpanel',
      relativeTo: 'image'
   }
});

// French language strings
hs.lang = {
   cssDirection: 'ltr',
   loadingText: 'Chargement...',
   loadingTitle: 'Cliquer pour annuler',
   focusTitle: 'Cliquer pour amener au premier plan',
   fullExpandTitle: 'Afficher à la taille réelle',
   creditsText: 'Propulsé par <i>Highslide JS</i>',
   creditsTitle: 'Site Web de Highslide JS',
   previousText: 'Précédente',
   nextText: 'Suivante',
   moveText: 'Déplacer',
   closeText: 'Fermer',
   closeTitle: 'Fermer (esc ou Échappement)',
   resizeTitle: 'Redimensionner',
   playText: 'Lancer',
   playTitle: 'Lancer le diaporama (barre d\'espace)',
   pauseText: 'Pause',
   pauseTitle: 'Suspendre le diaporama (barre d\'espace)',
   previousTitle: 'Précédente (flèche gauche)',
   nextTitle: 'Suivante (flèche droite)',
   moveTitle: 'Déplacer',
   fullExpandText: 'Taille réelle',
   number: 'Image %1 sur %2',
   restoreTitle: 'Cliquer pour fermer l\'image, cliquer et faire glisser pour déplacer, utiliser les touches flèches droite et gauche pour suivant et précédent.'
};

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

var config2 = {
   slideshowGroup: 'group2',
   thumbnailId: 'gallery-opener2',
   numberPosition: 'heading',
   transitions: ['expand', 'crossfade']
};

When you need to add a third gallery to one of your pages, you have to add this to the highslide.config.js file:

Code: Select all

var config3 = {
   slideshowGroup: 'group3',
   thumbnailId: 'gallery-opener3',
   numberPosition: 'heading',
   transitions: ['expand', 'crossfade']
};

Give the opening area tag for the third gallery

Code: Select all

id="gallery-opener3"

and an onclick event like this:

Code: Select all

onclick="document.getElementById('thumb3').onclick()"

Give the anchor for the first image in the third gallery

Code: Select all

id="thumb3"

and use this onclick event for all images in the third gallery:

Code: Select all

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

[muriel]

Thank you so much for your help. It worked well.
Muriel