Home/ Questions/Q 8001661
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T16:08:45+00:00

First off I am completely new to Javascript but I have some HTML/CSS experience.

  • 0

First off I am completely new to Javascript but I have some HTML/CSS experience. I’ve been trying to create an html/javascript image gallery for a website; (It would probably be a lot easier to do in PHP but the web coordinator disabled PHP on our server for security reasons).

Anyway What I have is a page showing an Album-list, Album-browser and Photo-viewer in different a div and 2 iframes respectively. I have it set up so that when someone clicks on an album from the album list, a page is opened up in the album browser section (iframe:”browser-frame” showing thumbnails of all the images in the particular album). I’ve been trying to set it up so that when someone clicks on an image in the album browser the image will appear in the Photo-viewer section (iframe:”viewer-frame” showing the photo itself).

I didn’t want the photo’s in the viewer-frame to be larger than the set dimensions for the viewer-frame so I created a page for the viewer-frame that puts the image in a div with a class of set dimensions (defined in a stylesheet) as follows:

...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />              
</div>
</body>...

I then created a script that updates the image src to a variable:image_to_be_viewed and called it image-changer.js

// JavaScript Document
{
var image_to_be_viewed="images/album1/1.jpg";
document.getElementById("viewed_image").src=image_to_be_viewed;
}

And added a script to the viewer-frame page so it looks like:

...<body>
<div class="photoview">
<img id="viewed_image" class="large" src="images/album1/1.jpg" />
<script src="image-changer.js"></script>              
</div>
</body>...

Now I wanted the gallery to work so that in the page loaded in the browser-frame, whenever one clicked on one of the pictures, the value of the global variable ‘image_to_be_viewed’ would be changed to the source of the clicked image as follows:

<body>
<div class="photobrowse">
        <img class="medium" src="images/album1/1.jpg" onClick="image_to_be_viewed='images/album1/1.jpg'"/>
        <img class="medium" src="images/album1/2.jpg" onClick="image_to_be_viewed='images/album1/2.jpg'"/>
        <img class="medium" src="images/album1/3.jpg" onClick="image_to_be_viewed='images/album1/3.jpg'"/>
</div>
</body>

It doesn’t work….

the gallery i’m working on is on http://ptc.tamu.edu/test/gallery_directory/test_gallery.html
everything up to the loading of the selected picture in the viewer frame works (I’m running the onlick event on the default loaded pictures 1,2,3 in the browser-frame page)(default pic’s 4 and 5 simply load the image in the iframe but with no way to adjust the size it is too big and gets cut off and i don’t want that)

I’ve been working on for an entire day and I’m sure I’m doing something wrong here but I can’t figure out what exactly it is. I have a feeling it has to do with changing the global variable: image_to_be_viewed from the browser-frame page but I wanted to confirm with experts instead of flopping about like a headless fish. I’m going to continue trying to figure this out but i thought maybe having some expert assistance would speed up the process.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    What the onclick triggers should be a javascript function call.

    e.g. onclick="changeImg('images/album1/1.jpg')"

    And the function itself should looks like this

    function changeImg (image_to_be_viewed) {
  document.getElementById("viewed_image").src = image_to_be_viewed;
}

    btw, you probably should learn javascript a little bit more before work on something real. I recommend this book

    • 0