It is currently Sat Apr 19, 2014 3:48 am Advanced search

Problem with gallery images from database

Help for using the Highslide Editor, the visual way of setting up Highslide.

Problem with gallery images from database

Postby PaulMait » Fri Apr 08, 2011 4:47 pm

I have a page for image galleries. Each image opens the images belonging to the gallery.
See attached image.
ScreenSnapz-gallery.png
page example
ScreenSnapz-gallery.png (228.12 KiB) Viewed 2457 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
PaulMait
 
Posts: 4
Joined: Thu Aug 26, 2010 6:36 pm

Re: Problem with gallery images from database

Postby RoadRash » Sat Apr 09, 2011 8:40 am

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
User avatar
RoadRash
 
Posts: 8183
Joined: Tue Jul 15, 2008 8:43 pm
Location: Fredrikstad, Norway

Re: Problem with gallery images from database

Postby PaulMait » Mon Apr 18, 2011 2:54 pm

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.
PaulMait
 
Posts: 4
Joined: Thu Aug 26, 2010 6:36 pm


Return to Highslide Editor

Who is online

Users browsing this forum: No registered users and 1 guest