The gallery code was created using the Highslide Editor. I can get it working if I disable the single image popup, but when I enable it both the single image or the gallery only show the single image.
See this page: http://www.pts.bm/products/TileWithGallery.html
Here is the config code:
Code: Select all
/**
* Site-specific configuration settings for Highslide JS
*/
hs.graphicsDir = 'highslide/graphics/';
hs.showCredits = false;
hs.outlineType = 'custom';
hs.dimmingOpacity = 0.65;
hs.fadeInOut = true;
hs.align = 'center';
hs.captionEval = 'this.a.title';
// Add the slideshow controller
hs.addSlideshow({
slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
className: 'controls-in-heading',
opacity: '0.75',
position: 'top center',
offsetX: '0',
offsetY: '0',
hideOnMouseOut: true
}
});
// gallery config object
var config1 = {
slideshowGroup: 'group1',
thumbnailId: 'gallery-opener',
numberPosition: 'caption',
transitions: ['expand', 'crossfade'],
autoplay: true
};
Code: Select all
<a id="thumb1" cl href="/upload/gallery/Tile_29.jpg" class="highslide" onclick="return hs.expand (this, { slideshowGroup: 'first-group' })"> <img src="/admin/showresize.aspx?img=Tile_29.jpg&w=275&h=275" alt="Highslide JS" title="Click to enlarge" /></a>
Code: Select all
<a id="gallery-opener" href="javascript:;" onclick="document.getElementById('thumb1').onclick()">
<img src="images/miniGalleryLink.jpg" width="122" height="116" border="0" /></a>
<div class="hidden-container">
<a id="thumb1" href="galleryImages/Ardesia.jpg" class="highslide"
title="Caption from the anchor's title attribute"
onclick="return hs.expand(this, config1 )">
<img src="galleryImages/Ardesia.jpg" alt=""/>
</a>
Can anyone please Help