Page 1 of 1

Duplictate Slide Show Controls Displayed

Posted: Sun Dec 02, 2018 1:40 pm
by Braemoor
I'm probably being dumb - if so, apologies....

I have a fairly simple PHP-generated page of photogaphs. When I select a photograph, the slide show controls are displayed, but in duplicate. Any idea of what I have done wrong?

https://braemoor.co.uk/hebden/oldimages.php

My HS parameters are:

hs.graphicsDir = 'highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.expandDuration = 700;
hs.allowMultipleInstances = false;

// Add the controlbar
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: true
}
});

Re: Duplictate Slide Show Controls Displayed

Posted: Sun Dec 02, 2018 2:21 pm
by MisterNeutron
Ah, a classic problem, caused by the fact that the first letter of CSS stands for "cascading!" You have your own menu.css that applies some styling to the <li> tags, but those are exactly the tags that Highslide JS uses for the navigation controls. Your menu.css needs to be more specific about which <li> tags to target. I've tinkered, and it looks like a small change on line 13 of menu.css will take care of it, without damaging anything else:

Code: Select all

nav li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

Re: Duplicate Slide Show Controls Displayed

Posted: Sun Dec 02, 2018 3:20 pm
by Braemoor
Thank you so much! That all makes sense, and I'll have a look,.

P.S. All sorted - thanks again! :D