Simple regex question

T

Timmy

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!
 
V

VK

Timmy said:
d.write('<img src="images/'+image+'">');
Click to expand...

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];
}
 
R

RobG

Timmy said:
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")
Click to expand...

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+'">');
}
Click to expand...

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?
Click to expand...

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.
Click to expand...

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

[...]
 
T

Timmy

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

Timmy

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

It was just for examples sake.
Presumably this script runs as the page loads, not after.
Click to expand...

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.
Click to expand...


Great! I got that part to work nicely.
Have you considered send the index number in the search string rather
than the image name?
Click to expand...

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;
Click to expand...

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>')
 
R

RobG

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

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

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


[...]
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
Click to expand...

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.
Click to expand...

Because below you are setting it to 0 or 1.


[...]
var currentImageIndex = (i<0)? 0 : 1;
Click to expand...
-------------------------------------^

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.


[...]
 
T

Timmy

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]);
 
R

RobG

Timmy said:
That is the letter 'i', not a numeral '1' (see below).
Click to expand...


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"];
Click to expand...

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);
Click to expand...


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]);
Click to expand...

d.write( ImageObj[image] );


or in the (even more) extended version:

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

Timmy

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!
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

JS querySelector addEventListenerer index getElementsByClassName parent div only 1
Regex match of string in array index? 3
Slideshow not working properly 2
Help with my responsive home page 2
How to disable vertical image centering? 0
Help with code 0
Splitting and recombining data in arrays 4
Index position of array item by string match? 14

Members online

No members online now.
Total: 31 (members: 1, guests: 30)
Robots: 422

Forum statistics

Threads
473,769
Messages
2,569,577
Members
45,052
Latest member
LucyCarper

Latest Threads

Top