About The Laszlo PhotoBlox

PhotoBlox is an image viewing Internet application that can be embedded into a personal blog template or Web page, and displayed in any modern Web browser. With some simple editing of an external XML configuration file, you can:
  • Display your own images on the Web with dynamic transition effects at any of 3 window sizes

  • Customize presentation such as speed, panning, zooming, framing borders and image annotations

  • Easily specify Creative Commons licenses to define usage rights for your images

  • Integrate a Buy via PayPal link just for fun (please note our terms of service in the next paragraph :-)

  • Point to an MP3 file to play background audio during the slideshow

Laszlo Systems provides PhotoBlox free for experimentation and non-commercial use, to showcase Laszlo's platform for developing and deploying rich Internet applications. If you like PhotoBlox, please blog it and spread the good word about the Laszlo platform powering it. To take advantage of PhotoBlox, you should posess hands-on familiarity with digital image creation and HTML Web page publishing. The source code behind PhotoBlox is freely available under the same terms as the Apache Open Source license.

Please put PhotoBlox to good use. Respect the letter and spirit of content copyright and transmission laws. Support the efforts of the Creative Commons.

Embedding PhotoBlox in your blog or web page

Embed PhotoBlox by copying two script tags into your HTML page or blog template, one in the page header, and one in the page body. View the html source of the following example pages to see the simplest embed setup for PhotoBlox in each of 3 available pixel dimensions:

180x300 PhotoBlox in web page
480x480 PhotoBlox in web page
800x600 PhotoBlox in web page

You may also view source on this blogspot page to see how the PhotoBlox on the right was embedded. Search for the string "<!-- photoblox -->" to find the embed tags.

Customizing the photobloxdata.xml configuration file:

If you're comfortable editing XML files with a text editor, and know how to post files on a Web server (GeoCities or Tripod would suffice), then PhotoBlox gets really interesting. PhotoBlox can be customized as follows:
  1. Modify a copy of the default xml file using any plain text editor (NotePad, TextPad, TeachText, bbEdit, or any XML-aware editor)

  2. Upload the modified XML file as ANYNAME.xml to a Web server on the Internet

  3. Specify the URL location of this XML file in encoded form as the URL parameter within the lzEmbed script tag

The HTML page source of this example shows how:

Personalized PhotoBlox in web page | Pointing to this personal XML file

Usage rules for the photoblox XML tags are documented in the default photobloxdata.xml file comments. To help you with selecting desired customization settings, the PhotoBlox configuration page provides a GUI to preview the various PhotoBlox "customize" tag attributes. Please copy the resulting XML customizations from the text output field at the bottom of the page into your personalized photobloxdata.xml file.

IMPORTANT: embedding URL string parameters in the script tag requires URL encoding. To see examples of such tags with encoded URL strings, view source on the above example page. An URL encoding Web form is available at: Albion Research

Launching PhotoBlox in a pop-up window

As an alternative to embedding PhotoBlox in a page, you can launch it in a separate pop-up window. Here's an example:




FAQ

  • Client CPU requirements: Viewers of the PhotoBlox should have a broadband internet connection, 400 Mhz Pentium-class CPU or better, 128 Mb RAM or more, and a modern Web browser enabled with the Flash Player (version 5 or higher).

  • Image content: PhotoBlox can display JPEG, GIF, PNG and SWF files of arbitrary dimensions. For best viewing performance, we recommend compressing files to 100 Kb or less.

  • Setting up gallery shows: The default photobloxdata.xml file documents supported settings.

  • Adding an MP3 audio track: To maximize display performance for your audience, use a low encoding rate for any MP3 file you post to the Web (e.g. below 50 kbps, fixed data rate). Please refer to the SoundBlox information page for more details on the limitations of using audio via Laszlo and the Flash Player.
  • Initial load & play delays: PhotoBlox viewing performance is best with fewer galleries containing a dozen images or less, downsampled to 100Kb or less. The first time an image is viewed, the delay will be longer since the image must first be transferred from your image server to the PhotoBlox server, and then cached for future viewing. You may wish to view each image in your new gallery once to pre-cache the images for your visitors.



KNOWN ISSUES:

  1. IE 5.2 on Mac OSX does not display PhotoBlox. Apple Safari does work.

  2. Linux users: Flash 5 Player for Linux OS performs somewhat poorly. An upgrade to Flash 6 on Linux will improve playback performance.

  3. Embedding in Radio Userland: when pasting the 2nd script tag into the HTML template body, all the parameters in the lzEmbed function need to be double-quoted rather than single-quoted. Otherwise, the Radio system automatically attempts to convert the URL into an in-line hyperlink in the blog page, which results in browser script errors.


    4. For example:

    lzEmbed({url: 'http://www.mylaszlo.com/lps-krank/my-apps/
    soundblox/soundblox.lzx?lzt=swf&data_url=http%3A%2F%2F
    www.geocities.com%2Flyndon_wong%2Fsoundblox%2Fsoundbloxdata_plantskin.xml',
    bgcolor: '#ffffff', width: '180', height: '420'});

    must be changed to:

    lzEmbed({url: "http://www.mylaszlo.com/lps-krank/my-apps/
    soundblox/soundblox.lzx?lzt=swf&data_url=http%3A%2F%2F
    www.geocities.com%2Flyndon_wong%2Fsoundblox%2Fsoundbloxdata_plantskin.xml",
    bgcolor: "#ffffff", width: "180", height: "420"});


Need Help? Visit the BlogBox Support Forum


Please send feedback to PhotoBox Feedback


About The BlogBox Project: PhotoBlox is part of a series of BlogBoxes that provide rich Internet functionality for bloggers while showcasing the merits of Laszlo's declarative XML development approach. Application code in this series is available under an Apache-style open source license.



// posted by Lyndon W. Wong @ 10:24 AM