Simple regex question

11-21-2005

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!

11-21-2005

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

ointer"
onclick="goBack()"><</span>

<span id="s1"
style="color:blue;cursor:hand;cursor

ointer"
onclick="goForward()">></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];
}

11-22-2005

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[i] != 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

11-22-2005

> > 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.

11-22-2005

> 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[i] != 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[i] !=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>')

11-22-2005

Timmy wrote:
[...]
>> var i = images.length;
>> while (i-- && images[i] != 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

11-22-2005

> 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[i] !=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]);

11-23-2005

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[i] !=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

11-23-2005

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!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
How make regex that means "contains regex#1 but NOT regex#2" ??	seberino@spawar.navy.mil	Python	3	07-01-2008 03:06 PM
Simple Python REGEX Question	johnny	Python	4	05-12-2007 09:38 PM
a simple regex question	John Salerno	Python	6	04-02-2006 02:55 PM
RegEx Woes! Please Help, Simple Question	Saad Malik	Java	5	05-02-2005 04:06 PM
(Maybe) a simple question about regex	Sam Kong	Ruby	8	03-25-2005 01:25 PM