SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: how do I...

  1. #1
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how do I...

    I'm interested in building a page to display photos. I want thumbnails on one side and a space (frame, table???) on the other where each thumbnail is displayed in a larger format as you click on them - similar to a slideshow.

    any suggestions on how to do this (or tutorials...)

    I use DW4 and have a working knowledge of HTML.

    thanks

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  2. #2
    SitePoint Addict Troy1960's Avatar
    Join Date
    Jan 2003
    Location
    GA
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd suggest to use a cgi script so it could make it a little easier for you. Check out

    http://www.cgi-resources.com/Program...mage_Indexing/


    if you need some personal help getting this started simply PM me.

  3. #3
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the reference - I'm wondering though, is there a way to do it client-side? I don't really want to deal with the server-side stuff (aside from FTPing the files to the server!) if I can avoid it.

    The scipts look like they will do something similar to Photoshop's gallery feature (it will create a gallery of thumbnails for you with the large pic layout - it just LOOKS kind of preformatted, so I wanted something that has a bit more versatility and control - I just don't know how to go about it from scratch.

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  4. #4
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, all you need to do is change the src attribute of the <img> tag on the fly. Pretty easy to do. You would need to post some code in the JS forum for a more robust solution but in pseudo code:

    1. write a function which changes the src attribute on the img tag on the frame you want (DOM).

    2. have each link pass your function the source name you want to display.

    3. watch the image change.

  5. #5
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the post - unfortunately I know about *this* much javascript - though I think I kinda understand what you're saying.

    can you point me to a tutorial or maybe even give me an idea of how difficult something like this would be to learn? I certainly can cut and paste and figure out where to insert stuff into my HTML code if I have an example to follow - I just don't know where to look

    I have a working knowledge of HTML and can use DW - just haven't gotten to the scripting part yet. Also, I've been able to get some pre-made scripts to run for me...


    thanks

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  6. #6
    SitePoint Member
    Join Date
    Feb 2003
    Location
    Zlocieniec, Poland
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry for mistakes (i'm Polish)

    Code:
    <html>
    <head>
    <script language="javascript">
    function changePict(pict){
    document.pictToChange.src=pict
    }
    </script>
    </head>
    <body>
    <table width="50" border="0" cellspacing="5" cellpadding="0" style="float: left">
    <tr><td><a href="#" onClick="changePict('1.bmp')"><img src="1.bmp" width="10" height="10" border="0"></a></td></tr>
    <tr><td><a href="#" onClick="changePict('2.bmp')"><img src="2.bmp" width="10" height="10" border="0"></a></td></tr>
    </table>
    <img src="1.bmp" name="pictToChange" width="300" height="300">
    </body>
    </html>
    Just click one of the pictures in the table (on the left side of the page). If you don't know, how to add your own pictures, mail me: dtvwv@op.pl.

  7. #7
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool - I'll give it a go

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  8. #8
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks!!
    dare to Dream, dare to Be...
    www.eodweb.com

  9. #9
    ********* obeah makeda's Avatar
    Join Date
    Jun 2001
    Location
    rollin' on dubs
    Posts
    492
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Err, I think you might need some id's to get to the image. Something like:

    Code:
    function swapIt(sPicSrc) {
    /*
    if you always know which picture you will be changing, hardcode it, otherwise pass it in as another parameter
    */
    parent.frames["yourFrameName"].document.yourImageName.src = sPicSrc
    }
    
    <a href="javascript:swapIt("newImage.gif")">click me</a>
    <img name="yourImageName" id="yourImageName" scr="" />
    Also, you might want to preload the images. You can find out how to do that in the JS forum.
    Last edited by makeda; Feb 12, 2003 at 08:02.


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
  •