Pop up. Pop over. image (kind of) ?

Gog · June 7, 2012 1:16 am

Firstly please forgive me as this is almost a re-post of a query I made about 8 months ago on this forum and I am hoping that someone may now be able to offer me a solution or a work-round.

I am very pleased with my site: http://www.alresfordheritage.co.uk and it does everything (almost) that I require.

As you will see my site contains a large collection of old historic images. However the only remaining thing on my "wish list" is to find a way of displaying modern-day photographs depicting the changes along with the old ones.

This is what I would ideally like to be able to achieve:
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.

I am posting a link to another site: http://www.newmilton.org.uk which has many images containing the exact effect I would like to create.

Thanking anyone, in advance, for any help or suggestions

macdafydd · June 7, 2012 8:59 am

Perhaps a bit of Javascript will help. Take a look at

http://www.javascriptkit.com/script/scr … age2.shtml

or

http://www.pcurtis.com/popup.htm

and there are plenty of others out there.

Gog · June 8, 2012 1:07 am

macdafydd wrote:

Perhaps a bit of Javascript will help. Take a look at
http://www.javascriptkit.com/script/scr … age2.shtml
or
http://www.pcurtis.com/popup.htm
and there are plenty of others out there.

Thank you macdafydd for taking the time to help me find a solution. What you suggested is obviously the only way I am ever going to achieve the results I desire. The examples shown in your first link would be ideal for my purposes.

BUT somehow I do not think I am ever going to have the knowledge be able to understand how to inject Javascript in to my Sandvox site. Which is such a great shame.

macdafydd · June 8, 2012 4:48 am

Injecting Javascript is, like most things Sandvox, a piece of cake, once you know how to do it. Go to the first link in your browser (Safari or whatever):

1. As mentioned in Step 1 of the linked page, copy the script code,
2. Back in Sandvox, open your site and select menu item Edit>Site Code Injection…;
3. In the window that opens, click on the Befoe Deocument tab (and note what is written there already, just out of interest);
4. Paste the copied script into the text area (don't worry about the grey explanatory text already there—it will be overwritten);
5. Close the window (and notice how now there is a little syringe next to your Home Page icon in the Sandvox navigation column, which indicates the presence of Script Injection code).

You have now placed some Javascript code in your site. Be honest, not too difficult! Now to enter some HTML to make use of that code:

6. Go back to your browser and now look at Step 2: copy the HTML code;
7. Back in Sandvox, select one of the pages from which you wish to call up the popup window and place the insertion point where you want your link to the popup to be seen;
8. Select Objects>Raw HTML from the Sandvox toolbar (or, if you prefer, use menu item Inset>Raw HTML);
9. In the window that opens, select the text [[RAW HTML]] between the opening and closing span tags (it's best to leave the span tags there);
10. Paste the HTML code you copied in step 6, so that the Raw HTML text is overwritten;
11. Now comes the awkward part, for the copied HTML code does not yet refer to your image, but to some test image that will not be found, and there are other things that need changing, too: don't panic!

The HTML code you just pasted looks like this

<a href="#" onClick="jkpopimage('food1.jpg', 325, 445, 'Breakfast is served.'); return false">
Breakfast pancakes</a>

a. See 'food1.jpg'? That's the link to the image to be shown in the popup window. You must change this to the pathname (relative or absolute, makes no difference, I prefer relative) of the image you wish to show;
b. See 325, 445? That's the size of the window in pixels, width and height. You change these numbers to the width of your image and the height of your image, adding 20 to the width and 45 to the height (to allow for text, centring, etc.) (and if you don't like the results, you can always come back to the Raw HTML to edit it later);
c. The text, Breakfast is served, is what will appear at the bottom of the popup window, below the image: change that to what you want to see;
d. The text, Breakfast pancakes, is what will appear as the link: change that to what you want to see.

As an example, a modified HTML code might look like:

<a href="#" onClick="jkpopimage('../images/me.jpg', 550, 655, 'In the garden.'); return false">
See latest image</a>

Once you've done that, close the window. To test, export your site locally (it will not necessarily test correctly in Sandvox).

It looks a hassle, I know, but you only have to do the Site Code Injection once, and as for the Raw HTML, after the first two or three, you'll get the hang of it.

Edit: You'll find a variation on the theme at http://www.boutell.com/newfaq/creating/windowsize.html where the code offered frees you from having to add extra pixels to the width and height parameters. Otherwise, basically the same.

Gog · June 8, 2012 8:45 am

macdafydd,

What a brilliant explaination. As soon as I find time I will give it all a try and will let you know the results.

ps It never fails to amaze me that in this world of 'grab & take' there ARE still people that are prepared to share their time, expertise and knowledge freely with others.

macdafydd · June 8, 2012 11:48 am

Glad to hear you are prepared to give it a try. Above all, do not become frustrated or disappointed if you have problems. Making errors really are a good way of learning. And if it gets too difficult, just email me or leave a message here. Patience and perseverence! I hear and I forget; I see and I remember; I do and I understand.

RobW521 · June 8, 2012 12:29 pm

I would certainly agree with Gog's feelings about the willingness of people here to help out. (David and another Sandvox user helped me a lot as I was working on my first site with Sandvox.)

One thing that I found helpful was to set up a "test" sandvox document. I use it just to fool around with things that I want to try, things I need to learn how to do, or just to see how things will look. It actually is a "mini-version" of one of my sites. (It has a fraction of the pages, pictures, etc that my published site has.) It allows me to comfortably make mistakes and mess up without the worry that I'm going to cause other problems on my published site. I've set it up to publish on a local folder for times when I want to see exactly how it will look on Firefox, Safari, etc.

I've also avoided injecting javascript, etc--but may fool around with it pretty soon on my test site just to see what happens and how it looks.

macdafydd · June 10, 2012 3:12 am

RobW521, that's the way to do it! Small test sites, no worry about trying silly things and making mistakes. Excellent way to learn.

Gog, you might like the piece I have posted, as a result of your question, at http://davidneale.eu/sandvox/popup-window.html

Karelia Community Forum

#1 June 7, 2012 1:16 am

Pop up. Pop over. image (kind of) ?

#2 June 7, 2012 8:59 am

Re: Pop up. Pop over. image (kind of) ?

#3 June 8, 2012 1:07 am

Re: Pop up. Pop over. image (kind of) ?

#4 June 8, 2012 4:48 am

Re: Pop up. Pop over. image (kind of) ?

#5 June 8, 2012 8:45 am

Re: Pop up. Pop over. image (kind of) ?

#6 June 8, 2012 11:48 am

Re: Pop up. Pop over. image (kind of) ?

#7 June 8, 2012 12:29 pm

Re: Pop up. Pop over. image (kind of) ?

#8 June 10, 2012 3:12 am

Re: Pop up. Pop over. image (kind of) ?

Board footer