Controller in wrong place, won't disappear.

[emh593]

When I click on the thumbnail the image opens, but the controller graphic shows in the wrong place. I can click on the buttons where they should be, but when I close the pop up, the controller stays in the top left.

http://www.erinmulliganart.com/gallery

I am rather new to javascript, so I'm sure it's something obvious, but I can't seem to figure it out. It does the same thing in Firefox and IE.

[RoadRash]

Hi,
This happens because you have the code for the controls both in your highslide.config.js file and in a script tag between the head tags.
You need to remove the Highslide settings and the Highslide CSS between the head tags:

Code: Select all

<script type="text/javascript">

hs.graphicsDir = 'highslide/graphics/';
hs.showCredits = false;
hs.outlineType = 'custom';
hs.allowMultipleInstances = false;
hs.blockRightClick = true;
hs.captionEval = 'this.a.title';


// Add the slideshow controller
hs.addSlideshow({
	slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		className: 'large-dark',
		opacity: '0.75',
		position: 'bottom center',
		offsetX: '0',
		offsetY: '-10',
		hideOnMouseOut: true
	}
});

// gallery config object
var config1 = {
	slideshowGroup: 'group1',
	transitions: ['expand', 'crossfade']
};


</script>

<STYLE type=text/css>

.highslide-wrapper, .highslide-outline {
	background: #FFFFFF;
}
.highslide img {
	border: 1px solid #D0D0D0;
}
.highslide:hover img {
	border-color: #A0A0A0;
}
.highslide-active-anchor img {
	visibility: visible;
	border-color: #808080 !important;
}
.highslide-image {
	border: 10px solid #FFFFFF;
}
.highslide-caption {
	padding: 0px;
	padding-right: 2px;
	padding-bottom: 10px;
	padding-left: 10px;
}
.highslide-loading {
	color: black;
	border: 1px solid black;
	background-color: white;
	background-image: url(graphics/loader.white.gif);
}

.highslide-controls {
	position: static !important;
	margin-bottom: 0;
	width: 195px !important;
}
.large-dark .highslide-controls, .large-dark .highslide-controls ul, .large-dark .highslide-controls a {
	background-image: url(graphics/controlbar-black-border.gif);
}
.highslide-gallery ul li {
	width: 106px;
	height: 106px;
	border: 1px solid #D0D0D0;
	background: #EDEDED;
	margin: 2px;
}

</STYLE>

[emh593]

Thanks, that answered my question.