block-random.php: 在你的網站上顯示Gallery中的隨機圖片
原作:Jeff
Barca-Hall
  翻譯:Meng Jen


Random
Photo Block (
block-random.php
add-on)
的原始版本是由Gallery的主要作者Bharat
Mediratta所設計,
這是Random
Photo Block
的一個修正版本,這個版本是設計用
於Nuke/PostNuke環境之外而且增加了一些新功能,你可以在這裡看到這份文件的the source
code
(原始碼)或相關意見 (注意:這並沒有在任何1.32版以前的Gallery上測試過.)。

bloack-random.php的原始版本也許在Nuke上執行的很順利,但我並沒有使用Nuke,所以我需要一個可以〞單獨〞在任何網頁上執行的版
本。在一些嚐試後,我現在有了這個執行順暢,可在同一頁顯示多個圖片,且每一張圖都能各自調整合適大小的版本。

這是block-random的例子, 可以放在表格中來對齊頁面。
Random photo #1
[This feature
requires IFRAME.]
Random photo #2
[This feature
requires IFRAME.]
在右圖裡可以顯示圖片的說明文字。

這是限定特定相本的block-random例子

Random #3 (single album)
[This feature
requires IFRAME.]

你可以用重新讀取來看看每一個格子中圖片的變化。

如何在你網站上使用

步驟:

  1. 將修正版的block-random.php上傳至你的Gallery安裝資料夾
  2. 在你的網頁上放置 IFRAME 網頁元件去控制隨機圖片
  3. 加入一個 JavaScript 功能在每次讀取新的圖片時去修改 IFRAMEs 大小

詳細說明:

1. 將修正版的block-random.php上傳至你
的Gallery安裝資料夾

你可以在 http://www.barcahall.com/gallery/block-random.phps
得到本修正版的程式碼。新增一個叫"block-random.php"的檔案,
將所有內容拷貝並貼到檔案中,然後將這個檔案FTP或用其他方式上傳到你的安裝資料夾。

2. 在你的網頁上放置 IFRAME
網頁元件去控制隨機圖片

在你的網頁上每一個要隨機顯示圖片的地方加入一個下列的 IFRAME標籤。 注意每一個IFRAME標籤必須有自己的名字 (不一定要特定的字眼,
例如. blockrandom1, blockrandom2, etc.):

 <IFRAME id="blockrandom1"  onLoad="iFrameHeight(this);"  src="/gallery/block-random.php?size=125&target=_top" width="125"  height="120" align=top scrolling=no frameborder=0>  [This feature requires IFRAME.]</IFRAME>

如有需要,你可以修改:

  • Gallery安裝資料夾的位置:修改 /gallery/ to another location if
    that’s not
    where you’ve installed your Gallery,
  • 圖片大小:修改那兩個 125 的數值 (?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
  • 圖片被點選後開啟的位置:修改 _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.
  • 特定相本:在src=
    string specifying the block-random.php URL
    的最後加入 &album=
    本名稱
    ; 這樣會使得程式只在特定相本中隨機顯示

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 added to block-random.php
(size, target, domain, and album). The height=120 value 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.

3. 加入一個 JavaScript
功能在每次讀取新的圖片時去修改 IFRAMEs 大小

在你加入IFRAME元件的那個網頁中, 加入下列的
JavaScript 在文件的 HEAD ( <HEAD> 和
</HEAD> 標籤之間):

<script language="JavaScript" type="text/javascript"> // document.domain='yourdomain.com'; // Uncomment and edit if "Access is Denied" runtime JavaScript error occurs function iFrameHeight(obj) { aID = obj.id; // if contentDocument exists, W3C compliant (Mozilla) if (document.getElementById(aID).contentDocument){ obj.style.height = document.getElementById(aID).contentDocument.body.scrollHeight; } else { // IE obj.style.height = document.frames(aID).document.body.scrollHeight; } }</script>

You’ll recognize the function name iFrameHeight() from the onLoad
attribute of the above IFRAME tag. 這個功能將會調整每一個 IFRAME
的「高(height)」(只有高). 而「寬(width)」會維持和你在 IFRAME 中設定的一樣 (本例中為125)。

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 uncomment and edit the following line
in the above JavaScript:

document.domain='yourdomain.com';

and you must add the following, replacing “yourdomain.com"
with the domain name common to your two servers:

&domain=yourdomain.com

to the end of the block-random.php URL in each of your IFRAMEs.

Notes

  • Browser compatibility. I’ve tested this version of
    block-random.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). Feel free to let
    me know
    if you have problems or suggestions using this. 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.php uses a cache file listing candidate photos from which
    it chooses at random. This list is only updated every 24 hours, so
    newly-added photos may not appear immediately unless you delete the
    cache file (called “block-random.cache" and located in your album
    directory), which will cause it to be re-built.
  • Excluding albums. Only albums with Permissions set to
    allow EVERYBODY to view are included in the random display. One way to
    exclude an album from block-random is to change its permissions so that
    only LOGGEDIN users can see it.

版本變革

Revised 20-Feb-2004 with a fix for the error
when a sub-album’s highlight photo was returned as the random photo
Revised 19-Feb-2004 with much better cross-browser support
Revised 7-Feb-2004 with ability to limit each random photo block to a
single album
Revised Dec 2003 with support for multiple random photos on a page

This version does the following:

  1. Fixes the “ERROR: requested index [] out of bounds" problem that
    occurs on second invocation of the original code.
  2. Supports the placement of this 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 same
          server, or on two servers in the same
    domain. An alternate approach that dynamically altered the DOM instead
    of
          using an IFRAME would avoid this
    security-based restriction, but I’ve not tried that yet.
  3. Allows the target photo from Gallery to be opened in a new or
    the same browser window.
  4. Allows the thumbnail to be scaled down and displayed smaller in
    the random block than it does in your album.
  5. 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.
  6. Multiple random photo blocks can be placed on the same page.
  7. Each random block can be defined to show only photos from a
    specific album.
  8. 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.
廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

%d 位部落客按了讚: