Forum Moderators: open

Message Too Old, No Replies

Super-simple image enlarging effect...

Can anyone decipher an easy way to do this?

         

Don_Hoagie

5:29 pm on Aug 22, 2005 (gmt 0)

10+ Year Member



So, whilst looking for my next set of wheels, I noticed that this Porsche dealer's site has a really user-friendly and fast way of enlarging images, which i've been trying to acheive for my site for a long time...

I checked out the code, and the .js file is just plain huge, as it appears to cover all scripts for the entire site. I don't know enough JS to be able to decipher what of this script is necessary for the image enlarging function to run. Has anyone seen an easy way of getting an effect just like this?

P.S.: In case the URL gets edited, or no longer goes to the right page (it's an inventory page), just look at any Porsche dealer's website for a car with pictures.

[edited by: jatar_k at 7:10 pm (utc) on Aug. 22, 2005]
[edit reason] removed url [/edit]

jatar_k

7:14 pm on Aug 22, 2005 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



it looks like those are just hidden divs and when it is clicked it shows the appropriate image

view source on the page and find the two occurences of the images (there are 2 sets of 4). They each have a different function called for the onclick event. Find those 2 functions in the js file.

Don_Hoagie

7:43 pm on Aug 22, 2005 (gmt 0)

10+ Year Member



Jatar_k, thanks for the reply. I still don't understand what is fair game on this forum as far as URL posting (yes i've read the charter)...

Yes, I had tried pulling the specific functions out of the JS... but either i'm an idiot (most likely) or there is a lot of intertwined info in the code, because those functions alone still come up with JS errors... I have to copy over about 1/6 of the entire JS file before all the errors go away... and that's a bit too much for me, as i'd feel like i was blatantly stealing the script at that point.

Um, I just had an idea to mimic this effect. It might be one of those "no you stupid newbie, it doesn't work that way" things... but, couldn't i just do this?

<img src="erf.jpg" width="300" height="225"
onclick="height='480', width='640'" ondblclick="height='225', width='300'" />

jatar_k

7:54 pm on Aug 22, 2005 (gmt 0)

WebmasterWorld Administrator 10+ Year Member



don't know if that works but I am guessing that it really doesn't at all

another option, which I have done before when trying to understand how something works.

copy the relevant code then put up the full js file, from there start chopping function by function until you get to the quick.

The way to understand it is to read it, then start grabbing all the pieces. My js is not great but I do alright.

function clickZoomable
function clickZoomed
function showLr
function hideLr

those are at least the functions you need and this declaration from the top of the file

var g_openZoom = 0;

the basic definition of what it seems to be doing is just show/hide layers. Those 4 big pics are there, you just can't see them until you click. The function makes the appropriate layer visible. Then when you click on the now visible layer it hides it again.

lovehealthsuccess

3:00 am on Aug 25, 2005 (gmt 0)

10+ Year Member



Is this what as known as "layering"? Is the solution that was proposed above compatible with all of the major browsers....including Opera, Firefox, and Netscape? I was told that these browsers would have issues with displaying "layering" of images.

Thoughts?

Don_Hoagie

8:28 pm on Aug 25, 2005 (gmt 0)

10+ Year Member



Hi lovehealthsuccess...

Since your question isn't really related to this thread, i'm going to sticky mail you an answer, so this thread doesn't start moving in the wrong direction, or keep getting bumped when it's basically done.