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 4 of 4

Thread: Gallery Mess

  1. #1
    New Coder
    Join Date
    Jun 2002
    Location
    Australia
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Gallery Mess

    This is posted at WA as well, I felt a little lonely over there however.

    I think I'm close with this, a little push might help. I'm building an image gallery, my images are all located in one folder and their names are cronological from "001.gif" to "00whatever.gif" (all gifs).

    The image change is not on timer, it is controlled with a button (i.e. "Show Next Image"). What I'm making is a clever little script that will keep going +1 with image file name (i.e. was 001.gif now 002.gif) 'till it see's there are no files left at which time it will take the visitor to a goodbye page!

    This is where I'm up to...

    function nextimage() {
    //Something here that sees current image
    //name and does plus one to the name!
    //This then makes the new image a
    //variable called "URL"
    var tester=new Image(); //Preload
    tester.onLoad=isGood; //is it there?
    tester.onError=isBad; //no?
    tester.src=URL;
    }

    function isGood() {
    //something here to +1 the image name and replace it;
    }

    function isBad() {
    //location.href="goodbye.html";
    }

    <BODY>

    <IMG SRC="001.gif" NAME="picture">

    <input type="button" onclick="nextimage();">

    Make sense? It sees the current image... adds +1 to the name... sees that this new image is there... if it is... it replaces the current image with the new "+1" image name... if it's not there... it takes the visitor to another page!

    Any assistance will be greatly appreciated... Aiden

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,033
    Thanks
    0
    Thanked 248 Times in 245 Posts

    Re: Gallery Mess

    it's better to have the images in an array then traverse through it. If you are using a server-side language, you can write out the array dynamically.

    Originally posted by Aiden
    This is posted at WA as well, I felt a little lonely over there however.

    I think I'm close with this, a little push might help. I'm building an image gallery, my images are all located in one folder and their names are cronological from "001.gif" to "00whatever.gif" (all gifs).

    The image change is not on timer, it is controlled with a button (i.e. "Show Next Image"). What I'm making is a clever little script that will keep going +1 with image file name (i.e. was 001.gif now 002.gif) 'till it see's there are no files left at which time it will take the visitor to a goodbye page!

    This is where I'm up to...

    function nextimage() {
    //Something here that sees current image
    //name and does plus one to the name!
    //This then makes the new image a
    //variable called "URL"
    var tester=new Image(); //Preload
    tester.onLoad=isGood; //is it there?
    tester.onError=isBad; //no?
    tester.src=URL;
    }

    function isGood() {
    //something here to +1 the image name and replace it;
    }

    function isBad() {
    //location.href="goodbye.html";
    }

    <BODY>

    <IMG SRC="001.gif" NAME="picture">

    <input type="button" onclick="nextimage();">

    Make sense? It sees the current image... adds +1 to the name... sees that this new image is there... if it is... it replaces the current image with the new "+1" image name... if it's not there... it takes the visitor to another page!

    Any assistance will be greatly appreciated... Aiden

  • #3
    New Coder
    Join Date
    Jun 2002
    Location
    Australia
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Fair enough,

    I would still appreciate hearing any other thoughts on how to make this work, however, lets say I did use an array and cut the dynamic file check out, can you demonstrate a nice script to do the following....

    An array of preloaded images, when the user clicks on the "next button" the script sees what the current image is and replaces with the next-in-line.

    But, here's the tricky part: I also want to use a back button to go back (well it's obvious isn't it) and the image being replaced is the background image of a table!

    So, when you hit next or back, the background image in a table is replaced with the next or previous image in an pre-loaded array. Of course, I've done a little work getting this far, but I couldn't get it cross-browser (i.e. ie/ns6 at least).

    By the way, the images are all the same size....

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Planet Earth Code Poet: True
    Posts
    282
    Thanks
    0
    Thanked 1 Time in 1 Post
    Here is a basic slide show with similar functionality:

    <script type="text/javascript">
    <!--// This is for a manual slide show with pictures named pic1.gif, pic2.gif, pic3.gif ...
    ////// In this example there are a totl of 5 pictures

    num=5; //total number of pictures
    sld=1;
    function slide(dir){
    if (dir=="back" && sld==1) sld=2;
    if (dir=="next" && sld==num) sld=num-1;
    (dir=="back") ? sld--:sld++;
    document.images.pic.src ="images/pic" + sld + ".gif";
    }
    //-->
    </script>

    <img src="images/pic1.gif" border="0" name="pic">
    <br />
    <a href="#" onclick="slide('back'); return false" onfocus="this.blur()"><img src="images/back.gif" name="back" border="0"></a>
    <a href="#" onclick="slide('next'); return false" onfocus="this.blur()"><img src="images/next.gif" name="next" border="0"></a>


    If you did not want to have to manually input how many pictures there were then you would have to use a server-side language to determine how many images there were in the folder.


  •  

    Posting Permissions

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