dfGallery 1.0b

Version 1.0.0.1b

Reference Documentation.

Table of Contents

Introduction
- About dfGallery
- Features
Requirements
Structure Overview
Configuration
- Initial Configuration
- Albums
  - Custom albums
  - Flickr
  - Picasa
  - Fotki
  - Photobucket
- Internationalization (Language Support)
Deployment
- Where to add the code
- deploying the gallery on wordpress appications.
Bug reports
- Found a bug (report it and let us fix it ASAP).

Introduction

About dfGallery

As stated on many other articles on this site, dfGallery is one of the coolest Galleries currently on the Web.
We have tested this gallery to the maximum but still having it in beta cos I am sure there will be a lot more feature additions.

You could also request for a new feature on this Gallery by adding your suggestions on the downloads page.

This gallery is a similar replica of the Gallery at Slideshowpro.net for which they charge 25$ but here is our Gallery for FREE.

With great features of most popular photo sharing sites integrated like Flickr , Picasa , Photo Bucket and Fotki along with background music, language support this gallery will fulfill all the needs of even a professional photographer or even a freelance artist.

Features

Flash Gallery to support both Flickr , Picasa , Photo Bucket , Fotki and Custom Images.
Enable / Disable “Print Screen” ( requested by Photographers )
Easily Customizable
Full Screen mode. ( on the Right Click, or by clicking the fullscreen button - Flash Player 9)
Liquid Layout - Fits to any size you specify.
Notifies if a new update is available.

Requests

Radu Capan - Loading images from cache.
Nudone - Viewing the gallery in fullscreen and the extra fullscreen button option.
Ed, Mauricio, Akirasan - hyperlink for each image
Jansen Lucas - pause the slideshow at start.
Robos, Patrick ,Fedo - Background MP3 music that loops, along with volume control.
David - loading sets from flickr as albums.
Red , Antonio - Multiple language support.

Go to Top

Requirements

PHP version 5+ (not tested with lesser than versio 5)

Flash player 7+

(Fullscreen option will work only if the client is using Flash player 9+)

Go to Top

Structure Overview

Files within the zip file.

gallery.swf (the actual gallery that plays the slideshow)
gallery.xml (complete gallery configurations)
df folder (this folder contains php classes that are internally used by the gallery to make calls to the Flickr,Picasa API )
index.html (contains the sample html code for insertnig the swf file)

Go to Top

Configuration

All configurations for the gallery are stored in the gallery.xml file.

If you are new to editing XML files then I suggest you take a short time on reading the XML tutorial on w3schools.com

Open the gallery.xml file in a text editor. (This is a default file that you can edit).
The xml file has 3 main nodes, the “config”, “albums” and “language”.

The “config” node contains all the core configurations of the gallery.

Title of the gallery.
Find a node that says “<title>your_album_title</title>” within the “config” node and replace the value inside the node with your album title.

Thumbnail image directories.
Find a node that says “<thumbnail_dir>images/thumbs/</thumbnail_dir>” within the “config” node and replace the value inside the node with the path of the directory containing the thumbnails.
The path must be relative to the gallery.swf

High-Res image directories.
Find a node that says “<image_dir>images/</image_dir>” within the “config” node and replace the value inside the node with the path of the directory that contains the actual high resolution images.
The path must be relative to the gallery.swf

Time duration of the slideshow.
The slideshow has a default of 7 seconds.
If you want to set your own duration just replace the value inside the “<slideshow_interval>5</slideshow_interval>” node with your time.
The time interval is in seconds.

Scale the images from RSS feeds.
The application calculates the size of the images to load based on the size of the gallery you have specified.
If the gallery is smaller than the RSS images you can scale the RSS images to fit your gallery size.
Find a node that says “<rss_scale_images>true</rss_scale_images>” within the “config” node and replace the value inside with true if you want to scale the images or else replace it with false.

Disable Print screen for your photos.
One of the most requested features for photographers is that people use print screen to steal their images, and we just found a way across it.
If you disable print screen option the user will not be able to copy images or print screen shots, or even images from the cache.
This behavior also affects the print screen in all the applications running in the system till the site is open, so the user cannot even copy any text from any where not only on the website but also in his own system till the site is closed.

Find a node that says “<disable_printscreen>false</disable_printscreen>” within the “config” node and replace the value inside with true if you want to disable print screen or else keep it false if you want to allow the use of print screen.

Pause slideshow.
this feature will pause the slideshow at the start of the gallery.
The slideshow continues only when the user again resumes the playing of the gallery.
If you want to enable it find the node that says "<pause_slideshow>false</pause_slideshow>" and change the value to true.
The default is false.

Backgound music.
set the actual path of the music file within "<background_music>Johnny Quest.mp3</background_music>" node.
You can only set mp3 files as background music.

Background Music volume.
If you want to set your own duration just replace the value inside the “<background_music_volume>50</background_music_volume>” node with your time.
Defautl value is 50, and the scale is in percent.

Link Images.
If you wish to allow views to click on the images and go to the actual locations of the images set the value to true.
If you dont want any viewers to click and navigate around to the image keep the value to false.
The default value is false.
set the value within “<link_images>false</link_images>” node with true or false.

Hide Menu System.
If you want to have a slideshow with no controls, just only playing the images set the value to true.
If the menu is hidden users cannot change to different albums or change the options to fullscreen etc.
set the value within “<disable_menu_system>false</disable_menu_system>” node with true or false.

Hide title and description.
If you don't want the user to rollover the image and view title, description etc of the image set the value to true or else keep it false.
.set the value within “<disable_titles>false</disable_titles>” node with true or false.

Go to Top

Albums

There are 4 different albums that you can add for the dfGallery.
The default style which you need to specify the images, the flickr style rss, and the picasa style rss albums.

Custom albums “Default Style”

In the “<albums>” node you must add a new node like this

Set the title and description value.

Then start adding images into the <album> node.

<album title="The Wild Cats." description="few images of the wild cats.">
<image title="White Tiger" date="21.04.07" thumbnail="c1.jpg" image="c1.jpg">A perfect shot of a white tiger walking in the woods</image>
<image title="Unexpected!" date="29.05.07" thumbnail="c2.jpg" image="c2.jpg"> This beast scared us by giving us a really sudden shot.</image>
</album>

The <image> node contains attributes like the title, date , thumbnail and image.
You can add multiple <image> nodes within a single album.
The thumbnail attribute takes the image from the “thumbnail_dir” node which is in the “config” node that you have specified earlier.
Similarly to image node also takes the actual high res image from the “image_dir” node which is in the “config” node.

You can also add the link="http://google.com" attribute for a image node, this is the link that is used when the user clicks on the image.
The link attribute is optional.

Go to Top

Flickr

Add an <album> with type = “flickr” and set the url attribute to your flickr url.

Visit your Flickr url for example http://flickr.com/photos/navdeepraj/

Copy the link location and paste it into the “url” attribute

You will finally end up with an xml structure similar to this

That's it...Now you have successfully added your flickr photo stream to the dfGallery.

Go to Top

Picasa

Add an <album> with type = “picasa” and set the url attribute to your picasa RSS url.

Visit your Picasa url for example http://picasaweb.google.com/3drockz

At the bottom of the site you will find a "RSS" link for the user.

Copy the link location and paste it into the “url” attribute

You will finally end up with an xml structure similar to this

That's it...Now you have successfully added your picasa photo stream to the dfGallery.

By providing the full url all your public sets, will be available as albums in the gallery.

If you want to display only a single album then set the "url" attribute to http://picasaweb.google.com/data/feed/base/user/3drockz/albumid/5066633507112409985?alt=rss&hl=en_US
which is actually the RSS url of the set.

Go to Top

Fotki

Add an <album> with type = “fotki” and set the url attribute to your Fotki RSS url.

Visit your Fotki album.

At the top of the site you will find a "RSS" link for the album. (an RSS icon)

Copy the link location and paste it into the “url” attribute

You will finally end up with an xml structure similar to this

That's it...Now you have successfully added your Fotki photo album to the dfGallery.

Go to Top

Photobucket

Add an <album> with type = “photobucket” and set the url attribute to your Photobucket RSS url.

Visit your Fotki album.

At the top of the site you will find a "RSS" link for the album. (an RSS icon)

Copy the link location and paste it into the “url” attribute

You will finally end up with an xml structure similar to this

That's it...Now you have successfully added your Fotki photo album to the dfGallery.

Go to Top

Language Support

You can now set the language for the dfGallery by setting values for a few xml nodes in the gallery.xml file.

You can change the corrosponding values for the ID's specified.

Change only the text inside the value="????" to the desired language you want to use.

Go to Top

Deployment

Where to add the Code

The dfGallery is really simple to integrate into all of your existing web pages.

Open the desired HTML/PHP file in any editor like notepad.

Paste the code below to insert the SWF.
You can insert this code anywhere within the <body> tag.

Please don’t change codes in the above lines other than the red lines.
Change the width and height to desired width and height. (in pixels)

Suggested Heights
If you are using flickr streams then the suggested width is 500px and the height is 355px.
And if you are using picasa streams then the suggested width is 640px and height is 480px;

If you want to display only the gallery completely in a single page set the width to 100% and height to 100%;
This setting will give you a complete page size gallery no matter to what client’s resolution is.
This setting not produce scrollbars even at very low sizes of 640px of screen width.

Wordpress Users

The only thing that wordpress users need to change in the above codes is the absolute path of the "gallery.swf" file, and the gallery.xml path.
If you uploaded the gallery on http://mysite.com/photos/gallery/ then your code will be similar to below

This will also allow you to use multiple galleries within a single site by specifying different gallery.xml files.

Go to Top

Reporting Bugs

In case you find any bugs or need help, please post your comments on the gallery downloads page.

You can also make new feature requests on the same page.

Go to Top

The DezinerFolio Team