Download inline image slideshow


Bookmark and Share

Download script

You can download the script from this Zip file.


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">

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:

  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".


ami at 07:09AM, 2011/02/26.
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 src="../" ><img src="../" > <img src="../" ></div>---------<SCRIPT type="text/javascript">initImageGallery('slideshow1');</SCRIPT>--><strong>CSS code:</strong><! { 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.
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.
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.
How to give link on slideshow images.Looks like<a href=""><img src="../" ></a><a href=""><img src="../" ></a>Above code the last link is working but how to change link with images?
Chinmay at 06:31AM, 2013/10/19.
Medicines information leaflet. Generic Name.
<a href="">lycia tablets online</a> in USA
Actual what you want to know about medicine. Read here.
DtiXJ at 11:52PM, 2021/04/26.

Post your comment

Don't have an avatar? Create one at

Confirmation code:

Go to

About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2021