Solution - How do I get two images to pop up when I click on an image

**jgt1942** · 09 March 2011, 04:51 PM

The following also appears in the original thread but I thought that it would also be a good idea to make it a separate post thus allowing other users to easier find the solution.

Get two images to pop up when I click on an image, This involves a two different components

Component 1
You will need a static page that will display the results. Following is a sample page “display-multi-image.html” that is invoked by the second component. FYI this is the actual page I used in my solution and I placed it at the root level of my site, if you place it elsewhere then you will have to make the necessary change in component 2.
<html>
<head>
<title>
Precision Marble: Display Pics
</title>

<script language="JavaScript">
var idx = document.URL.indexOf('?'); /*parameters on this URL? */
var new_image = document.URL.substring(idx+1,document.URL.length);
var new_image_Zoom = new_image + " Zoom.jpg";;
var new_image_Medium = new_image + " Medium.jpg";;
</script>
</head>
<body >
<div align="center">
<script language="JavaScript" type="text/javascript">
document.write('<B>Disclaimer:</B> TruStone is produced through the Photofuzion process and the results will vary, furthermore, computer monitors will display color differently. As such, images on our website should not be used for color matching or selection.  Rather, we recommend you view physical samples of colors at our showroom.<br /> <br /> ');
document.write('<h1>10" Detail View</H1> <br /> <br />');
document.write('<img src=' +'"' +new_image_Zoom+ '"'+'>');
document.write('<br /> <br /><h1>63" x 124" View</h1><br /> <br />');
document.write('<img src=' +'"' +new_image_Medium+ '"'+'>');
</script>

</div>
</body>
</html>

Component 2

Insert you image on the XWD page in the desired location.
Size the image to the desired size (the actual image will be placed on the webpage by the code below but to ensure proper placement of everything it should be the same size as the final image).
Select the image and click on the “Link Properties” icon in the toolbar (it looks like a chain link)
Click on the Placeholder tab
In the “Replace with HTML code” past the following>
<a href="#" onClick="window.open
('display-multi-image.html? <a href="#" onClick="window.open
('display-multi-image.html?images/StoneImage/Granite/Amber Fantasy','display_2','resizable,scrollbars,width=8 00,height=670').focus();return false;"><img src="images/StoneImage/Granite/Amber Fantasy Small.jpg" alt="Amber Fantasy" height="99" width="99" /></a>
In the above pasted code
1. 'display_2','resizable,scrollbars,width=800,height =670' defines the pop-up window
2. images/StoneImage/Granite is the path to my image
3. Amber Fantasy Small.jpg is the name of my image, actually I have three images in the folder that I will be using.
  1. Amber Fantasy Medium.jpg
  2. Amber Fantasy Small.jpg
  3. Amber Fantasy Zoom.jpg
4. height="99" width="99" is the size of the image on the live webpage. Remember above I mentioned to size the image in XWD the same as the image on the webpage. For me this is the size I needed.
Click on the Apply button
Click on the OK button
Click on the Save icon in the toolbar
Publish to your website and test.

I'm sure there are other methods but this worked for me. If somebody has a better suggestion, I'm all for it.

Again thanks to all that helped with the solution.

**gwpriester** · 09 March 2011, 07:41 PM

Gee, that is a lot of script. I would have just created a new layer and put the images on the new layer and linked the thumbnail version to the pop up layer. But if it works, cool. That's what counts.

**bjornkn** · 09 March 2011, 09:06 PM

He forgot to mention that there are almost 50 thumbs, which would have required you to make ~50 popup layers with ~100 images in total. Which means that when loading the page you'd have to wait for ~150 images to load (~100 of them initially invisible) - which would take a while even on a fast line.
This solution loads fast and works great. A bit much copy/paste/edit though, but it could easily be extended to show 200 thumbs or more with little effect on loading speed.

**jgt1942** · 11 March 2011, 06:02 AM

Yes I forgot to mention there are almost 50 thumbnails and I agree the copy paste to update all of the images is very boring and subject to making mistakes.

Currently I have six other pages where I will repeat the same thing only with different images. Possibly if I had the skills I could have done this much easier using PHP and MySQL. I'm still in the uphill portion of the learning curve with DW6 and it does allow me to create a much better looking website than I could with Dreamweaver. It was not the fault of DW it is due to my lack of skills.

I greatly appreciate the help that other members provided.

**bjornkn** · 11 March 2011, 06:50 AM

It might save you some time/typing to use the technique from http://xara-users.info/demos/popup-windows/ ?
Then you won't need to add HTMLplaceholders for each thumb, but can link directly from the thumb to the js function?

**zaphodeist** · 11 March 2011, 10:06 AM

Dejavu - posted answer the other day in this thread with direct reference to the OPs problem

**bjornkn** · 11 March 2011, 10:36 AM

Right

There are lots of good tutorials at http://xara-users.info :-)

**jgt1942** · 13 March 2011, 04:27 AM

Originally Posted by neodeist

Dejavu - posted answer the other day in this thread with direct reference to the OPs problem

The problem I saw with your suggestion (assuming I fully understood it) was that I'd have to create a new page for each image, thus for my page at http://precisionmarbleinc.com/produc...e-granite.htm# which contains about 50 thumbnails I'd add another 50 pages to the site and I have other pages that also need to pop-up a window with two images thus in total I'd have to add another 80-100 pages to my site. Already I have a huge maintance issue and this seemed to add to the problem.

**jgt1942** · 13 March 2011, 04:41 AM

Originally Posted by bjornkn

Right

There are lots of good tutorials at http://xara-users.info :-)

Yes I had looked through the tutorials but nothing seemed to match what I needed, however it could be I just did not understand what I was looking at. At this time referring me to the tutorials is like saying it is in the manual, e.g. I don't understand enough to understand just what I'm looking at. Some of the tutorials are really good and give you ALL the details others seem to assume that you know what the heck the author is talking about. Another example, if you try to explain something to me in French I hear the words but I have no idea what you are saying.

**bjornkn** · 13 March 2011, 07:07 AM

Well, the difference between your HTMLplaceholder solution and the one pointed to by neodeist, and again by me, the popup_windows demo is not that big.
Instead of writing an onclick function in each placeholder you just call the popup() function in the <head>, which basically would contain the same code that you now write once for each thumb.
You could then just use a normal link with "javascript

opup('image name')" for each thumb.