SitePoint Sponsor |
|
User Tag List
Results 1 to 9 of 9
Thread: how do I...
-
Feb 8, 2003, 13:55 #1
- 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
Tonidare to Dream, dare to Be...
www.eodweb.com
-
Feb 8, 2003, 14:19 #2
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.
-
Feb 8, 2003, 15:45 #3
- 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.
Tonidare to Dream, dare to Be...
www.eodweb.com
-
Feb 10, 2003, 12:13 #4
- 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.
-
Feb 10, 2003, 20:32 #5
- 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
Tonidare to Dream, dare to Be...
www.eodweb.com
-
Feb 11, 2003, 10:54 #6
- 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>
-
Feb 11, 2003, 11:41 #7
- 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
Tonidare to Dream, dare to Be...
www.eodweb.com
-
Feb 11, 2003, 11:41 #8
- 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
-
Feb 12, 2003, 08:51 #9
- 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="" />
Bookmarks