PaulMait
Posts: 4
Joined: Thu Aug 26, 2010 4:36 pm

Problem with gallery images from database

I have a page for image galleries. Each image opens the images belonging to the gallery.
See attached image.
page example
page example
ScreenSnapz-gallery.png (228.12 KiB) Viewed 3987 times
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]
This is one of the galleries generated by my php. The hidden images are generated from a repeating field.

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>
Any help would be greatly appreciated.
Paul
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Problem with gallery images from database

Hi Paul,

The correct approach would be to remove the first image in the div with display: none; ÔÇô the duplicated image (IÔÇÖve highlighted it in your code).
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
PaulMait
Posts: 4
Joined: Thu Aug 26, 2010 4:36 pm

Re: Problem with gallery images from database

Thanks for the info.

I realized that was the problem but couldn't figure out how to remove it from the record set generated by my php code.

Figured that out eventually.

Return to “Highslide Editor”