Forum Moderators: not2easy
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="EX.css" />
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" media="all" />
<!--
1 ) Reference to the files containing the JavaScript and CSS.
These files must be located on your server.
-->
<script type="text/javascript" src="./Highslide JS_files/highslide-full.js"></script>
<!--[if lt IE 7]>
<![endif]-->
<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.outlineType = 'rounded-white';
hs.dragByHeading = false;
hs.lang.restoreTitle = 'Click for next image';
hs.restoreCursor = null;
// Close button
hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
fade: 2
});
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
return hs.next();
};
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
slideshowGroup: ['group1', 'group2', 'group3', 'group4'],
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
className: 'controls-in-heading',
position: 'bottom right',
opacity: 1,
hideOnMouseOut: false,
offsetY: 50,
offsetX: -5
},
thumbstrip: {
position: 'bottom',
mode: 'horizontal',
relativeTo: 'expander',
width: '490px',
offsetY: 60,
zIndex: 5
}
});
// Options for first gallery
var firstGalleryOptions = {
slideshowGroup: 'group1',
thumbnailId: 'thumb1',
useBox: true,
width: 550,
height: 413,
dimmingOpacity: 0.5,
headingId: 'firstGalleryHeading',
headingOverlay: {position: 'rightpanel', fade: false, width: '350px'},
captionId: 'firstGalleryCaption',
captionOverlay: {fade: false},
wrapperClassName: 'wide-border rightpanel'
};
// Options for second gallery
var secondGalleryOptions = {
slideshowGroup: 'group2',
thumbnailId: 'thumb2',
useBox: true,
width: 550,
height: 413,
dimmingOpacity: 0.5,
headingId: 'secondGalleryHeading',
headingOverlay: {position: 'rightpanel', fade: false, width: '350px'},
captionId: 'secondGalleryCaption',
captionOverlay: {fade: false},
wrapperClassName: 'wide-border rightpanel'
};
// Options for first gallery
var thirdGalleryOptions = {
slideshowGroup: 'group3',
thumbnailId: 'thumb3',
useBox: true,
width: 550,
height: 413,
dimmingOpacity: 0.5,
headingId: 'thirdGalleryHeading',
headingOverlay: {position: 'rightpanel', fade: false, width: '350px'},
captionId: 'thirdGalleryCaption',
captionOverlay: {fade: false},
wrapperClassName: 'wide-border rightpanel'
};
// Options for single images
var singleImage = {
slideshowGroup: 'single',
wrapperClassName: 'wide-border',
dimmingOpacity: 0.5
}
// Dynamic dimmer zIndex mod:
hs.dim = function(exp) {
if (!hs.dimmer) {
hs.dimmer = hs.createElement ('div',
{
className: 'highslide-dimming highslide-viewport-size',
owner: '',
onclick: function() {
if (hs.fireEvent(hs, 'onDimmerClick')) hs.close();
}
}, {
visibility: 'visible',
opacity: 0
}, hs.container, true);
}
hs.dimmer.style.zIndex = exp.wrapper.style.zIndex - 2;
hs.dimmer.style.display = '';
hs.dimmer.owner += '|'+ exp.key;
if (hs.geckoMac && hs.dimmingGeckoFix)
hs.setStyles(hs.dimmer, {
background: 'url('+ hs.graphicsDir + 'geckodimmer.png)',
opacity: 1
});
else
hs.animate(hs.dimmer, { opacity: exp.dimmingOpacity }, hs.dimmingDuration);
};
</script>
<style type="text/css">
.highslide-caption {margin-top: 60px; width: 550px;}
.highslide-heading {font-weight: normal; margin: 0 10px;}
.highslide-heading a {color: red; font-weight: bold;}
.highslide-controls {
width: 60px !important;
}
.highslide-controls .highslide-move {
display: none;
}
.highslide-controls .highslide-full-expand {
display: none;
}
.highslide-controls .highslide-close {
display: none;
}
.rightpanel .closebutton {left: 365px;}
z-index: 2;
</style>
</head>
<body>
<div id="background">
<div id="bg">
</div>
<a class="highslide" id="thumb1" href="http://www.roadrash.no/hs-support/images/015.large.jpg"
title="" onclick="return hs.expand(this, firstGalleryOptions)">
<img src="./Highslide JS_files/015.thumb.jpg" alt=""></a>
<!-- First gallery -->
<!--
3) Put the thumbnails inside a div for styling
-->
<div class="highslide-galleryH">
<h3>First gallery</h3>
</div>
</body>
</html> html {
height: 100%;
}
body {
margin: 0;
padding: 0;
background-color:#393939;
background-image:url('images/Background.png');
}
#background
{
left: 0px;
top: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 1020px;
height: 1030px;
overflow: hidden;
z-index:0;
}
#bg
{
left: 0px;
top: -14px;
position: absolute;
width: 1020px;
height: 1080px;
overflow: hidden;
background-image:url('images/bg.png');
z-index:0;
}
.highslide-galleryH{
float: left;
width: 600px;
margin: -550px -550px 15px 15px;
z-index: 2;
}
