Below is a copy of my css, html, java script that were all generated by the EDITOR.
CSS
Code: Select all
/**
* @file: highslide.css
* @version: 4.1.13
*/
.highslide-wrapper, .highslide-outline {
background: #111111;
}
.highslide img {
border: 2px solid #D0D0D0;
}
.highslide:hover img {
border-color: #A0A0A0;
}
.highslide-active-anchor img {
visibility: visible;
border-color: #808080 !important;
}
.highslide-image {
border: 2px solid #111111;
}
.highslide-caption {
color: #CCCCCC;
padding: 2px;
}
.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: 500px;
height: 500px;
border: 3px solid #D0D0D0;
background: #EDEDED;
margin: 2px;
}
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GRANT'S CUSTOM HOMES</title>
<script type="text/javascript" src="highslide1/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide1/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="/highslide1/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="/highslide1/highslide-ie6.css" />
<![endif]-->
</head>
<body>
<h3>Gallery</h3>
<div class="highslide-gallery">
<a id="thumb1" href="highslide1/images/P1.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T1.jpg" alt=""/>
</a>
<div class="hidden-container">
<a href="highslide1/images/P2.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T2.jpg" alt=""/>
</a>
<a href="highslide1/images/P3.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T3.jpg" alt=""/>
</a>
<a href="highslide1/images/P4.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T4.jpg" alt=""/>
</a>
<a href="highslide1/images/P6.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T6.jpg" alt=""/>
</a>
<a href="highslide1/images/P7.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T7.jpg" alt=""/>
</a>
<a href="highslide1/images/P8.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T8.jpg" alt=""/>
</a>
<a href="highslide1/images/P9.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T9.jpg" alt=""/>
</a>
<a href="highslide1/images/P10.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T10.jpg" alt=""/>
</a>
<a href="highslide1/images/P11.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T11.jpg" alt=""/>
</a>
<a href="highslide1/images/P12.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T12.jpg" alt=""/>
</a>
<a href="highslide1/images/P13.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T13.jpg" alt=""/>
</a>
<a href="highslide1/images/P14.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T14.jpg" alt=""/>
</a>
<a href="highslide1/images/P15.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T15.jpg" alt=""/>
</a>
<a href="highslide1/images/P16.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T16.jpg" alt=""/>
</a>
<a href="highslide1/images/P17.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T17.jpg" alt=""/>
</a>
<a href="highslide1/images/P18.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T18.jpg" alt=""/>
</a>
<a href="highslide1/images/P19.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T19.jpg" alt=""/>
</a>
<a href="highslide1/images/P20.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T20.jpg" alt=""/>
</a>
<a href="highslide1/images/P21.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T21.jpg" alt=""/>
</a>
<a href="highslide1/images/P22.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T22.jpg" alt=""/>
</a>
<a href="highslide1/images/P23.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T23.jpg" alt=""/>
</a>
<a href="highslide1/images/P24.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T24.jpg" alt=""/>
</a>
<a href="highslide1/images/P25.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T25.jpg" alt=""/>
</a>
<a href="highslide1/images/P26.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T26.jpg" alt=""/>
</a>
<a href="highslide1/images/P27.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T27.jpg" alt=""/>
</a>
<a href="highslide1/images/P28.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T28.jpg" alt=""/>
</a>
<a href="highslide1/images/P29.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T29.jpg" alt=""/>
</a>
<a href="highslide1/images/P30.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T30.jpg" alt=""/>
</a>
<a href="highslide1/images/P31.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T31.jpg" alt=""/>
</a>
<a href="highslide1/images/P32.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T32.jpg" alt=""/>
</a>
<a href="highslide1/images/P33.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T33.jpg" alt=""/>
</a>
<a href="highslide1/images/P34.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T34.jpg" alt=""/>
</a>
<a href="highslide1/images/P35.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T35.jpg" alt=""/>
</a>
<a href="highslide1/images/P36.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T36.jpg" alt=""/>
</a>
<a href="highslide1/images/P37.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T37.jpg" alt=""/>
</a>
<a href="highslide1/images/P38.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T38.jpg" alt=""/>
</a>
<a href="highslide1/images/P39.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T39.jpg" alt=""/>
</a>
<a href="highslide1/images/P40.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T40.jpg" alt=""/>
</a>
<a href="highslide1/images/P41.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T41.jpg" alt=""/>
</a>
<a href="highslide1/images/P42.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T42.jpg" alt=""/>
</a>
<a href="highslide1/images/P43.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T43.jpg" alt=""/>
</a>
<a href="highslide1/images/P44.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T44.jpg" alt=""/>
</a>
<a href="highslide1/images/P45.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T45.jpg" alt=""/>
</a>
<a href="highslide1/images/P46.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T46.jpg" alt=""/>
</a>
<a href="highslide1/images/P47.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T47.jpg" alt=""/>
</a>
<a href="highslide1/images/P48.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T48.jpg" alt=""/>
</a>
<a href="highslide1/images/P49.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T49.jpg" alt=""/>
</a>
<a href="highslide1/images/P50.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T50.jpg" alt=""/>
</a>
<a href="highslide1/images/P51.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T51.jpg" alt=""/>
</a>
<a href="highslide1/images/P52.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T52.jpg" alt=""/>
</a>
<a href="highslide1/images/P53.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T53.jpg" alt=""/>
</a>
<a href="highslide1/images/P54.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T54.jpg" alt=""/>
</a>
<a href="highslide1/images/P55.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T55.jpg" alt=""/>
</a>
<a href="highslide1/images/P56.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T56.jpg" alt=""/>
</a>
<a href="highslide1/images/P57.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T57.jpg" alt=""/>
</a>
<a href="highslide1/images/P58.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T58.jpg" alt=""/>
</a>
<a href="highslide1/images/P59.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T59.jpg" alt=""/>
</a>
<a href="highslide1/images/P60.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T60.jpg" alt=""/>
</a>
<a href="highslide1/images/P61.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T61.jpg" alt=""/>
</a>
<a href="highslide1/images/P62.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T62.jpg" alt=""/>
</a>
<a href="highslide1/images/P63.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T63.jpg" alt=""/>
</a>
<a href="highslide1/images/P64.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T64.jpg" alt=""/>
</a>
<a href="highslide1/images/P65.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T65.jpg" alt=""/>
</a>
<a href="highslide1/images/P66.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T66.jpg" alt=""/>
</a>
<a href="highslide1/images/P67.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T67.jpg" alt=""/>
</a>
<a href="highslide1/images/P68.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T68.jpg" alt=""/>
</a>
<a href="highslide1/images/P69.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T69.jpg" alt=""/>
</a>
<a href="highslide1/images/P70.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T70.jpg" alt=""/>
</a>
<a href="highslide1/images/P71.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T71.jpg" alt=""/>
</a>
<a href="highslide1/images/P72.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T72.jpg" alt=""/>
</a>
<a href="highslide1/images/P73.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T73.jpg" alt=""/>
</a>
<a href="highslide1/images/P74.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T74.jpg" alt=""/>
</a>
<a href="highslide1/images/P75.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T75.jpg" alt=""/>
</a>
<a href="highslide1/images/P76.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T76.jpg" alt=""/>
</a>
<a href="highslide1/images/P77.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T77.jpg" alt=""/>
</a>
<a href="highslide1/images/P78.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T78.jpg" alt=""/>
</a>
<a href="highslide1/images/P79.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T79.jpg" alt=""/>
</a>
<a href="highslide1/images/P80.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T80.jpg" alt=""/>
</a>
<a href="highslide1/images/P81.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T81.jpg" alt=""/>
</a>
<a href="highslide1/images/P82.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T82.jpg" alt=""/>
</a>
<a href="highslide1/images/P83.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T83.jpg" alt=""/>
</a>
<a href="highslide1/images/P84.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T84.jpg" alt=""/>
</a>
<a href="highslide1/images/P85.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T85.jpg" alt=""/>
</a>
<a href="highslide1/images/P86.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T86.jpg" alt=""/>
</a>
<a href="highslide1/images/P87.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T87.jpg" alt=""/>
</a>
<a href="highslide1/images/P88.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T88.jpg" alt=""/>
</a>
<a href="highslide1/images/P89.jpg" class="highslide"
title=""
onclick="return hs.expand(this, config1 )">
<img src="highslide1/images/thumbs/T89.jpg" alt=""/>
</a>
</div>
</div>
</body>
</html>
Code: Select all
hs.graphicsDir = 'highslide1/graphics/';
hs.outlineType = 'custom';
hs.fadeInOut = true;
hs.align = 'center';
hs.useBox = true;
hs.width = 950;
hs.height = 950;
hs.blockRightClick = true;
hs.captionEval = 'this.a.title';
hs.captionOverlay.position = 'top left';
// Add the slideshow controller
hs.addSlideshow({
slideshowGroup: 'group1',
interval: 5000,
repeat: true,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
className: 'large-dark',
opacity: 0.6,
position: 'bottom center',
offsetX: 0,
offsetY: -15,
hideOnMouseOut: true
},
thumbstrip: {
mode: 'horizontal',
position: 'above',
relativeTo: 'image'
}
});
// gallery config object
var config1 = {
slideshowGroup: 'group1',
thumbnailId: 'thumb1',
transitions: ['expand', 'crossfade']
};