| Author | Thread |
|
|
02/29/2004 09:26:14 PM · #1 |
I'm working on writing the code for a photo supplement that we are going to do for our yearbook this year. I am making it in website format since well, we don't have any programs, and that is what I know best.
I have a question about a way of doing pictures that I have seen. Ebay uses it quite often and I have seen it on other photographer's websites, but I can't remember which ones. ^^;; Also, I've been searching the web and looking it up in my books, but to no avail.
It involves having one large photo and then smaller thumbnails to the side (or elsewhere) that when clicked, open up in place of the large one. As far as I can tell it does not refresh the page and it does not use any type of frames. Can anyone help me find the code? I tried View Sorce on the eBay page, but I can't get it to work, I'm not sure if I am missing header code or what.
Example:
//cgi.ebay.com/ws/eBayISAPI.dll?ViewItem&item=2893480722&category=46792#ebayphotohosting
|
|
|
|
02/29/2004 09:43:34 PM · #2 |
It's basically just doing image preloading and then switching the large image with an onClick method. Here is an example of doing the same thing with a rollover. I'll leave it as an exercise for you to make it use onClick instead...
//www.sbrady.com/hotsource/javascript/rollover.html
Dave
|
|
|
|
02/29/2004 10:21:16 PM · #3 |
Does that do anything for multiple images though? I've never used onClick, and I have minimal experience with Rollovers. I don't know that much about JavaScript, I'm self-taught and learn things as I go, so I don't really know the rules surrounding where I can put things and what has to go where (like where I can put the onClick to make it work), so combining/transforming codes is not something I can really do.
I'll see what I can get it to do though...
//www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20710590.html <- has basically the same question I was first asking
//www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_20826834.html <- I would love to be able to do this as well
The annoying thing with those pages is that you have to pay to get the answer. -_-
|
|
|
|
02/29/2004 11:08:58 PM · #4 |
you preload all your images (say 4 of them, for example) the you have your onclick on each of the 4 thumbnails do an onclick passing their own full size image name (or the equivalent javascript variable name) as a parameter.
|
|
|
|
02/29/2004 11:24:29 PM · #5 |
If your server is running PHP (most are or can easily), and you want to save yourself a whole lot of trouble, use PhotoFrame. Though it uses frames, this is not a problem under most browsers.
It makes life very easy and works well. |
|
|
|
03/01/2004 02:12:22 AM · #6 |
check out my site (linked below).. i used frames, and used a page that paynekj built and modified it a bit. right now my site is a bit messy and isn't working perfectly, but works pretty good (thanks to paynekj). It is the photography website link, just below. (also itdoesn't work in internet explorer (but that is just because of the way i did the frames)
|
|
|
|
03/02/2004 02:02:47 AM · #7 |
*nods*
I've used frames quite often, but I was trying to avoid having to use them if I could. The multiple pages and headaches that result from that...
dsa157- sounds reasonable. ^^;; I'll see what I come up with when I have the time to mess with it again.
nshapiro- it is going to be running off of a CD, so I don't think I can use PHP. I am using HTML to make it accessable by everyone in the school (instead of using a program like PowerPoint which some don't have).
leaf- I can view your site in IE. ^_^ I like your layout.
Thanks everyone, I'll keep you updated if I get it all figured out. I'd like to use this method for my own photo gallery later as well. Heh, whenever I get my own domain...
|
|
|
|
03/02/2004 06:23:37 AM · #8 |
Ami,
This is a straightforward solution. It doesn't involve preloading anything. You will create a placeholder on the page. That place holder in your case will be an image and it will be noted to the user/viewer's browser via the img tag. Inside the img tag you will provide a name or an id by typing
< img id=x name=x src=blah_blah_blah.jpg >
The tricky part is planning for multiple browsers as not all browsers support an "onClick" event on an image. The most support way to handle this will be to create more placeholders on the page but these will be div tags. Netscape, IE, Mozilla, FireHawk and tons more browsers support a div tag and its "onMouseOver" event. So, you create the div tags and inside each of those you create an img tag like so
< div id=x name=x > < img src=little_blah_blah_blah.jpg / > < /div >
Now what makes this work? Well, you're going to write or download or whatever a Javascript that takes an argument and replaces a piece of text on the page.
function changeImage(argument)
{
document.page.id.src=argument;
}
and finally you add the finishing touch by causing the div tag's onMouseOver event to fire this function:
< div id=x name=x onMouseOver=changeImage(urlPathToImage)> < img src=little_blah_blah_blah.jpg / > < /div >
You can PM me for a more detailed and less generic set of code to accomplish this task.
Kev
|
|
|
|
03/03/2004 12:16:49 AM · #9 |
Wow, that's awesome. I think I understand most of that, and I will most likely begin working with it tomorrow in class, so I'll be able to see if I need a more specific one then.
Thank you soooo much!
|
|
Home -
Challenges -
Community -
League -
Photos -
Cameras -
Lenses -
Learn -
Help -
Terms of Use -
Privacy -
Top ^
DPChallenge, and website content and design, Copyright © 2001-2025 Challenging Technologies, LLC.
All digital photo copyrights belong to the photographers and may not be used without permission.
Current Server Time: 08/31/2025 03:44:48 PM EDT.
