Javascript Photo Gallery

A Pop-Up Photo Gallery

Another very popular way of presenting a set of related photos and captions is the pop-up window photo gallery. Usually these are a dozen or so images navigated via previous and next buttons. Click the link below to see how the script easily works on a single, small window.

open the pop-up gallery

<a href="javascript:void(window.open( 'demo4_pop.htm', 'mypop', 
  'width=500,height=320'));">open the gallery</a>

I went a bit overboard attempting a pure style-sheet layout on this one, so I hope you'll forgive that this one does not use tables, but since most the trend has been and remains CSS, well, this is one less I'll need to write. Though I'm not that great at layout using styles.

One more stylistic touch: it's nice to make sure the window comes up on top of all other open browser windows. This is particularly useful if the same window name (the second attribute in the open command) is used. One could put a focus in the onload event handler of the popup itself, but that doesn't always work. Try this:

<script language="javascript">
function doMyPop(){
  var hWnd= window.open( 'demo4_pop.htm', 'mypop', 
    'width=500,height=320');
  hWnd.focus();
  }
</script>

Then the HTML would be:

<a href="javascript:void(doMyPop());">open the gallery</a>