Image Changer

ImageChanger is a simple open source Java Script image changer. It does not preload the images, saving you bandwith and it does not need any external libraries. I created this for an onlineshop but I put this on my homepage in case someone else can use it.

Try it out!

Installation

Just copy imagechanger.js and imagechanger-sidearrows.css into your web application.

Usage

Basic Usage

  1. Include imagechanger.js and imagechanger-sidearrows.css in your web page.

    <head>
    …
    <link rel=stylesheet href=css/imagechanger-sidearrows.css>
    <script src="js/imagechanger.js"></script>
    </head>

  2. At the place you want to insert your image, call

    <script>insertImageChanger('name',['image1.jpg','image2.jpg',…],link);</script>

    The link parameter specifies an a href -target around the image container but can be set to null or just be left out if you don't want to have a link around it.
That's it!

Using images with different sizes

Because ImageChanger does not preload, it cannot know the image sizes in advance. This may lead to elements of your page jumping around, if the image sizes are not equal. To prevent this, you need to determine the maximum width and height of your images and then call

<script>insertImageChanger('name',['image1.jpg','image2.jpg',…],width,height,link);</script>

If you work with Linux, you can use my Multiple Images Bounding Box -shell script.

Building your own image changer

If you don't like the design but you still want use the logic you have two possibilities.

Change the default css

Make a copy of imagechanger-sidearrows.css and change the values.

Only use the core functions

You can create create anything you want, the only necessities for using the ImageChanger are
  1. Creating an image with a an id " name _img", for example "myimage_img"
  2. Creating an instance of the type ImageSequence with the name ("myimage" in this case) as a parameter
  3. Giving some element the property onclick=" sequence .displayPrev()"
  4. Giving some element the property onclick=" sequence .displayNext()"

Example

previous
next

Code

<script>
var sequence = new ImageSequence('myimage',['img/numbers/1.jpg','img/numbers/2.jpg','img/numbers/3.jpg']);
</script>
<div style="background-color:black;color:white" onclick="sequence.displayPrev()" >previous</div>
<div style="background-color:#cccccc;text-align:right;" onclick="sequence.displayNext()" >next</div>
<img id="myimage_img" src="img/numbers/1.jpg" width="10%" height="10%"/>