New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

Download image slideshow II

Demo

Put this into your <HEAD> section

Put this into your <BODY> section

Configuration

You add images to the slideshow by use of standard HTML. Example:
<div id="imageSlideshowHolder">
  <img src="images/image1.jpg">  
  <img src="images/image2.jpg">  
  <img src="images/image3.jpg">  
</div>

First of all, you have the <div id="imageSlideshowHolder">, which is the elements that holds all the images in the slideshow. Then, we use standard <IMG> tags for the images. As you can see, this slideshow contain 3 images, image1.jpg, image2.jpg and image3.jpg.

You also have 3 javascript variables available which you could modify as you need:
var slideshow2_noFading = false; // No fade effect?
var slideshow2_timeBetweenSlides = 1500; // Time between images(1000 = 1 sec)
var slideshow2_fadingSpeed = 20; // Speed of fading(Higher = slower)

These controls the behaviour of the slideshow. You can play with them to see how they works.

The size and background color of the entire slideshow is set by CSS. Example:
  #imageSlideshowHolder{
    width:600px;
    height:450px;
    background-color:#000;
    border:3px solid #317082;
    position:relative;  /* Never change this value */
    
  }
  .imageInGallery{    
    width:600px;
    height:450px;
    background-color:#000;
    
    /* Never change these 3 value */
    left:0px;
    top:0px;
    position:absolute;  
  }

Here, width is set to 600 pixels, height to 450 pixels and background color to black(#000). As you also can see, you have to set these values 2 places.

Comments

Stu Ducklow
Nice effect but the fading time from one slide to another doesn't appear to change much when I give it different values.
Stu Ducklow at 03:08PM, 2011/03/02.
Alistair Kennedy
I've set up scrolling images on our website. It works fine on IE8, but people who have tried to use it using an earlier version report problems. Can this be overcome?

Thanks

Alistair Kennedy
Alistair Kennedy at 09:05AM, 2011/04/15.
jeemboh
Does the script allow for clickable links such that, when you click on a picture, it takes you to a new page?Thanks
jeemboh at 05:13PM, 2011/07/12.
jagan
great one...
jagan at 10:03AM, 2011/08/19.
Harris Nguyen
I am trying to use this slideshow - which is awesome - on my homepage, but there seems to be about 30px above and below the slideshow that I can't get rid of. I'm trying to get all my images to line up but the top and bottom spacing is hard to work with. Is there a fix for this? Thanks!
Harris Nguyen at 02:24AM, 2011/11/02.
Harris Nguyen
nevermind - it was my comments before and after that were adding whitespace. thanks for the great slideshow!
Harris Nguyen at 02:29AM, 2011/11/02.
numpty
this is so confusing but i like the demo.
i also thing that im confused bro
im writing random things becuse im definatly confused
this doent work
numpty at 10:32AM, 2011/11/29.
neels
Awesome....
neels at 04:13PM, 2011/11/30.
ahmed
very nice
ahmed at 02:06PM, 2012/01/04.
bert
I am trying to add this to my GoDaddy website tonight site and the images seem to have a break on it so it wont show anything. I am also not sure if I am doing this right since I cant store the images locally. Can anyone help me with this? Thanks
bert at 08:34PM, 2012/01/11.
Sem
If you want a clickable photoslider change this line<div id="imageSlideshowHolder">to something like this<div id="imageSlideshowHolder" onclick="location.href='http://www.google.com'" style="cursor:pointer;">I am using the image slider on my site at http://www.guitartabsexplorer.com with great success. Thank you.
Sem at 03:42PM, 2012/04/03.
mish
HI thanks for this simple design but the sytax error comes up with a problem with the last bit of code in head tag which is </style>. saying it needs to be fixed. ideas?
mish at 06:34AM, 2012/04/16.
jameslx
Great. Easy to adapt.
jameslx at 12:33PM, 2012/05/04.
Ronald
how can i make two of this slider in one site?Ex:"Slide"webcontent here"another slide"webcontent here
Ronald at 01:55PM, 2013/01/14.
Nick
<a href="#comment1495">Sem wrote:</a>If you want a clickable photoslider change this line<div id="imageSlideshowHolder">to something like this<div id="imageSlideshowHolder" onclick="location.href='http://www.google.com'" style="cursor:pointer;">I am using the image slider on my site at http://www.guitartabsexplorer.com with great success. Thank you.
This slider is great. I just can't figure out how to give each different picture in the photoslider its own different clickable hyper link.
Nick at 01:46AM, 2013/04/24.
Gus Johansson
Hey, adding this to my friends website which I am configuring. Anyone who knows why my pictures are like, rendering/showing on top of it all??oscarakermotattoos.comCheers guys, thanks for the awesome script man
Gus Johansson at 02:36PM, 2014/06/13.
Manat Kongchan
Thank you so much from Thailand.
Manat Kongchan at 12:43AM, 2014/11/02.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com