A Karelia Community Forum member asked the following:
When one of my larger (historic) images is being displayed I would like to have a line of text underneath the image saying something like: 'please click here to see a modern photograph of the same scene'.
When this line is clicked I would like the (modern) picture to display roughly over the position of the historic one. I would like this modern image to be movable by using the cursor and closable by clicking a "x" leaving just the historic image.
Something along these lines can be achieved with plain HTML, opening a new window and showing the new image in there, but it would be cumbersome for the user. A better solution seemed to be that offered by a piece of Javascript to allow a smaller window to be "popped up" and, if necessary, reused.
Here's an example:
This is how the trellis looked in June 2010
How is it done?
Well, surprisingly easily, thanks to the Code Injection features of Sandvox.
Firstly, there's the Javascript, which should preferably be available to the whole site, so, with our Sandvox site open in Sandvox, we use the menu item Edit>Site Code Injection… In the resulting window, we select the Head Area tab and place the insertion point in the lower text area. There are plenty of popup Javascripts available on the Web, but I chose the one here and modified it just a little to make things easier for everyone. The code is as follows:
Don't worry if it looks daunting. All you need to do is to copy and paste it!
Once pasted, you can close the Site Code Injection Window.
Now that the Javascript is installed, we need to add a bit of Raw HTML in order to activate it.
The HTML that I have used above also displays the "Show recent photo" button and looks like this:
There are a few things to note here, as they will need to be changed:
a. the pathname ../../pics/gardennew.jpg points to the image to be displayed in the popup window; I have used a relative pathname, but it can be an absolute pathname if you prefer (i.e. beginning with https://);
b. the 640, 480 refer to the size of the image pointed to (width and height); there is no need to add pixels for borders, as the Javascript takes care of that;
c. the 'After two years' is the caption that will appear below the image in the popup window;
d. "../../pics/see_recent.jpg"> is a pointer to the graphic used to produce the "See recent photo" button. Feel free to copy this button if you wish (you will need to change the pointer, of course), or you can substitute any other graphic, again changing the pointer. If you want a simple text link, no problem: just change the whole thing to a piece of text between quotes, such as "Click here to see more recent image."
And that's just about it. If you are unsure about using paths and pathnames, take a look here.
Any questions? Use the contact form.