How to make this javascript photo viewer to work

Discussion in 'JavaScript' started by Happy Feet, Dec 15, 2009.

0
  1. #1
    i have this website that displays photos of cars, check what i mean, http://portlandsauto.com/used-2009-Infiniti-G37----Portland,-Oregon-portland_576

    when you click on the small image, it becomes the large image in the window. It works fine. but, i want that option on a different website without the other stuff, no header, no footer, no details, just the photo viewer. What files do i need to get or how can i do it?

    any suggestions?


    One other thing, when you click on the large image, a new window opens and you can see the full size of the picture... i need all of those options on my other website.
     
    Happy Feet, Dec 15, 2009 IP
  2. s_ruben

    s_ruben Active Member

    Messages:
    735
    Likes Received:
    26
    Best Answers:
    1
    Trophy Points:
    78
    #2
    You can do it by Javascipt. Here is a very simple example:

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>Photo Viewer</title>
</head>

<script>
    function change_large_photo(photo_id){
        large_photo_src = "large_photos/"+photo_id+".jpg";

        document.getElementById("large_photo").src = large_photo_src;
    }
</script>

<body>

<div><img id="large_photo" src="large_photos/photo1.jpg"></div>

<div><img id="photo1" src="photo1.jpg" onclick="change_large_photo(this.id);"> <img id="photo2" src="photo2.jpg" onclick="change_large_photo(this.id);"> <img id="photo3" src="photo3.jpg" onclick="change_large_photo(this.id);"></div>

</body>

</html>
    Code (markup):
     
    s_ruben, Dec 16, 2009 IP