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 inline image slideshow

Demo

Bookmark and Share

Download script

You can download the script from this Zip file.

Configuration

The images you want to use in the gallery are defined in the HTML code. Example:

<div class="imageSlideshowHolder" id="slideshow1">
  <img src="images/image1.jpg">
  <img src="images/image3.jpg">
  <img src="images/image4.jpg">
  <img src="images/image5.jpg">
  <img src="images/image6.jpg">
  <img src="images/image7.jpg">
  <img src="images/image8.jpg">
</div>

Here, you have a parent <DIV> with the id "slideshow1" and class name "imageSlideshowHolder". Inside this div, we put all our slideshow images.

You define the size of your images in the CSS. Example:

.imageSlideshowHolder{
  margin:5px;  /* "Air" */
  float:right; /* Floating gallery at the right side of other web page content */    
  width:151px;  /* Image width */
  height:100px;  /* Image height */
  
  position:relative;  /* Don't remove this line */
}

The dimension of the images in my gallery is 151x100 pixels. So here, I have defined width:151px and height:100px.

To initialize the script, call the initImageGallery function. The only argument to this function is the id of the gallery div, example: "slideshow1".

Comments

ami
Good
ami at 07:09AM, 2011/02/26.
RED
tell me what am I doing wrong? my photos appear below each other.nice, but not as should.<strong>HTML code:</strong><!--<script type="text/javascript" src="js/image-slideshow-4.js"></script> ---------<div class="cat-wrapper"><div class="imageSlideshowHolder" id="slideshow1"><img src="../img.mysite.md/events/danceni/s01danceni.jpg" ><img src="../img.mysite.md/events/danceni/s02danceni.jpg" ><img src="../img.mysite.md/events/danceni/s03danceni.jpg" > <img src="../img.mysite.md/events/danceni/s04danceni.jpg" ></div>---------<SCRIPT type="text/javascript">initImageGallery('slideshow1');</SCRIPT>--><strong>CSS code:</strong><!--.cat-wrapper { width: 141px; padding: 10px 6px; text-align: center; float: left; font-size: 0.917em; line-height: 1.364em;}.imageSlideshowHolder{ margin:1px; float:right; width:133px; height:100px; position:relative; }-->any advice?Thanks!
RED at 02:49PM, 2011/08/15.
PMC
Mmmm. Could not get this to work.If you're going to encourage people (especially non-programmers) to use your code you should at least explain how to implement it clearly.Your instructions are poor.Pity, this could be very useful.
PMC at 08:31PM, 2012/03/14.
JusLinTek
All pictures must be in absolute position, it is same as in wrappin mode "through" in MS Word. So pictures then are limited by coordinates shown and stacked one on another. You can made this through<styles type="text/stylesheet">imageSlideshowHolder img {position:absolute;}</styles>or by adding styles="position:absolute;" value to each image.
JusLinTek at 08:35PM, 2012/06/11.
Chinmay
How to give link on slideshow images.Looks like<a href="http://www.learnphp.in"><img src="../img.mysite.md/events/danceni/s01danceni.jpg" ></a><a href="http://www.google.com"><img src="../img.mysite.md/events/danceni/s02danceni.jpg" ></a>Above code the last link http://www.google.com is working but how to change link with images?
Chinmay at 06:31AM, 2013/10/19.

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