Question

I need to create a slideshow of images that will be displayed when i click on their specific number from 1-5. But the problem that i am facing is that the images are being displayed one after the other. so if i hide image 1 and then display image 2, the image 2 is not getting displayed in the place of image 1, but is displayed below the image 1.

what is it that I am doing wrong?

Answer 1

You say: “the images are being displayed one after the other“.

I assume they are in some container – a <div> maybe. Set the CSS property position: relative for this container, and set position: absolute; top: 0; left: 0 for the images. This will help you with the images being placed one after another – they will be stacked all in the same place.

In this state, they probably will look ugly (unless they all have the same size), so you should hide all but the one you want to show. Just define display: none as the default property of these images in the CSS sheet, and set the individual property of the displayed one to display: block (by JavaScript – it’s very simple, you do not need jQuery, as pointed by Frog).

This is the basic way.

Now, if you want to do the task right, you should take care about the users who have JavaScript disabled (at least I would appreciate this 😉

Define the default layout of the page so, that users without JavaScript would see all the images, one near another. You already have this.

Now, when your page is rendered in a browser where JavaScript works, let your script set a class on the container (I usually use the class “live”), and define another set of CSS rules to display the images in one place (that position: absolute and display: none), and check the first image as visible (for example give it a class “visible”).

Now, when the user clicks on some kind of ‘Next’ button, your JavaScript needs only remove the class “visible” from the ‘old’ image, and set it in a ‘new’ image.

An example of HTML:

<div id="slideshow"><img ../><img ../></div>

and basic properties in CSS:

#slideshow { ... } /* noscript */
#slideshow.live {  /* script */
  position: relative;
  height: ..;
  width: ..;
}
#slideshow img { ... } /* noscript */
#slideshow.live img { /* script */
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
#slideshow.live img.visible { /* script + choosen one */
  display: block;
}

I believe you will know how to write the JavaScript part.