New on DHTMLGoodies.com:
DHTML Chess is now available for WordPress at WordPressChess.com.
Download image slideshow
Licensing
This script is distributed under the LGPL open source license.
Commercial licenses are also available. Some of these licenses also includes personal e-mail support for up to 1 year.
Download script
You can download the entire script from this zip file.
Add images to slideshow
In the <body> section, add images to the slideshow in the <div id="theImages"> section
This is done with the following syntax:
<a href="#" onclick="showPreview('images/image1_big.jpg');return false"><img src="images/image1.jpg"></a>
image1.jpg is the small image, while image1_big.jpg is the larger version of image1.jpg, i.e. the image that is loaded into the preview pane
When someone opens the page, you can have a default image showing in the preview pane. This is done by adding a <img> into the "previewPane" div. Example:
<div id="previewPane">
<img src="images/image1_big.jpg">
</div>
Add image captions
Image captions are added right below the <A> tags for your small images. Example:
<div class="imageCaption">This is the caption of image number 1</div>
<div class="imageCaption">This is the caption of image number 2</div>
<div class="imageCaption">This is the caption of image number 3</div>
<div class="imageCaption">This is the caption of image number 4</div>
<div class="imageCaption">This is the caption of image number 5</div>
<div class="imageCaption">This is the caption of image number 6</div>
<div class="imageCaption">This is the caption of image number 7</div>
<div class="imageCaption">This is the caption of image number 8</div>
Change size of gallery
If you're not satisfied with the initial appearance(width, height, border colors etc.) of the gallery, you can make adjustments to the CSS(The <style type="text/css"> part). Look at the comments in the CSS for further information
Thank you for posting the gallery, it's been a real challenge tracking down a clean and simple design like this one which is ideal. However...
I'm quite new to coding (javascript in particular) so please bear with me. I downloaded the zip folder and placed it in a local loaction to add to my practice page. As an initial test to customise the gallery I simply tried replacing the image jpg's with my own using the same files names to avoid error. This creates some very odd behaviour, sometimes the images load into the preview and thumb slide and sometimes they don't. If they don't it will sometimes allow me to right click the icon and select "show images". Again this only works on occassion. As soon as I replace the original images that come with the demo, they all load fine without a problem. I'm baffled! Any help would be appreciated.
However, I'm having a small problem getting it to work correctly on my website. The thumbs seem to be adding more space between them then necessary and the slide arrows are disappearing on me!
HELP!
http://dkyphoto.net
Further to my previous post I've also tried resizing my images to match those of the demo before replacing the jpg files. This made no difference, they just won't show in the preview or in the thumbnail slide. The weird thing is, as soon as I replace the originals it all starts working fine again and all images display without a problem?? It appears to be a file specific issue as I'm not altering any of the code at all, just overwriting the image files with my own. Is there any code I'm not aware of that specifies the image files other than the file name itself? I'm at a complete loss??? This gallery is absolutely perfect and I would love to get it working.
Thanks again.
I'm having trouble getting this awesome slideshow to work properly! I followed all the directions and uploaded everything, however, the thumbnails are spaced funny and the slides arrows disappear when you hover over them! I've about pulled all my hair out trying to figure out why!
http://dkyphoto.net/adults/index.html
please help!
Could you try to do the following:
Replace the doctype at the top of your html file (line 1) with this:
<!DOCTYPE HTML PUBLIC "-// W3C// DTD HTML 4.0 Transitional// EN" "http://www.w3.org/TR/html4/loose.dtd">
now and it's doing the same thing still. I just can't see why it would be acting up.
http://dkyphoto.net/adults/index.html
Line 109 says= minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;
Any help is appreciated.
It's really super slideshow, but it doesn't works on Chrome...
It's good on FireFox and Opera, but on Chrome when I clik on the thumbs it displays the "image loading, bla-bla" message, and nothings happens, the massege stay, and there is no pictures...
it really did halped me alooooooooot
Post your comment
Comment preview: