Implementation of HighSlide JS …

The author of HighSlide is generous enough to let anyone uses the script for non-commercial use. However, link back is a must and I hereby posting the method that I have used for the London Aquarium gallery.

Download the HighSlide pack from the HighSlide JS website which contains all the information and sample file.
Or download my HighSlide pack which contains only the files that I used for my London Aquarium photo gallery.

Insert the following codes in your Head tag.

<script type=”text/javascript” src=”/highslide/highslide.js”> <link rel=”stylesheet” type=”text/css” href=”/highslide/highslide.css” />

Insert the following codes as well. These codes will override the settings in highslide.js file without the need to edit it.

<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: true,
overlayOptions: {
opacity: .75,
position: ‘top center’,
hideOnMouseOut: true

Leave a Reply

Your email address will not be published. Required fields are marked *