Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    click image next image

    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
    Last edited by gordongoes; 08-09-2011 at 11:10 AM.

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    post the code you have so far and we can try to help you get it working.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i found this:
    http://www.codingforums.com/archive/.../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>
    Last edited by gordongoes; 08-09-2011 at 11:20 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •