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({
[hilight]slideshowGroup: 'group1',[/hilight]
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 [hilight]id="thumb1"[/hilight] 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 [hilight]id="thumb2"[/hilight] href="highslide/images/large/a11-viwd-mc-05-676.jpg" class="highslide"
title=""
onclick="return hs.expand(this, [hilight]config2[/hilight] )">
<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;
[hilight]margin-top: 1px;[/hilight]
margin-right: auto;
margin-left: auto;
}