Pop-up Gallery

One of the criteria I wanted to meet for this gallery, a portfolio of web page screenshots with comments, was that it should work, as comfortably as possible, for users of even the smallest screen. One thing that quickly gets irritating is having to scroll up and down to find next and previous links when navigating a gallery, for example.

My solution was to have the comments pop up over the screenshot when the user hovers over it with the pointer. At 640x480px screen sizes a great deal of scrolling is obviated, and at 800x600px, for typical font sizes, no scrolling is required at all on most of the pages in the gallery.

Because Internet Explorer fails to handle positioned elements properly, this technique doesn't work in IE (Windows or Macintosh) prior to version 7. However it degrades gracefully, and all content remains accessible.

More importantly, the content remains accessible to users of non-visual and text-only browsers.

For this gallery implementation I used a version of Website Baker's Image Gallery module. I have previously rewritten parts of this module so that it pumps out pure XHTML (with no styling or layout code - no tables), and this gallery is based on those amendments.

The main <div>

We create a <div> to enclose it all:

<div class="portfoliopage">

and center-align the text

.portfoliopage {
	text-align: center ;
	}

The links

And create the links for "previous" and "next", and to return to the main gallery page:

<div class="alignleft">
	<a href="[link to previous item]">previous</a>
</div>
<div class="alignright">
	<a href="[link to next item]">next</a>
</div>
<a href="[link to main gallery page]">return</a>

We align them appropriately:

.alignright {
	float: right; 
	text-align: right ;
	}
.alignleft {
	float: left ; 
	text-align: left ;
	}

And to keep things properly aligned, make them occupy space even when the link isn't present:

.portfoliopage .alignright, .portfoliopage .alignleft {
	width: 8em; 
	height: 1em;
	}

Name the item in a heading

<h1>A heading</h1>

An anchor for the pop-up

Here's where the clever stuff starts. We create a <div> to which the pop-up will be anchored:

<div class="pop-upanchor">

and give it a position:relative (so it will become the point of reference for an absolutely-positioned child element) and centre it. IE 5 for Macintosh won't display that <div> with the position: relative, so we hide that rule from it, by preceding the closing comment delimiter before it with a backslash:

.portfoliopage div.pop-upanchor	{
	 /* comment to hide the next line from IE5 Mac \*/
	position: relative;
	/* previous line hidden from IE5 Mac by the backslash above */
	width: auto;
	margin: 0;
	}

And a trigger for the pop-up

The <div> which triggers the pop-up:

<div class="trigger">

and we keep the trigger area no wider than the screenshot (in this case, we happen to know that the images will be 400px wide):

.portfoliopage div.trigger	{
	width: 400px; 
	margin: auto;
	}

followed by screenshot image:

<img src="http://esquivalier.com/media/.gallery/main4.jpg" />

The pop-up caption

Then there's the caption:

<div class="caption">
	<p>[The caption lives here]</p>

Now we want the caption to be hidden, until it's triggered by the pointer hovering over the trigger area. We hide it by positioning it off-screen, and display it by positioning it in a suitable place when we do want it to be seen.

Unfortunately the wretched Internet Explorer for Windows can't handle all this, and fails to display it at all. So what we use is a different bug in IE to skip this. IE will just have to display the caption after the screenshot, and do without the pop-up.

html>body .portfoliopage div.trigger  div.caption {

We also need to hide the last three lines of the declaration from IE Mac; for that we can use the same trick as before:

	/* comment to hide the next lines from IE5 Mac \*/
	position: absolute; 
	top: 0; left: -20000px;	
	width: 150%;	
	/* previous lines hidden from IE5 Mac by the backslash above */
	}

Popping up the caption

Then there's the CSS code which displays the triggered pop-up in the right place, along with its animated GIF background. The right place is somewhere over the trigger area - this is important, because it garantees that the user can reach any links within the caption:

.portfoliopage div.trigger:hover  div.caption {
	padding: 10px; 
	border: solid black 2px ;
	position: absolute; top: 0; left: 0; 
	width: auto; margin: 10px ;
	background: #a1a1a1 url(images/captionbackground.gif);
	color: black;
	}

Closing the <div>s

And finally we close our four <div>s:

			</div> <!-- caption -->
		</div> <!-- trigger -->
	</div> <!-- popupanchor -->
</div> <!-- portfoliopage -->