Simple regex question

Discussion in 'Javascript' started by Timmy, Nov 21, 2005.

  1. Timmy

    Timmy Guest

    I'd like to display a simple image gallery based on location search
    substrings. Not typical image replacement method, but the same page simply
    reloaded but with different search substring parameters, e.g.
    page.html?00002.jpg

    The images would be defined in a typed out array something like this:

    var images = new Array
    ("00001.jpg",
    "00002.jpg",
    "00003.jpg")

    d = document;

    if (location.search){
    var image = location.search.substring(1);
    }

    if(image){
    d.write('<img src="images/'+image+'">');
    }

    To determine back (<<) and forward (>>) arrow lin values for next and
    previous images, after the scripts retrieves the given image name, how can
    I cycle through the images array to determine which index position is
    matching the one in the search substring and place that value in a variable?

    If my URL string is page.html?00002.jpg, the image name should of course
    match the one in array position 1 so the script can thereafter know to link
    the next arrow to index position 2 and previous arrow to position 0.

    I guess its a simple question, but which I can't remember the answer to...

    Many thanks!
     
    Timmy, Nov 21, 2005
    #1
    1. Advertising

  2. Timmy

    VK Guest

    Timmy wrote:

    > d.write('<img src="images/'+image+'">');


    You should understand that the line above means:

    [clear all current document content *including* any script in it]
    [set document content to] "<img src=something>" string (which is not a
    valid HTML document)

    If this is not what you actually wanted to do, then:

    <body>
    ....
    <div>
    <img name="viewport" src="bogus.gif"><break clear="all">
    <span id="s1"
    style="color:blue;cursor:hand;cursor:pointer"
    onclick="goBack()">&lt;</span>

    <span id="s1"
    style="color:blue;cursor:hand;cursor:pointer"
    onclick="goForward()">&gt;</span>
    </div>

    and
    <script type="text/javascript">
    var arrayPosition = 0;

    function goBack() {
    if (arrayPosition > 0) {
    arrayPosition--;
    document.images['viewport'].src = myArray[arrayPosition];
    }
    }

    function goForward() {
    if (arrayPosition < myArray.length) {
    arrayPosition++;
    document.images['viewport'].src = myArray[arrayPosition];
    }
     
    VK, Nov 21, 2005
    #2
    1. Advertising

  3. Timmy

    RobG Guest

    Timmy wrote:
    > I'd like to display a simple image gallery based on location search
    > substrings. Not typical image replacement method, but the same page simply
    > reloaded but with different search substring parameters, e.g.
    > page.html?00002.jpg
    >
    > The images would be defined in a typed out array something like this:
    >
    > var images = new Array
    > ("00001.jpg",
    > "00002.jpg",
    > "00003.jpg")


    Or:

    var images = ["00001.jpg", "00002.jpg", "00003.jpg"];


    Not sure about using a variable called 'images', it's a bit close to
    document.images, but anyhow...


    >
    > d = document;
    >
    > if (location.search){
    > var image = location.search.substring(1);
    > }
    >
    > if(image){
    > d.write('<img src="images/'+image+'">');
    > }


    Presumably this script runs as the page loads, not after.


    >
    > To determine back (<<) and forward (>>) arrow lin values for next and
    > previous images, after the scripts retrieves the given image name, how can
    > I cycle through the images array to determine which index position is
    > matching the one in the search substring and place that value in a variable?


    var i = images.length;
    while (i-- && images != image){}
    var currentImageIndex = (i<0)? 0 : i;


    If images = '00002.jpg', then currentImageIndex is a global variable
    with a value of 1. If no match is found, it is set to 0.

    Have you considered send the index number in the search string rather
    than the image name?


    >
    > If my URL string is page.html?00002.jpg, the image name should of course
    > match the one in array position 1 so the script can thereafter know to link
    > the next arrow to index position 2 and previous arrow to position 0.


    var numImgs = images.length
    var nextImageIndex = (currentImageIndex + 1) % numImgs;
    var prevImageIndex = (currentImageIndex - 1 + numImgs) % numImgs;

    [...]

    --
    Rob
     
    RobG, Nov 22, 2005
    #3
  4. Timmy

    Timmy Guest

    > > d.write('<img src="images/'+image+'">');

    Thats what I wanted in this case. The image is written as the page loads
    only. Thanks for the code examples. I'll check it out.
     
    Timmy, Nov 22, 2005
    #4
  5. Timmy

    Timmy Guest

    > Not sure about using a variable called 'images', it's a bit close to
    > document.images, but anyhow...


    It was just for examples sake.

    > Presumably this script runs as the page loads, not after.


    Yes that was exatly what I meant it to do.

    > var i = images.length;
    > while (i-- && images != image){}
    > var currentImageIndex = (i<0)? 0 : i;
    >
    >
    > If images = '00002.jpg', then currentImageIndex is a global variable
    > with a value of 1. If no match is found, it is set to 0.


    Great! I got that part to work nicely.

    > Have you considered send the index number in the search string rather
    > than the image name?


    Yes but my idea is for the image name to be visible in the URL, so users
    can easily connect/forward an image'd URL, containing a complete image name.

    > var numImgs = images.length
    > var nextImageIndex = (currentImageIndex + 1) % numImgs;
    > var prevImageIndex = (currentImageIndex - 1 + numImgs) % numImgs;


    Somehow I can't get this part to work. Perhaps because the
    currentImageIndex has been set to a global value 1 or 0 true or false? The
    nextImageIndex always returns 2 and the previous 0 regardless of which of
    the 3 images is used in the URL.

    I pasted together a quick mock-up below, where the prevImageIndex number is
    showing in a table cell left to the image, and the nextImageIndex name in
    a table cell to the right of the image. Any ideas?

    d = document;

    var images = ["00001.jpg", "00002.jpg", "00003.jpg"];

    if (location.search){
    d.write(location.search.substring(1))
    var image = location.search.substring(1)
    }

    var i = images.length;
    while (i-- && images !=image){}
    var currentImageIndex = (i<0)? 0 : 1;

    var numImgs = images.length
    var nextImageIndex = (currentImageIndex + 1) % numImgs;
    var prevImageIndex = (currentImageIndex - 1 + numImgs) % numImgs;

    d.write('<table border=1><tr><td>')

    d.write(prevImageIndex)

    d.write('</td><td>')

    if(image){
    d.write('<img src="images/'+image+'">')
    }

    d.write('</td><td>')

    d.write(nextImageIndex)

    d.write('</td></tr></table>')
     
    Timmy, Nov 22, 2005
    #5
  6. Timmy

    RobG Guest

    Timmy wrote:
    [...]
    >> var i = images.length;
    >> while (i-- && images != image){}
    >> var currentImageIndex = (i<0)? 0 : i;

    ----------------------------------------^

    That is the letter 'i', not a numeral '1' (see below).


    [...]
    >> var numImgs = images.length
    >> var nextImageIndex = (currentImageIndex + 1) % numImgs;
    >> var prevImageIndex = (currentImageIndex - 1 + numImgs) % numImgs;

    >
    >
    > Somehow I can't get this part to work. Perhaps because the
    > currentImageIndex has been set to a global value 1 or 0 true or false? The


    No, it's set to the exit value for 'i' or 0 if i is -1 (that is, a
    matching image name was not found in the images array).


    > nextImageIndex always returns 2 and the previous 0 regardless of which of
    > the 3 images is used in the URL.


    Because below you are setting it to 0 or 1.


    [...]

    > var currentImageIndex = (i<0)? 0 : 1;

    -------------------------------------^

    That should be an 'i' not the number '1':

    var currentImageIndex = (i<0)? 0 : i;


    It will be easier for testing if you modify the images array to:

    var images = ["00000.jpg", "00001.jpg", "00002.jpg"];


    so that the names match the array indexes.


    [...]


    --
    Rob
     
    RobG, Nov 22, 2005
    #6
  7. Timmy

    Timmy Guest

    > That is the letter 'i', not a numeral '1' (see below).

    While taking on my typing lessons that solved my js problem of the day!

    Thanks for pointing it out.

    It now works perfecly and with added functionality of image descriptions:

    var images = ["00001.jpg","00002.jpg","00003.jpg"];

    var descriptions = ["image one","second image","third image"];

    if (location.search){
    d.write(location.search.substring(1));
    var image = location.search.substring(1);
    }

    var i = images.length;
    while (i-- && images !=image){}
    var currentImageIndex = (i<0)? 0 : i;

    var numImgs = images.length;
    var nextImageIndex = (currentImageIndex + 1) % numImgs;
    var prevImageIndex = (currentImageIndex - 1 + numImgs) % numImgs;

    d.write('<table border=1><tr><td>')

    page = window.location.href;
    file = page.substring (page.lastIndexOf('/') + 1, page.length -10);

    if(currentImageIndex == 0){
    d.write('previous')
    }
    else
    d.write('<a href='+file+'?'+images[prevImageIndex]+'>previous</a>')

    d.write('</td><td>')

    if(image){
    d.write('<img src="images/'+image+'">')
    }

    d.write('</td><td>')

    if (currentImageIndex == numImgs -1){
    d.write('next')
    }
    else
    d.write('<a href='+file+'?'+images[nextImageIndex]+'>next</a>')

    d.write('</td></tr></table>')

    d.write(descriptions[currentImageIndex]);
     
    Timmy, Nov 22, 2005
    #7
  8. Timmy

    RobG Guest

    Timmy wrote:
    >>That is the letter 'i', not a numeral '1' (see below).

    >
    >
    > While taking on my typing lessons that solved my js problem of the day!
    >
    > Thanks for pointing it out.
    >
    > It now works perfecly and with added functionality of image descriptions:
    >
    > var images = ["00001.jpg","00002.jpg","00003.jpg"];
    >
    > var descriptions = ["image one","second image","third image"];


    I might be 'gilding the lilly' here, but if you want to include image
    descriptions, better to store them in an object that maps the name to
    the image, rather than depend on order to establish the relationship.

    You only need create the object, the 'index' array can be generated
    dynamically:

    var ImageData = {
    '00001.jpg' : 'Description 1',
    '00002.jpg' : 'Description 2',
    '00003.jpg' : 'Description 3'
    };

    var images = [];
    for (var desc in ImageData){
    images[images.length] = desc;
    }

    This can be extended to include other information about each image, say
    the height and width, and additional information.

    var ImageObj = {
    '00001.jpg' : { description : 'Description 1',
    height : '300px',
    width : '500px',
    altText : 'Picture of...'
    },
    '00002.jpg' : { description : 'Description 2',
    height : '310px',
    width : '480px',
    altText : 'Picture of...'
    }
    ...
    };


    >
    > if (location.search){
    > d.write(location.search.substring(1));
    > var image = location.search.substring(1);
    > }
    >
    > var i = images.length;
    > while (i-- && images !=image){}
    > var currentImageIndex = (i<0)? 0 : i;
    >
    > var numImgs = images.length;
    > var nextImageIndex = (currentImageIndex + 1) % numImgs;
    > var prevImageIndex = (currentImageIndex - 1 + numImgs) % numImgs;
    >
    > d.write('<table border=1><tr><td>')
    >
    > page = window.location.href;
    > file = page.substring (page.lastIndexOf('/') + 1, page.length -10);


    or forget 'page' altogether and do:

    file = window.location.href.replace(/[^\/]*$/,'');

    (where 'file' is actually the path, but anyhow...). 'file' will be a
    string of everything up to and including the last forward slash '/'.


    [...]
    > else
    > d.write('<a href='+file+'?'+images[nextImageIndex]+'>next</a>')
    >
    > d.write('</td></tr></table>')
    >
    > d.write(descriptions[currentImageIndex]);


    d.write( ImageObj[image] );


    or in the (even more) extended version:

    d.write( ImageObj[image].description );




    --
    Rob
     
    RobG, Nov 23, 2005
    #8
  9. Timmy

    Timmy Guest

    RobG wrote:

    [..]

    Truly great stuff - I hope it will be of use to some people other than
    myself. It certainly gives me something to munch on for an improved and
    more flexible version of an already excellent script - thanks!
     
    Timmy, Nov 23, 2005
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Saad Malik
    Replies:
    5
    Views:
    387
    John C. Bollinger
    May 2, 2005
  2. John Salerno

    a simple regex question

    John Salerno, Apr 1, 2006, in forum: Python
    Replies:
    6
    Views:
    314
    Paddy
    Apr 2, 2006
  3. johnny

    Simple Python REGEX Question

    johnny, May 11, 2007, in forum: Python
    Replies:
    4
    Views:
    412
    James T. Dennis
    May 12, 2007
  4. Replies:
    3
    Views:
    773
    Reedick, Andrew
    Jul 1, 2008
  5. Sam Kong
    Replies:
    8
    Views:
    119
    Csaba Henk
    Mar 25, 2005
Loading...

Share This Page