Download inline image slideshow

Demo

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

1 2 3 4 5

Good

ami at 07:09AM, 2011/02/26.

1 2 3 4 5

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.

1 2 3 4 5

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.

1 2 3 4 5

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.

Post your comment

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.

 

Confirmation code:

Please wait...

Comment preview:

Type some text to see comment preview...

Anonymous at 12:55, 04-26-2024.