Invent Media Flash PhotoGallery

"Invent Media Flash PhotoGallery" is a free, simple to implement flash photo galley that requires absolutely no Flash or ActionScript skills to implement. The flash file is easily embedded into your webpage and the image files are read from an .xml file that can be easily edited using any text editor. A detailed feature list, instructions, and download links are below the example.

FAIL (Flash Plugin not installed).

Features

  • 100% free to use *
  • No Flash or Action Script programming required. Image location read from an .xml file.
  • Can load images from any location including subdirectories
  • Slideshow function. Automatically transition from image to image
  • Thumbnail bar
  • Image count X of Y e.g. image 6 of 20
  • Customizable image caption. Also read from the .xml file
  • Fullscreen mode with fit to screen button and zoom controls
  • Help screen
  • Fully scalable, can be set to any size
  • Background color can be set to any color
  • Transparent background (transparent mode is not compatible with all browsers)
  • Small file size
  • Automatically scales large images to fit. Image are not resized so quality is preserved
  • Download preloader with progress bar. Indicates the progress of large images
  • Download includes documentation and full working demo with html code
  • Helps to protect images from piracy
  • Supports an unlimited number of images

Navigation

  • Next Image button
  • Previous Image button
  • Play button (start slideshow)
  • Pause button (stop slideshow)
  • Thumbnail bar scroll left
  • Thumbnail bar scroll right
  • Fullscreen mode
  • Zoom in **
  • Zoom out **
  • Cancel zoom **
  • Fit to screen mode **
  • Help

** Fullscreen mode only

 

* The "Invent Media Flash PhotoGallery" is 100% free to use however the the "Invent Media" logo must be visible at all times (please read the full terms and conditions). If you wish to use the product without the "Invent Media" logo a version without the logo can be purchased below for the super low price of $9.99 (AUD).

Download

The "Invent Media Flash PhotoGallery" can be download below. The .zip file includes a full working demo and all documentation needed to implement the photogallery.

Download

If you use the "Invent Media Flash PhotoGallery" we would love to hear from you. Please send us a shout-out via our contact page. We may even link to your site as a demo.

How to use


Download

Download the .zip file from above and extract the file to your machine.


Create thumbnails

Create thumbnails for the images that you are going to use. The thumbnails should 100 pixels wide and 67 pixels high. There are many tools online that can create thumbnails automatically for you. Note: images and thumbnails must be in .jpg format. Images can be any size however it is recommended that they are 800 pixels wide and 600 pixels high.


Edit the images.xml file

Edit the "images.xml" file using any text editor (e.g. Notepad) to include the image name, location, and caption, thumbnail name and location. The code below demonstrates how to do this. You only need to modify the code in yellow.

<pic>
    <image>image_location/image_name.jpg</image>
    <caption>image_caption</caption>
    <thumbnail>image_thumbnail_location/image_thumbnail_name.jpg</thumbnail>
</pic>

Example

<pic>
    <image>images/photo1.jpg</image>
    <caption>A day at the beach</caption>
    <thumbnail>images/photo1thumb.jpg</thumbnail>
</pic>

To add more images simply cut an paste the entire text between and including the <pic></pic> tags.


Embed the flash file

There are many ways embed the Flash file into your HTML code. I currently use the following code based on this recommendation from Adobe.

You must change the code in yellow. The code in green is optional.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,18,0" width="width in pixels - default is 810" height="height in pixels - default is 740 id="imgallery" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="ImageList=image_xml_file_path/image_xml_file_name.xml" />
<param name="movie" value="flash_file_path/imgallery.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="background color" />
<embed src="flash_file_path/imgallery.swf" quality="high" allowFullScreen="true" scale="noscale" bgcolor="background color" width="width in pixels - default is 810" height="height in pixels - default is 740" name="imgallery" align="middle" allowScriptAccess="sameDomain" type= "application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Example

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,18,0" width="810" height="740" id="imgallery" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="FlashVars" value="ImageList=gallery/images.xml" />
<param name="movie" value="gallery/imgallery.swf" />
<param name="quality" value="high" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="#1d1917" />
<embed src="gallery/imgallery.swf" quality="high" allowFullScreen="true" scale="noscale" bgcolor="#1d1917" width="810" height="740" name="imgallery" align="middle" allowScriptAccess="sameDomain" type= "application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

If you use the HTML 4.01 strict !DOCTYPE you can also use this code

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="810" height="740">
<param name="allowScriptAccess" value="sameDomain">
<param name="allowFullScreen" value="true">
<param name="FlashVars" value="ImageList=gallery/images.xml">
<param name="movie" value="gallery/imgallery.swf">
<param name="quality" value="high">
<param name="scale" value="noscale">
<param name="bgcolor" value="#1d1917">
<!--[if !IE]> <-->
<object data="gallery/imgallery.swf" width="810" height="740" type="application/x-shockwave-flash">
<param name="allowScriptAccess" value="sameDomain">
<param name="allowFullScreen" value="true">
<param name="FlashVars" value="ImageList=gallery/images.xml">
<param name="movie" value="gallery/imgallery.swf">
<param name="quality" value="high">
<param name="scale" value="noscale">
<param name="bgcolor" value="#1d1917">
<param name="allowFullScreen" value="true">
<param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
FAIL (Flash Plugin not installed). </object>
<!--> <![endif]-->
</object>

 

Upload

Upload the imgallery.swf, along with you new webpage and your images including the thumbnails to your server. The images can be in any path as long as they match what is defined in the images.xml file. For example "/images/gallery"

The flash "imgallery.swf" and .xml files can be any name and path as long as you specify them in the webpage when you embed the flash object.

Purchase

The "Invent Media Flash PhotoGallery" is 100% free to use however the the "Invent Media" logo must be visible at all times (please read the full terms and conditions). If you wish to use the product without the "Invent Media" logo, a version without the logo can be purchased for the super low price of $9.99 (AUD). Think of the hours you will save, do the maths, there is no way this could be cheaper!

After you have completed your purchase you will receive an email with an attachment containing the files with the logo removed. Please note that the delivery of the product is almost immediate for most orders however due to differences in international time zones you may have to wait several hours before your order can be processed.

Copyright © 2008 Invent Media