donkeyGallery

donkeyGallery

DemoGallery #1

DemoGallery #2

DemoGallery #3

How it works

Package

• assets: contains some images for gallery and Fancybox style
• css: contains gallery css files
• images: this directory is the place for your gallery folders
• js: contains the gallery plugin
• php: contains the php webservice, called by js plugin, to make thumbnails and serve the gallery images

Documentation

1. Installation

In order to install donkeyGallery:

• download and unzip donkeyGallery-x.x.x.zip pack on your local desktop
• upload on your server, by an FTP client, the dir dnk-gallery. Put it on your site root dir

WARNING!
"dnk-gallery" dir must be on the same level of the html file where you want to load galleries

Once you have installed the gallery pack, you are ready to load any galleries you want simply adding your images folders inside the "image" dir contained on "dnk-gallery", and then call your galleries, on html page, by javascript.

Note: Remember that the "demo-gallery.html" file contained on the download pack is just a demo about javascript coding and represent your home page file, where you can load the galleries. You don't need to upload it on your server, but you can use it to try the galleries loading by jquery plugin.

Read the chapters below to learn how you need to do in order to use donkeyGallery

2. HTML

On your html file, when you want load some galleries, first, include jQuery library, jquery.donkeyGallery.js plugin and jquery.donkeyGallery.css

<!-- css -->
<link rel="stylesheet" href="dnk-gallery/css/jquery.donkeyGallery.packed.min.css">

<!-- javascript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="dnk-gallery/js/jquery.donkeyGallery.packed.min.js"></script>            

Then, place a div for the gallery, assign it an univocal id and leave it empty

            

<div id="my-gallery-id"></div>          

3. Javascript

To inizialize a gallery, place this javascript on your page, where on the option galleryPath you must write the path (relative at your html file) of your gallery folder. Yor gallery folder can be placed also out of the "dnk-gallery" dir.
NOTE: remember that with this lines will be loaded a gallery with the default options. If you want to customize it you need to learn to use some plugin options.

$(function() {           
    $("#my-gallery-id").donkeyGallery({
        galleryPath : "path/to/my-gallery/"
    });
});

Plugin Basical Options

Plugin Fluid Style Options

Plugin Thumbs Options

Plugin Fancybox Options

Note that not all Fancybox native options are included yet in this version of donkeyGallery.

Plugin Pagination Options

Note that not all Easy Paginate native options are included yet in this version of donkeyGallery

Configuration Examples

Default Values

The following code is a complete configuration, with all options specificated, but all the values are setted at the default values, so this long code is equivalent to: $("#your-gallery-id").donkeyGallery();

$("#your-gallery-id").donkeyGallery({

    webservice : "dnk-gallery/php/gallery.webservice.php", 
    galleryPath : "dnk-gallery/images/",
    subdomain: "",
    style: "default",
    color: "default",
    fluidStyle: {
        active : false,
        columns: 4
    }, 
    thumbs: {
        thumbW: 150,
        thumbH: 150,
        thumbsGen: false
    },
    fancybox : {
        active: true,
        galleryGroup: "donkeyGallery",
        linkClass: "dnk-gallery-link"
    },
    pagination: {
        active: true,
        pageItems: 4
    }

});

Custom Values

If you want see some live examples with explained code, see our Live Gallery Demo

Styles and Colors

STYLES: squared - tin-squared - circle
COLORS: black - white - gray - magenta - cyan

Fluid Style (included from v1.1.0)

From 1.1.0 version, it's possible to activate a fluid stylefor the gallery.
Fluid style is compatible with all other gallery colors and styles as "cricle" or "squared" and so on.
To activate fluid style use the "fluidStyle" option group on javascript configuration. See the example below.

$("#your-gallery-id").donkeyGallery({
    galleryPath : "dnk-gallery/images/",
    style: "tin-squared",
    color: "black",
    fluidStyle: {
        active : true,
        columns: 4
    }
    ...
    ... other options ...
    ...
});