Gallery Viewer viewer script

Discussion in 'Javascript' started by Flynn, Feb 22, 2004.

  1. Flynn

    Flynn Guest

    My understanding of javascript is very limited. Could some one help
    me out. I found this code for an image gallery viewer. It works fine
    on my site, but I'd like to modify it so that the mainpic image is
    linkable to a popup window displaying the same image only larger. Can
    this even be done? If so any ideas?

    Thanks in advance.


    <HEAD>

    <SCRIPT LANGUAGE="JavaScript">

    <!-- Begin
    browserName = navigator.appName;
    browserVer = parseInt(navigator.appVersion);

    ns3up = (browserName == "Netscape" && browserVer >= 3);
    ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

    function doPic(imgName) {
    if (ns3up || ie4up) {
    imgOn = ("" + imgName);
    document.mainpic.src = imgOn;
    }
    }
    // End -->
    </script>
    </HEAD>



    <BODY>

    <center>
    <table width=360 border=0 cellspacing=0 cellpadding=0>
    <tr>
    <td><a href="javascript:doPic('p1.jpg');"><img src="p1.jpg" width=90
    height=60 border=0></a></td>
    <td><a href="javascript:doPic('p2.jpg');"><img src="p2.jpg" width=90
    height=60 border=0></a></td>
    <td><a href="javascript:doPic('p3.jpg');"><img src="p3.jpg" width=90
    height=60 border=0></a></td>
    <td><a href="javascript:doPic('p4.jpg');"><img src="p4.jpg" width=90
    height=60 border=0></a></td>
    </tr>
    <tr>
    <td colspan=4 align=center><img name="mainpic" src="p1.jpg" width=360
    height=240 border=0></td>
    </tr>
    <tr>
    <td><a href="javascript:doPic('p5.jpg');"><img src="p5.jpg" width=90
    height=60 border=0></a></td>
    <td><a href="javascript:doPic('p6.jpg');"><img src="p6.jpg" width=90
    height=60 border=0></a></td>
    <td><a href="javascript:doPic('p7.jpg');"><img src="p7.jpg" width=90
    height=60 border=0></a></td>
    <td><a href="javascript:doPic('p8.jpg');"><img src="p8.jpg" width=90
    height=60 border=0></a></td>
    </tr>
    </table>
    </center>

    </body>
     
    Flynn, Feb 22, 2004
    #1
    1. Advertising

  2. Flynn

    Randy Webb Guest

    Flynn wrote:

    > My understanding of javascript is very limited. Could some one help
    > me out. I found this code for an image gallery viewer. It works fine
    > on my site, but I'd like to modify it so that the mainpic image is
    > linkable to a popup window displaying the same image only larger. Can
    > this even be done? If so any ideas?
    >
    > Thanks in advance.



    Step 1: Ditch it. All of it. Its utter junk.


    > <HEAD>
    >
    > <SCRIPT LANGUAGE="JavaScript">


    type="text/javascript"
    language attribute is deprecated in HTML4


    > <!-- Begin


    The above line is not needed either.

    > browserName = navigator.appName;
    > browserVer = parseInt(navigator.appVersion);
    >
    > ns3up = (browserName == "Netscape" && browserVer >= 3);
    > ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);


    And if its Opera, Safari or any browser other than NS or MS?
    http://www.jibbering.com/faq/#FAQ4_26


    > function doPic(imgName) {
    > if (ns3up || ie4up) {
    > imgOn = ("" + imgName);
    > document.mainpic.src = imgOn;
    > }
    > }


    function doPic(imgName){
    if (document.images)
    {
    document.images['mainpic'].src = imgName;
    }
    }



    > // End -->
    > </script>
    > </HEAD>
    >
    >
    >
    > <BODY>
    >
    > <center>
    > <table width=360 border=0 cellspacing=0 cellpadding=0>
    > <tr>
    > <td><a href="javascript:doPic('p1.jpg');"><img src="p1.jpg" width=90
    > height=60 border=0></a></td>


    http://www.jibbering.com/faq/#FAQ4_24


    > <td><a href="javascript:doPic('p2.jpg');"><img src="p2.jpg" width=90
    > height=60 border=0></a></td>
    > <td><a href="javascript:doPic('p3.jpg');"><img src="p3.jpg" width=90
    > height=60 border=0></a></td>
    > <td><a href="javascript:doPic('p4.jpg');"><img src="p4.jpg" width=90
    > height=60 border=0></a></td>
    > </tr>
    > <tr>
    > <td colspan=4 align=center><img name="mainpic" src="p1.jpg" width=360
    > height=240 border=0></td>
    > </tr>
    > <tr>
    > <td><a href="javascript:doPic('p5.jpg');"><img src="p5.jpg" width=90
    > height=60 border=0></a></td>
    > <td><a href="javascript:doPic('p6.jpg');"><img src="p6.jpg" width=90
    > height=60 border=0></a></td>
    > <td><a href="javascript:doPic('p7.jpg');"><img src="p7.jpg" width=90
    > height=60 border=0></a></td>
    > <td><a href="javascript:doPic('p8.jpg');"><img src="p8.jpg" width=90
    > height=60 border=0></a></td>
    > </tr>
    > </table>
    > </center>
    >
    > </body>



    <a href="URLtoBigImage.jpg" target="_blank"><img src="littleImage.jpg"
    width=90 height=60 border=0></a>

    Now, when its clicked, it will simply open the larger image in a new
    window. No Javascript needed at all. Just plain HTML :)

    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq/
     
    Randy Webb, Feb 22, 2004
    #2
    1. Advertising

  3. Flynn

    John Flynn Guest

    I'm not sure if I made myself clear as to what I'm looking for. It's
    kind of hard to explain. I like the way this script is working because
    it alows you to click on a thumbnail and it places the larger image in
    the center. This code makes it easy in that there aren't a ton of pages
    to code. From what I gather it's just passing a variable to change the
    center image. What I'm wondering is if someone wanted to see the
    picture bigger than what's being displayed in the center - is there a
    way to edit the code to make that center image linkable to yet another
    larger image. That center image would somehow have to know what picture
    is currently being displayed to determin the correct link. Can this even
    be done?

    Heres a link to view a sample of how the script is currently working:
    http://javascript.internet.com/miscellaneous/gallery-viewer.html

    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    John Flynn, Feb 22, 2004
    #3
  4. Flynn

    Randy Webb Guest

    John Flynn wrote:

    > I'm not sure if I made myself clear as to what I'm looking for. It's
    > kind of hard to explain. I like the way this script is working because
    > it alows you to click on a thumbnail and it places the larger image in
    > the center. This code makes it easy in that there aren't a ton of pages
    > to code. From what I gather it's just passing a variable to change the
    > center image. What I'm wondering is if someone wanted to see the
    > picture bigger than what's being displayed in the center - is there a
    > way to edit the code to make that center image linkable to yet another
    > larger image. That center image would somehow have to know what picture
    > is currently being displayed to determin the correct link. Can this even
    > be done?


    Yes. You change the document.links['linkName'].href property.

    > Heres a link to view a sample of how the script is currently working:
    > http://javascript.internet.com/miscellaneous/gallery-viewer.html


    That script is utter, useless junk. See my last post with regards to it
    and its inherent problems.

    Please, in the future, quote what you are replying to.

    I think I understand now.

    User clicks on thumbnail, changes bigger image on the page.
    User clicks on bigger image on the page, it opens an even larger one in
    a new window.

    <script type="text/javascript">
    function changeImage(newImg,biggerImg){
    if(document.images)
    {
    document.images['bigpic'].src = newImg;
    }
    if (document.links){
    document.links[1].href = biggerImg;
    }
    }
    </script>


    With this HTML:

    <a href="bigImage.jpg"
    onclick="changeImage('bigImage.jpg','biggerImage.jpg');return
    false">Change The Image</a>

    <a href="noJS.html" name="linkName" ><img src="original.jpg" id="bigpic"
    border="0" width="30" height="30" alt="Some Image"></a>

    And none of that hocus-pocus-what-browser-is-it garbage.

    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq/
     
    Randy Webb, Feb 22, 2004
    #4
  5. Flynn

    John Flynn Guest

    Randy hanks for your help. It's working great, but I'd like to know if
    there is a way I can get the new window of the image to be like a popup
    window - shutting off menu bars and all that jazz so its just the image.
    I'm pretty much a novice at javascript and programing in general so I'm
    not exactly sure how to go about it. I tried adding the following to
    your script but it wasn't working. Any suggestions would be most
    appreciated.

    new_win = window.open(biggerImg,'',
    'width=640,height=400,left=10,top=10');



    Randy Webb wrote:

    > I'm not sure if I made myself clear as to what I'm looking for. It's
    > kind of hard to explain. I like the way this script is working because
    > it alows you to click on a thumbnail and it places the larger image in
    > the center. This code makes it easy in that there aren't a ton of

    pages
    > to code. From what I gather it's just passing a variable to change the
    > center image. What I'm wondering is if someone wanted to see the
    > picture bigger than what's being displayed in the center - is there a
    > way to edit the code to make that center image linkable to yet another
    > larger image. That center image would somehow have to know what

    picture
    > is currently being displayed to determin the correct link. Can this

    even
    > be done?


    Yes. You change the document.links['linkName'].href property.

    > Heres a link to view a sample of how the script is currently working:
    > http://javascript.internet.com/miscellaneous/gallery-viewer.html


    That script is utter, useless junk. See my last post with regards to it
    and its inherent problems.

    Please, in the future, quote what you are replying to.

    I think I understand now.

    User clicks on thumbnail, changes bigger image on the page.
    User clicks on bigger image on the page, it opens an even larger one in
    a new window.

    <script type="text/javascript">
    function changeImage(newImg,biggerImg){
    if(document.images)
    {
    document.images['bigpic'].src = newImg;
    }
    if (document.links){
    document.links[1].href = biggerImg;
    }
    }
    </script>


    With this HTML:

    <a href="bigImage.jpg"
    onclick="changeImage('bigImage.jpg','biggerImage.jpg');return
    false">Change The Image</a>

    <a href="noJS.html" name="linkName" ><img src="original.jpg" id="bigpic"
    border="0" width="30" height="30" alt="Some Image"></a>

    And none of that hocus-pocus-what-browser-is-it garbage.


    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    John Flynn, Feb 23, 2004
    #5
  6. Flynn

    Randy Webb Guest

    John Flynn wrote:
    > Randy hanks for your help. It's working great, but I'd like to know if
    > there is a way I can get the new window of the image to be like a popup
    > window - shutting off menu bars and all that jazz so its just the image.
    > I'm pretty much a novice at javascript and programing in general so I'm
    > not exactly sure how to go about it. I tried adding the following to
    > your script but it wasn't working. Any suggestions would be most
    > appreciated.
    >
    > new_win = window.open(biggerImg,'',
    > 'width=640,height=400,left=10,top=10');
    >
    >


    <--snip-->

    >


    >> <a href="noJS.html" name="linkName" ><img src="original.jpg" id="bigpic"
    >> border="0" width="30" height="30" alt="Some Image"></a>

    >

    Change the above code to something like this:

    <a href="noJS.html" name="linkName"
    onclick="openNewWindow(this.href);return false">
    <img src="original.jpg" id="bigpic"
    border="0" width="30" height="30" alt="Some Image"></a>

    with this function:
    function openNewWindow(URLtoOpen){
    new_win =
    window.open(URLtoOpen,'','width=640,height=400,left=10,top=10');
    }


    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq/
     
    Randy Webb, Feb 23, 2004
    #6
  7. Flynn

    John Flynn Guest

    Randy, thanks again for your help. You rock! I plan on replacing all
    that junky code like you suggested. Say is there any books or websites
    you'd recommend for someone trying to learn javascript.


    Randy's message:

    >> <a href="noJS.html" name="linkName" ><img src="original.jpg"

    id="bigpic"
    >> border="0" width="30" height="30" alt="Some image"></a>

    >

    Change the above code to something like this:

    <a href="noJS.html" name="linkName"
    onclick="openNewWindow(this.href);return false">
    <img src="original.jpg" id="bigpic"
    border="0" width="30" height="30" alt="Some image"></a>

    with this function:
    function openNewWindow(URLtoOpen){
    new_win =
    window.open(URLtoOpen,'','width=640,height=400,left=10,top=10');
    }



    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    John Flynn, Feb 23, 2004
    #7
  8. Flynn

    Randy Webb Guest

    John Flynn wrote:
    > Randy, thanks again for your help. You rock! I plan on replacing all
    > that junky code like you suggested. Say is there any books or websites
    > you'd recommend for someone trying to learn javascript.


    You could start with the group FAQ, linked below. Read the parts about
    top-posting as well.

    --
    Randy
    Chance Favors The Prepared Mind
    comp.lang.javascript FAQ - http://jibbering.com/faq/
     
    Randy Webb, Feb 23, 2004
    #8
  9. Flynn

    John Flynn Guest

    I have one other concern I'd like to bring up. I can't seem to get this
    new code to work properly with any vesion of Netscape - I've tried 4.7,
    6.2, and 7. Explorer seems to work fine. Am I missing something?

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <script type="text/javascript">
    function changeImage(newImg,biggerImg){
    if(document.images)
    {
    document.images['bigpic'].src = newImg;
    }
    if (document.links){
    document.links[1].href = biggerImg;
    }
    }

    function openNewWindow(URLtoOpen){
    new_win =
    window.open(URLtoOpen,'','width=640,height=400,left=10,top=10');
    }

    </script>
    </head>
    <body>
    <a href=""
    onclick="changeImage('images/coasta-mesa.gif','images/int-phrase.jpg');r
    eturn false"><img src="images/coasta-mesa.gif" id="bigpic" border="0"
    width="30" height="30" alt="Some image"></a>

    <a href="" name="linkName" onclick="openNewWindow(this.href);return
    false"><img src="images/ontario.gif" name="bigpic" border="0"
    width="300" height="300" alt="Some image"></a>
    </body>
    </html>


    Randy's message:

    >> <a href="noJS.html" name="linkName" ><img src="original.jpg"

    id="bigpic"
    >> border="0" width="30" height="30" alt="Some image"></a>

    >

    Change the above code to something like this:

    <a href="noJS.html" name="linkName"
    onclick="openNewWindow(this.href);return false">
    <img src="original.jpg" id="bigpic"
    border="0" width="30" height="30" alt="Some image"></a>

    with this function:
    function openNewWindow(URLtoOpen){
    new_win =
    window.open(URLtoOpen,'','width=640,height=400,left=10,top=10');
    }



    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    John Flynn, Feb 23, 2004
    #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. David Elliott

    Need Help with Thumbnail Gallery in Panel

    David Elliott, Oct 18, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    326
    Rick Strahl [MVP]
    Oct 18, 2003
  2. umberto
    Replies:
    0
    Views:
    419
    umberto
    Nov 18, 2003
  3. jacksgoogle
    Replies:
    0
    Views:
    1,773
    jacksgoogle
    May 11, 2005
  4. BigOne

    Script for images gallery

    BigOne, May 10, 2006, in forum: Javascript
    Replies:
    1
    Views:
    78
    Thomas 'PointedEars' Lahn
    May 19, 2006
  5. maya
    Replies:
    2
    Views:
    101
Loading...

Share This Page