View Full Version : click image next image

08-09-2011, 10:43 AM
hi i'm a newb at webdesigning
i want my website to be very simple - just displaying images but in a stylistic way

any tips on how to achieve this:

i want to basically put images numbered 01.jpg to xx.jpg in a folder
then on the website i want 01.jpg to show up first and when you click the image, you go to the next image 02.jpg, etc

and i need the image to be centered horizontally and vertically on the page

that's basically it, as i get more photos in more folders i'll probably want to add a bar on the top or bottom or side so you can click on FOLDER1 or FOLDER2 etc hyperlinks - clicking on FOLDER1 would bring up 01.jpg in /folder1 and clicking on FOLDER2 would bring up 01.jpg in /folder2 etc

it doesn't have to be html

08-09-2011, 11:00 AM
post the code you have so far and we can try to help you get it working.

08-09-2011, 11:04 AM
i found this:

so i made this, but got confused and can't make it work:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">

var img = new Array();
var caption = new Array();

var path = "C:\Users\123456789\Desktop\kevin waring\"

img[0] = path + "01.jpg"
caption[0] = "kevin";
img[1] = path + "02.jpg";
caption[1] = "This is the second one.";
img[2] = path + "03.jpg";
caption[2] = "And the third.";
img[3] = path + "04.jpg";
caption[3] = "And the third.";
img[4] = path + "05.jpg";
caption[4] = "And the third.";
img[5] = path + "06.jpg";
caption[5] = "And the third.";
img[6] = path + "07.jpg";
caption[6] = "And the third.";
img[7] = path + "08.jpg";
caption[7] = "And the third.";
img[8] = path + "09.jpg";
caption[8] = "And the third.";
img[9] = path + "10.jpg";
caption[9] = "And the third.";
img[10] = path + "11.jpg";
caption[10] = "And the third.";
img[11] = path + "12.jpg";
caption[11] = "And the third.";
// Add more images here

function changeIMG(direction) {

var current=document.images.blah.src;

for (var i = 0;i<img.length;i++) {
if(img[i]==current) {
if(direction=="forward") {
if(i==img.length-1) {
else {
if(direction=="back") {
if(i==0) {
else {

function swap(nr) {



<a href="img[0]" onclick="changeIMG('back');">Previous</a>
<a href="#" onclick="changeIMG('forward');">Next</a>