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 is an example of another random block, restricted to a single album (plus its sub-albums):

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>

• Change the /gallery/ to another location if that's not where you've installed your Gallery,
• change the two 125 values (?size=125 and width="125") to something else if you want your random photo scaled to a different size (aspect ratio is preserved); for best results do not make these values larger than the size of the thumbnails in your gallery, and
• change _top to _blank if you want to open the photo, when it's clicked, in a new window, or specify the name of an existing target frame if you're using frames.
• add &album=an-album-name to the end of the src= string specifying the block-random-enhanced.php URL; doing so will limit the block to show photos only from the album of that name, or from its sub-albums.

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

• Opera users: If you're seeing the same image repeated in multiple random blocks on one page, this is because your src= URLs are identical in each of the IFrames (a perfectly normal situation) and Opera is only making the call to block-random-enhanced once, then using the results in each "matching" IFrame. You will need to "trick" Opera by trivially editing the URLs so that each is unique; I recommend adding a dummy parameter to the URL in each IFrame (&dummy=1, &dummy=2). View source on this document and see how I did that for the second IFrame on this page ("blockrandom2").
• Browser compatibility. I've tested this version of block-random-enhanced.php with IE 5.5 and IE 6.0, and have it now working in Mozilla 1.6 (thanks for the bug report, Jim Trottier), and Mozilla 1.2.1 and Opera 7 (thanks: Karel Kerezman, Dennis Stolt), and Apple's Safari (thanks, Verdon Vaillancourt). It will not work in older browsers.
• Larger images. You can modify the script to display the full- or intermediate-sized images instead of the thumbnails. See this newsgroup posting for instructions.
• New photos. Remember that, to improve performance, block-random-enhanced.php uses Gallery's Random Block Cache file, which lists eligible albums, and the number of photos in each, from which it chooses at random. The expiration period of this list (normally 24 hours), can be changed in your Gallery Configuration Wizard (the "Technical" tab). Newly-added photos may not appear immediately unless you (temporarily) shorten the expiration period.
• Excluding albums. Only albums with Permissions set to allow EVERYBODY to view are eligible for random selection. One way to exclude an album from block-random-enhanced is to change its permissions so that only LOGGEDIN users can see it. Note that permissions are not checked on the album, if any, specified with the album= parameter; sub-albums within that album, however, are checked.