Linking with CSS Popup Image Viewer.

[adamburton]

1) Script Title: CSS Popup Image Viewer

2) Script URL (on DD):
http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

3) Describe problem:

Hello, I have had a look through the forum for answers to this problem but there are lots of questions about it and it seems like something that no-one has asked.

I am trying to use this script as a pop-up and a link to another page. In Firefox this works, I have it set up up a sample page here (http://adamburton.com/dd/index.html).

But in Internet Explorer it only works as a link when you clock the border. I have made the border extra thick: 15px so that it is a bit more obvious.
The same problem occurs on the example page on the DD site.

Saying that, I am using an Internet Explorer browser emulator add-on in Firefox so I might be wrong. I would appreciate your advice anyway.

I am new to CSS, I understand the basics and have looked at the code to try to understand what is wrong or how it can be fixed but I have now reached my limit.

Thank you very much for your help,

Adam.

[jscheuer1]

I see what you mean. The larger images could be linked directly, but this causes layout problems in FF, probably others, and in IE it makes the gallery's operation less smooth. So even though these extra links could be added via IE conditional comments, and thus not require javascript, I wouldn't recommend it.

This seemed to work out well, but does require javascript (but even without javascript, the gallery will still work as it does now in both IE and FF) -

Add this style:


.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
cursor: pointer;
}

Add this IE conditional script in the head of the page:


<!--[if IE]>
<script type="text/javascript">
window.ie = true;
</script>
<![endif]-->

Add to each larger image this sort of onclick event:


<img onclick="if(!window.ie)return true;window.location = 'acceptable_answers.html';return false;" src="images/boxa.gif" />

Use the same URL (red in the above example) as is used for each link with the thumbnail class.