image viewer script pllzzzz

Discussion in 'Javascript' started by xiibweb@hotmail.com, Aug 23, 2005.

  1. Guest

    Hi

    I am struggling to find a code meeting my requirements... I want to
    display 4 thumbnails of photos in a row (table 1X4). When any thumb is
    clicked the large image size shud appear just below the 4 thumb aligned
    as center... along with description of photo. Anyone cn help me out
    plzz

    Regards,

    John...
    , Aug 23, 2005
    #1
    1. Advertising

  2. Lee Guest

    said:
    >
    >Hi
    >
    >I am struggling to find a code meeting my requirements... I want to
    >display 4 thumbnails of photos in a row (table 1X4). When any thumb is
    >clicked the large image size shud appear just below the 4 thumb aligned
    >as center... along with description of photo. Anyone cn help me out
    >plzz


    <html>
    <head>
    <title>demo</title>
    <script type="text/javascript">
    var imgTable = [
    { src: "http://www.azphx.com/dhtml/tmp/alpha256256.jpg",
    img: new Image(256,256),
    msg: "This is the letter \"alpha\"."
    },
    { src: "http://www.azphx.com/dhtml/tmp/beta256256.jpg",
    img: new Image(256,256),
    msg: "This is the letter \"beta\"."
    },
    { src: "http://www.azphx.com/dhtml/tmp/gamma256256.jpg",
    img: new Image(256,256),
    msg: "This is the letter \"gamma\"."
    },
    { src: "http://www.azphx.com/dhtml/tmp/delta256256.jpg",
    img: new Image(256,256),
    msg: "This is the letter \"delta\"."
    }
    ];

    for (var i=0;i<imgTable.length;i++) {
    imgTable.img.src=imgTable.src;
    }

    function shwImage(n) {
    document.getElementById("canvas").src=imgTable[n].img.src;
    document.getElementById("canvasTitle").innerHTML=imgTable[n].msg;
    }
    </script>
    <style type="text/css">
    #images {text-align:center}
    </style>
    </head>
    <body>
    <div id="images">
    <img src="http://www.azphx.com/dhtml/tmp/alpha6464.jpg"
    border="1" height="64" width="64" onclick="shwImage(0)">
    <img src="http://www.azphx.com/dhtml/tmp/beta6464.jpg"
    border="1" height="64" width="64" onclick="shwImage(1)">
    <img src="http://www.azphx.com/dhtml/tmp/gamma6464.jpg"
    border="1" height="64" width="64" onclick="shwImage(2)">
    <img src="http://www.azphx.com/dhtml/tmp/delta6464.jpg"
    border="1" height="64" width="64" onclick="shwImage(3)">
    <br>
    <img id="canvas" src="http://www.azphx.com/dhtml/tmp/blank.gif"
    border="1" height="256" width="256">
    <br>
    <div id="canvasTitle"></div>
    </div>
    </body>
    </html>
    Lee, Aug 23, 2005
    #2
    1. Advertising

  3. ASM Guest

    Lee wrote:
    > said:
    >
    >>Hi
    >>
    >>I am struggling to find a code meeting my requirements... I want to
    >>display 4 thumbnails of photos in a row (table 1X4). When any thumb is
    >>clicked the large image size shud appear just below the 4 thumb aligned
    >>as center... along with description of photo. Anyone cn help me out
    >>plzz


    to xiibweb

    take care : in example below :
    - large images are set in JS object : imgTable
    - thumbnails have to be small images
    and not big ones resized on fly as done here
    and ... if JS is disabled no big image at all

    >
    > <html>
    > <head>
    > <title>demo</title>
    > <script type="text/javascript">
    > var imgTable = [
    > { src: "http://www.azphx.com/dhtml/tmp/alpha256256.jpg",
    > img: new Image(256,256),
    > msg: "This is the letter \"alpha\"."
    > },
    > { src: "http://www.azphx.com/dhtml/tmp/beta256256.jpg",
    > img: new Image(256,256),
    > msg: "This is the letter \"beta\"."
    > },
    > { src: "http://www.azphx.com/dhtml/tmp/gamma256256.jpg",
    > img: new Image(256,256),
    > msg: "This is the letter \"gamma\"."
    > },
    > { src: "http://www.azphx.com/dhtml/tmp/delta256256.jpg",
    > img: new Image(256,256),
    > msg: "This is the letter \"delta\"."
    > }
    > ];
    >
    > for (var i=0;i<imgTable.length;i++) {
    > imgTable.img.src=imgTable.src;
    > }
    >
    > function shwImage(n) {
    > document.getElementById("canvas").src=imgTable[n].img.src;
    > document.getElementById("canvasTitle").innerHTML=imgTable[n].msg;
    > }
    > </script>
    > <style type="text/css">
    > #images {text-align:center}
    > </style>
    > </head>
    > <body>
    > <div id="images">
    > <img src="http://www.azphx.com/dhtml/tmp/alpha6464.jpg"
    > border="1" height="64" width="64" onclick="shwImage(0)">
    > <img src="http://www.azphx.com/dhtml/tmp/beta6464.jpg"
    > border="1" height="64" width="64" onclick="shwImage(1)">
    > <img src="http://www.azphx.com/dhtml/tmp/gamma6464.jpg"
    > border="1" height="64" width="64" onclick="shwImage(2)">
    > <img src="http://www.azphx.com/dhtml/tmp/delta6464.jpg"
    > border="1" height="64" width="64" onclick="shwImage(3)">
    > <br>
    > <img id="canvas" src="http://www.azphx.com/dhtml/tmp/blank.gif"
    > border="1" height="256" width="256">
    > <br>
    > <div id="canvasTitle"></div>
    > </div>
    > </body>
    > </html>
    >



    --
    Stephane Moriaux et son [moins] vieux Mac
    ASM, Aug 23, 2005
    #3
  4. Lee Guest

    ASM said:
    >
    >Lee wrote:
    >> said:
    >>
    >>>Hi
    >>>
    >>>I am struggling to find a code meeting my requirements... I want to
    >>>display 4 thumbnails of photos in a row (table 1X4). When any thumb is
    >>>clicked the large image size shud appear just below the 4 thumb aligned
    >>>as center... along with description of photo. Anyone cn help me out
    >>>plzz

    >
    >to xiibweb
    >
    >take care : in example below :
    >- large images are set in JS object : imgTable
    >- thumbnails have to be small images
    > and not big ones resized on fly as done here
    >and ... if JS is disabled no big image at all


    Nothing is being resized on the fly.



    >
    >>
    >> <html>
    >> <head>
    >> <title>demo</title>
    >> <script type="text/javascript">
    >> var imgTable = [
    >> { src: "http://www.azphx.com/dhtml/tmp/alpha256256.jpg",
    >> img: new Image(256,256),
    >> msg: "This is the letter \"alpha\"."
    >> },
    >> { src: "http://www.azphx.com/dhtml/tmp/beta256256.jpg",
    >> img: new Image(256,256),
    >> msg: "This is the letter \"beta\"."
    >> },
    >> { src: "http://www.azphx.com/dhtml/tmp/gamma256256.jpg",
    >> img: new Image(256,256),
    >> msg: "This is the letter \"gamma\"."
    >> },
    >> { src: "http://www.azphx.com/dhtml/tmp/delta256256.jpg",
    >> img: new Image(256,256),
    >> msg: "This is the letter \"delta\"."
    >> }
    >> ];
    >>
    >> for (var i=0;i<imgTable.length;i++) {
    >> imgTable.img.src=imgTable.src;
    >> }
    >>
    >> function shwImage(n) {
    >> document.getElementById("canvas").src=imgTable[n].img.src;
    >> document.getElementById("canvasTitle").innerHTML=imgTable[n].msg;
    >> }
    >> </script>
    >> <style type="text/css">
    >> #images {text-align:center}
    >> </style>
    >> </head>
    >> <body>
    >> <div id="images">
    >> <img src="http://www.azphx.com/dhtml/tmp/alpha6464.jpg"
    >> border="1" height="64" width="64" onclick="shwImage(0)">
    >> <img src="http://www.azphx.com/dhtml/tmp/beta6464.jpg"
    >> border="1" height="64" width="64" onclick="shwImage(1)">
    >> <img src="http://www.azphx.com/dhtml/tmp/gamma6464.jpg"
    >> border="1" height="64" width="64" onclick="shwImage(2)">
    >> <img src="http://www.azphx.com/dhtml/tmp/delta6464.jpg"
    >> border="1" height="64" width="64" onclick="shwImage(3)">
    >> <br>
    >> <img id="canvas" src="http://www.azphx.com/dhtml/tmp/blank.gif"
    >> border="1" height="256" width="256">
    >> <br>
    >> <div id="canvasTitle"></div>
    >> </div>
    >> </body>
    >> </html>
    >>

    >
    >
    Lee, Aug 23, 2005
    #4
  5. ASM Guest

    wrote:
    > Hi
    >
    > I am struggling to find a code meeting my requirements... I want to
    > display 4 thumbnails of photos in a row (table 1X4). When any thumb is
    > clicked the large image size shud appear just below the 4 thumb aligned
    > as center... along with description of photo. Anyone cn help me out
    > plzz
    >
    > Regards,
    >
    > John...



    Using something proposed by somewhere :

    <html>
    <base href="http://www.azphx.com/dhtml/tmp/">
    <style type="text/css">
    #images { text-align: center }
    img { cursor: pointer }
    #canvas { cursor: auto }
    </style>
    <div id="images">
    <img src="alpha6464.jpg"
    border="1" height="64" width="64" onclick="shwImage(this)"
    title="This is the letter \"alpha\".">
    <img src="beta6464.jpg"
    border="1" height="64" width="64" onclick="shwImage(this)"
    title="This is the letter \"beta\".">
    <img src="gamma6464.jpg"
    border="1" height="64" width="64" onclick="shwImage(this)"
    title="This is the letter \"gamma\".">
    <img src="delta6464.jpg"
    border="1" height="64" width="64" onclick="shwImage(this)"
    title="This is the letter \"delta\">
    <br>
    <img id="canvas" src="blank.gif"
    border="1" height="256" width="256">
    <br>
    <div id="canvasTitle"></div>
    </div>
    <script type="text/javascript">
    function shwImage(thisImage) {
    document.getElementById("canvas").src=thisImage.src;
    document.getElementById("canvasTitle").innerHTML=thisImage.title;
    }
    </script>
    </html>


    and for non-DOM browsers :

    <html>
    <base href="http://www.azphx.com/dhtml/tmp/" target="_blank">
    <center>
    <table border=1 cellpadding=0>
    <tr>
    <td>
    <a href="alpha6464.jpg"
    onclick="shwImage(this,'This is the letter \'alpha\'.'); return
    false;">
    <img src="alpha6464.jpg" border="0" height="64" width="64"></a>
    </td><td>
    <a href="beta6464.jpg"
    onclick="shwImage(this,'This is the letter \'beta\'.'); return false;">
    <img src="beta6464.jpg" border="0" height="64" width="64"></a>
    </td><td>
    <a href="gamma6464.jpg"
    onclick="shwImage(this,'This is the letter \'gamma\'.'); return false;">
    <img src="gamma6464.jpg" border="0" height="64" width="64"></a>
    </td><td>
    <a href="delta6464.jpg"
    onclick="shwImage(this,'This is the letter \'delta\'.'); return false;">
    <img src="delta6464.jpg" border="0" height="64" width="64"></a>
    </td>
    </tr>
    <tr>
    <td colspan="4" align=center>
    <img name="canvas" src="blank.gif"
    border="1" height="256" width="256">
    </td></tr></table>
    <form name="canvasvalue"><input type=text size=40></form>
    </center>
    <script type="text/javascript">
    function shwImage(thisImage,thisTitle) {
    document.images["canvas"].src=thisImage.href;
    document.canvasvalue[0].value=thisTitle;
    }
    </script>
    </html>


    nota :
    take care first example will not more work if javascript is disabled


    Stephane Moriaux et son [moins] vieux Mac
    ASM, Aug 23, 2005
    #5
  6. ASM Guest

    Lee wrote:
    > ASM said:
    >
    >> and not big ones resized on fly as done here
    >>and ... if JS is disabled no big image at all

    >
    >
    > Nothing is being resized on the fly.


    for me :
    height="64" width="64"
    or
    height="256" width="256"

    are probably not original images sizes
    so they are re-sized on the fly(*)
    (at least the large image is)


    (*) if you use other words to say so, I'll be happy to learn them

    --
    Stephane Moriaux et son [moins] vieux Mac
    ASM, Aug 24, 2005
    #6
  7. Lee Guest

    ASM said:
    >
    >Lee wrote:
    >> ASM said:
    >>
    >>> and not big ones resized on fly as done here
    >>>and ... if JS is disabled no big image at all

    >>
    >>
    >> Nothing is being resized on the fly.

    >
    >for me :
    > height="64" width="64"
    >or
    > height="256" width="256"
    >
    >are probably not original images sizes
    >so they are re-sized on the fly(*)
    >(at least the large image is)


    No, those are the exact sizes of the images on the server.
    Specifying the size speeds up page rendering.
    Lee, Aug 24, 2005
    #7
  8. ASM Guest

    Lee wrote:
    > ASM said:
    >
    >> height="64" width="64"
    >>or
    >> height="256" width="256"
    >>
    >>are probably not original images sizes
    >>so they are re-sized on the fly(*)
    >>(at least the large image is)

    >
    >
    > No, those are the exact sizes of the images on the server.


    OK, we'll expect so.
    Anyway, what is important to know is that
    images must be pre-sized in sizes to display.

    > Specifying the size speeds up page rendering.


    (we'll pass on the big ones which would be in cache)


    --
    Stephane Moriaux et son [moins] vieux Mac
    ASM, Aug 24, 2005
    #8
    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. Jerry J
    Replies:
    0
    Views:
    531
    Jerry J
    Jul 18, 2003
  2. jacksgoogle
    Replies:
    0
    Views:
    1,727
    jacksgoogle
    May 11, 2005
  3. Andrew
    Replies:
    0
    Views:
    523
    Andrew
    Apr 5, 2007
  4. Flynn

    Gallery Viewer viewer script

    Flynn, Feb 22, 2004, in forum: Javascript
    Replies:
    8
    Views:
    219
    John Flynn
    Feb 23, 2004
  5. Ryan Sullivan

    Javascript Image Viewer from Image Map

    Ryan Sullivan, Feb 29, 2004, in forum: Javascript
    Replies:
    3
    Views:
    227
Loading...

Share This Page