Results 1 to 8 of 8

Thread: HTML Gallery - Need Javascript for HTML Array

  1. #1
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default HTML Gallery - Need Javascript for HTML Array

    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,
    Last edited by LisaA; 08-08-2006 at 01:57 PM.

  2. #2
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    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!

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

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

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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,

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Aug 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

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