See attached image. My problem is that the gallery image starts the slideshow but the first image shows twice. Obviously that's because I already have the image linking to the first image, but I can't figure out a way to link to the first hidden image. Is there any way to fix that? Should I be starting the gallery in a different way?
Here is the javascript on the page:
Code: Select all
[color=#0080BF]<script type="text/javascript" src="highslide/highslide-with-gallery.packed.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.graphicsDir = 'highslide/graphics/';
hs.showCredits = false;
hs.outlineType = 'custom';
hs.dimmingOpacity = 0.5;
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.zIndexCounter = '999999';
hs.allowMultipleInstances = false;
hs.captionEval = 'this.a.title';
// Add the slideshow controller
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .5,
position: 'top center',
offsetX: '0',
offsetY: '-10',
hideOnMouseOut: true,
}
});
</script>[/color]
Code: Select all
<div class="galleryWrapper">
<a id="thumb2" href="galleryImages/Events.jpg" class="highslide" onclick="return hs.expand(this, { slideshowGroup: 'gallery2', autoplay:true})" title=""> <img src="galleryImages/tmb/Events.jpg" alt="Highslide JS" title="Click to enlarge" /></a>
<p>2Events ÔÇô Our Home is always safe and comfortable for our children.</p>
<div style="display: none;">
[hilight]<a href="galleryImages/Events.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb2', slideshowGroup: 'gallery2' })" title=""></a>[/hilight]
<a href="galleryImages/Events2.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb2', slideshowGroup: 'gallery2' })" title=""></a>
</div>
</div>
Paul