I have been trying to get the controls to show up for two weeks. I have tweaked and changed things and started over. Below is what I currently have (My site is not live so I can only paste my code here). My 'highslide' folder is right below my root folder. I also copied the highslide.css into my dark.css in order to only have one css file. When I click on the thumbnail it expands into a separate webpage. I have also pasted part of my CSS file. Please help me figure out how to get the controls to show up.
Code: Select all
<script type="text/javascript" src="highslide/highslide-full.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="dark.css" />
Code: Select all
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.numberPosition = 'caption';
hs.dimmingOpacity = 0.75;
// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
opacity: .75,
position: 'bottom center',
hideOnMouseOut: false
}
});
// gallery config object
var config1 = {
slideshowGroup: 'group1',
thumbnailId: 'thumb1',
transitions: ['expand', 'crossfade']
};
</script>
Code: Select all
<div id="highslide-gallery">
<a href="images/mjmusicbw.png" class="highslide" onclick="return hs.expand(this, config1 )">
<img src="images/mjmusicbw.thumb.jpg" title="Click to Enlarge" alt=""/>
</a>
<div class="hidden-container">
<a href="images/IMG_0082e.jpg" class="highslide" onclick="return hs.expand(this, config1) ">
<img src="images/IMG_0082e.jpg" alt=""/> </a>
<a href="images/Image 3.jpg" class="highslide" onclick="return hs.expand(this, config1) ">
<img src="images/Image 3.jpg" alt="" /></a>
</div>