Ive been driven mad trying to figure this out..I'm trying to use highslide as a way to show my images. But for whatever reason, whenever i choose to use one of my images instead of the ones that came with it, the image wont load and the loading.. .gif will infinatly show. Can any1 tell me what I'm doing wrong? I thought all my file paths were correct, maybe I'm wrong!
(this is being done for my portfolio website. The folder i linked is located in a folder called Portfolio Website, the image thats mine is rainbow.jpg)
<!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>Highslide JS</title>
<!--
1 ) Reference to the files containing the JavaScript and CSS.
These files must be located on your server.
-->
<script type="text/javascript" src="highslide/highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide/highslide.css" />
<!--
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/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: true
}
});
</script>
</head>
<body>
<!--
3) Put the thumbnails inside a div for styling
-->
<div class="highslide-gallery">
<!--
4) This is how you mark up the thumbnail image with an anchor tag around it.
The anchor's href attribute defines the URL of the full-size image.
-->
<a id="thumb1" href="highslide/images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="highslide/images/gallery1.thumb.jpg" alt="Highslide JS"
title="Click to enlarge" />
</a>
<!--
5 (optional). This is how you mark up the caption. The correct class name is important.
-->
<div class="highslide-caption">
Caption for the first image. This caption can be styled using CSS.
</div>
<!--
6) Put the subsequent thumbnails in a hidden container. The thumbnailId parameter ensures
these thumbnails zoom back out to the right thumbnail when closed.
-->
<div class="hidden-container">
<a href="highslide/images/rainbow.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb1' })"></a>
<div class="highslide-caption">
Caption for the second image.
</div>
<a href="highslide/images/gallery3.jpg" class="highslide" onclick="return hs.expand(this, { thumbnailId: 'thumb1' })"></a>
<div class="highslide-caption">
Caption for the third image.
</div>
</div>
</div>
</body>
</html>