Displaying Gallery Random Photos with IFrame and JavaScript
Jeff Barca-Hall

If you are unable to structure your page for random photo display as a Server-Side Include (.shtml) page or a PHP page, another alternative is to use an IFrame and let the browser, rather than the server, call your Gallery to pick a photo at random and display it and its caption. You may also need to use this technique if your Gallery and your homepage are on different servers. (The alternative: server-side inclusion of random block.)

This page documents how to use an IFrame and JavaScript to include block-random-enhanced.php, my version of Gallery's block-random-enhanced.php, in your own HTML page with the page content resized dynamically to fit each random image.

Here's an example of two random image blocks, each placed in its own IFrame and resized as needed after the page has loaded in your browser.
Random photo #1
Random photo #2

Here is an example of another random block, restricted to a single album (plus its sub-albums):

Random #3 (single album)

Reload this page to see a different photo in each random block.

This version is derived from the block-random.php now included with Gallery, but adds the following:

  1. Supports the placement of the random block in a size-to-fit IFrame.
    Note: This technique only works in browsers that support IFrame (e.g. IE 5+, Netscape/Mozilla 6+), and the IFrame is resizable only if your gallery and the page showing the random photo are on the sameserver, or on two servers in the same domain.
  2. Allows the target photo from Gallery to be opened in a new or the same browser window, or in a named Frame.
  3. Allows the thumbnail to be scaled down and displayed smaller in the random block than it does in your album.
  4. Tweaks the layout: The photo and its caption are centered in the random block, with zero margins, using the same background and text style as the album from which the photo comes.
  5. Each random block can be defined to show only photos from a specific album and its sub-albums.
  6. Fixes the problem of "Fatal Error: Call to a member function" when clicking on a random photo which was actually the highlight photo for a sub-album. Highlight photos are now skipped in favor of "real" photos in an album. If a randomly selected album contains nothing but highlight photos, the album itself is presented in the random block.

How to Use this on Your Own Page

1. Copy block-random-enhanced.php into your Gallery (version 1.4.4 or later) installation directory
You can get the source of this custom version at http://www.barca-hall.com/block-random-enhanced.phps. Copy and paste the entire contents into a file named "block-random-enhanced.php" and FTP it or otherwise place it in your Gallery installation directory.

2. Copy the companion JavaScript file into the docroot on your server, and reference it in your HTML page
The file source is view-source:http://www.barca-hall.com/block-random-support.js. Copy and paste the entire contents into a file named "block-random-support.js", and FTP it or otherwise place it in the docroot of your web server (not in your Gallery installation directory). You then must reference this file in the HTML Head of the page on which you want to display random images. Do this by placing the following line of code into the HEAD of your page (just above the closing </HEAD> is a good place), adjusting the SRC pathname as needed for your installation:

	<script language="JavaScript" type="text/javascript" SRC="/block-random-support.js"></script>

3. Place one of more IFrame html elements on your page to hold the random photo(s)
Add an IFrame tag to your page for each random photo. Note that each IFrame must have a unique name (the specific names do not matter, e.g. blockrandom1, blockrandom2, etc.), and that the name should be specified twice, as both the ID and the NAME attribute of each IFrame:

    <IFrame id="blockrandom1"
            name="blockrandom1"
            onLoad="iFrameHeight(this);"
            src="/gallery/block-random-enhanced.php?size=125&body=1&target=_top"
            width="125"
            height="120" align=top scrolling=no frameborder=0>
      [This feature requires IFrame.]
</IFrame>
You can make the following customizations, as needed:

You can place your IFrame inside other HTML elements (such as a TABLE as I've done on this page.) There are additional comments in the php code to document the parameters I've defined . The height=120 value on the IFrame above is not critical, but helps minimize the "severity" of the page redraw if it's a value close to the final height of most of your random images plus room for the caption.

The call to iFrameHeight(this) every time your page loads will cause each IFrame to be sized to fit whatever image gets randomly loaded. This function will resize the height (only) of each IFrame. Its width remains whatever you've specified for the IFrame (125 in this example.)

For security reasons, the browsers prevent the resize operation unless your page and the page loaded into the IFrame come from the same server, or two servers in the same domain (e.g. "www.yourdomain.com" and "gallery.yourdomain.com".) If you are getting the JavaScript error "Access is denied" when your page loads, and you are using two servers in the same domain, you need to add the following JavaScript statement to the same page as your IFrame:

document.domain='yourdomain.com';

and you must add the following to the end of the block-random-enhanced.php URL in each of your IFrames, replacing "yourdomain.com" with the same value you used in the JavaScript statement mentioned above:

&domain=yourdomain.com

Notes

Last Modified: Thursday, 22-Jun-2006 01:20:30 EDT