HTML Gallery - Need Javascript for HTML Array

**LisaA** · 08-08-2006, 12:42 PM

I'm working on a project that has a gallery that uses images and also HTML.

Basically a small window opens that shows two thumbnails and a 1-2 paragraph write-up. The user can then click the "next" button which links to another HTML document again containing two thumbnails and a 1-2 paragraph write-up. Everytime they click the "next" button it links to another HTML document, etc, etc., etc.

What I would like to do is have a script something like an image array but instead using an HTML array (if that makes sense), so that there is a script that says every time the "next" button is clicked, advance to the next item in the HTML array and if the "previous" button is clicked, go back to the previous item in the HTML array.

Right now this is all being done by hardcoding the URL, but I know there has got to be another way.

Does anyone know if such a script already exists, so I can figure out where to begin?

Any suggestions would be appreciated.

Thanks,

**boogyman** · 08-08-2006, 08:17 PM

This is possible to do this with an image array..... what would happen is that you would change both the image element and the text document that went to it... and if you only want a paragraph, then I think that would suit your purposes!

**jscheuer1** · 08-08-2006, 08:32 PM

Javascript can automate the process and more easily than pissa seems to be saying but, you would lose the accessibility that is inherent in hard coding. Another solution to this type of situation could be server side scripting, which is as accessible as hard coding.

If you want to use javascript, do you know how to make up an array of html page names? If you have that, all you have to do is keep count and have next be count+1 and previous be count-1 with a test each time to be sure the total will not be exceeded (in which case you can either stop or go back to zero) and a test to make sure page -1 is never called (in which case you can either stop or go to the highest numbered page).

**boogyman** · 08-08-2006, 08:49 PM

bro... i was talking about a js image array

**jscheuer1** · 08-09-2006, 04:06 AM

I'm not sure what you have in mind but, here is a working example of what I think you are talking about using javascript:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.dir {
visibility:hidden;
}
</style>
<script type="text/javascript">
var thepoll, thewin, unseen=1, count=0, thepages=['some.htm', 'another.htm', 'more.htm', 'additional.htm'];
function goPage(dir){
if(dir==1)
count=count<thepages.length-1? count+1 : 0;
else if (dir==-1)
count=count>0? count-1 : thepages.length-1;
else
count=0
thewin=window.open(thepages[count],'mywin','width=300, height=300, top=200, left=100');
thewin.focus();
thepoll=setInterval("pollThewin()", 700)
}
function unHide(el){
if(unseen)
for (var i_tem = 0; i_tem < document.links.length; i_tem++)
if (document.links[i_tem]==el){
document.links[i_tem-1].style.visibility=document.links[i_tem+1].style.visibility='visible';
el.style.visibility='hidden';
unseen=0;
}
}
function pollThewin(){
if (typeof thewin.name=='string')
return;
clearInterval(thepoll)
for (var i_tem = 0; i_tem < document.links.length; i_tem++)
if (document.links[i_tem].className=='dir'){
document.links[i_tem].style.visibility=document.links[i_tem+1].style.visibility=document.links[i_tem+2].style.visibility='';
unseen=1;
break;
}
}
</script>
</head>
<body>
<a class="dir" href="javascript:goPage(-1);">Previous</a> <a href="javascript:goPage(0);" onclick="unHide(this);return true;">Begin</a> <a class="dir" href="javascript:goPage(+1);">Next</a> 
</body>
</html>

**LisaA** · 08-09-2006, 11:59 AM

Thanks very much both pissa and jscheuer1 for your replies.

jscheuer1, your suggestion is very close to what I am looking to do. The only problem that I am having is that with the sample you provide, your starting page (main page) is "begin" which then opens up a new window, which will work for me because I too and opening up a new window; however, once you click the "begin", that main page changes showing "previous" and "next" and then your window is open. With this example, you have to use the "main page" to go through the HTML pages.

What I would like to do is open the new window and have the "previous" and "next" links in the HTML of the new window. I just want to control the "next" using Javascript so that I can have a list of HTML's (100's) that is easily managable should I want to shuffle their order, instead of manually having to go to each page and re-hardcode the link. Right now I'm just using javascript:history.go(-1) for the previous and that seems to be working ok.

I am far from being a JS expert so this is where I'm lost.

Any additional examples would be appreciated.

Thanks again,

**jscheuer1** · 08-09-2006, 06:37 PM

Put this script on each page where you want the links to appear:

Code:

<script type="text/javascript">
if(window.opener)
document.write('<a href="javascript:opener.goPage(-1);">Previous</a> <a href="javascript:opener.goPage(+1);">Next</a>')
</script>

Or, just save its contents:

Code:

if(window.opener)
document.write('<a href="javascript:opener.goPage(-1);">Previous</a> <a href="javascript:opener.goPage(+1);">Next</a>')

to a file named links.js and then put this on each page where you want the links to appear:

HTML Code:

<script type="text/javascript" src="links.js"></script>

Notes: Either way, if there is no javascript enabled, these links will not appear. Also, if these pages are navigated to somehow (via a bookmark or search engine) without being opened by the page with the array of pages on it, the links will not appear.

**LisaA** · 08-12-2006, 04:35 PM

jscheuer1,
With a few tweaks I got it to work... I have searched the Internet for days for a scirpt like this. There are hundreds of image slideshow scripts out there but none that are an HTML slideshow (which is basically what this script is).

Thanks so much for your javascript expertise, it is very much appreciated!

Thanks again,
Lisa

Thread: HTML Gallery - Need Javascript for HTML Array

Thread Tools

Search Thread

HTML Gallery - Need Javascript for HTML Array

Bookmarks

Bookmarks

Posting Permissions