...

View Full Version : click image next image



gordongoes
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

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

gordongoes
08-09-2011, 11:04 AM
i found this:
http://www.codingforums.com/archive/index.php/t-158902.html

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>amomaxia</title>

<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) {
swap(0);
}
else {
swap(i+1);
}
}
if(direction=="back") {
if(i==0) {
swap(img.length-1);
}
else {
swap(i-1);
}
}
break;
}
}
}

function swap(nr) {
document.images.blah.src=img[nr];
document.getElementById("imgcaption").innerHTML=caption[nr];
}

//-->
</script>
</head>



<body>

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum