s

### “Simple Lightbox Gallery With CMS” Documentation by “Valiano” v1.0

# “Simple Lightbox Gallery With CMS”

Created: 10/10/2010
By: Valiano
Email: web.power.net@gmail.com

Thank you for purchasing my item. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

## Table of Contents

1. Gallery Overview
2. Package Files Overview
3. Requirements
4. Installing the gallery
5. Configuring The Admin
6. Gallery Javascript Optional Settings
7. Custom Gallery Navigation Structure
8. Using the Admin

### A. Gallery Overview - top

This is very easy to use jquery lightbox gallery plugin, that fully controlled by CMS.
It is very customisible, and has many options that you can set via the CMS, as well as image data.
It can be easily fit to your website layout. You can use the gallery with navigation or without, position the gallery and navigation divs anywhere you want in your page and style them as you want. The only limit is your imagination.
The CMS itseld is very intuitive, flexibe and comfortable for use.
I recomend to read this whole documentation about the gallery and CMS before you start using this product.

### B. Package Files Overview - top

In the package you have a client side gallery in 2 directories, with sample data and examples, or without.
In every gallery there is the admin folder - the CMS.
The client side is very simple. There is 3 js files that you include in your web page (in js folder) and that's the gallery example html page.
All other components (css, images etc...) comes from the CMS.

### C. Requirements - top

Thow the gallery can run from every webserver that supports javascript, you have some minimal requirements for the admin:

- PHP 5.2 or above.
- Sqlite or MySql driver for the database.
- write permissions for images, db and upload folders.
- PHP JSON extension.

### D. Installing the gallery - top

Installing the gallery with the CMS is very easy. Basicly, in most cases there is no installation required.
Just upload all the files from the gallery directory to your hosting, and the application will run.
However, if you want to put the admin into another place, you must specify the admin's url in gallery's url_server option.
Example:

    $("#gallery").putEasyGallery({
    		url_server:"http://yourdomain.com/admin/gallery.php"});

* To run the CMS simply navigate to "admin" url where you have uploaded it.
Installing the gallery is very simple:

1. In the <head> section include the 3 javascript files files:

       <script src="js/jquery.js" type="text/javascript"/></script>
       <script src="js/jquery.easy_lightbox_gallery.min.js" type="text/javascript"/></script>
       <script src="js/jquery.lightbox-0.5.min.js" type="text/javascript"/></script>

2. In he <body> section create a div with some id as a container for the gallery, with or without initial content for loading incication. For example:

       <div id="gallery">
       	Loading gallery...
       </div>

   Then add a javascript block with div's ID that will put the gallery content to the div from the CMS.

       <script language="javascript">
       	$("#gallery").putEasyGallery();
       </script>

   That's it. The admin will care of the rest. There are additional confirugations that you can set from the javascript, described in the next chapter.

### E. Configuring The Admin - top

After uploading the files, you can configure the Admin for your convinience.
The configuration you set via admin/config/config.php file.

- Database - You can choose between sqlite and mysql databases.
  Sqlite is flat-file database, and it's very convinient to migrate all files to another server and do backups.
  Mysql is the most common database, it works faster than sqlite, and you can control the data via phpmyadmin or similar applications.
  By default sqlite is set. To switch to mysql you uncomment the define("DB_TYPE","mysql"); and the comment the define("DB_TYPE","sqlite"); and remove comments /* and */ from , mysql config. Put your mysql user/pass/db and that's it.
- Username / Password - You have 2 user types - user and administrator. The administrator can see the settings tab and the user not.
  Edit the ADMIN_USERNAME, ADMIN_PASSWORD and USER_USERNAME USER_PASSWORD to set the login data.
  After that you have a ENABLE_LOGIN option. Set it to true if you want to login to the system, and false If you don't want to login.
  Set the DEFAULT_VIEW (admin/user) option to deside the default view if you ENABLE_LOGIN is false.
- Change the texts - After that you have some other options of text appears in the login box and on the top bar of the admin's user interface. Set them if you want to chenge the gallery name.
- ACTIVE_THEME - You can theme the admin for your convinience. All the themes located under themes folder. all the theme images and css files are from there. You can create your theme, and set the theme folder with this option.
- ADMIN_FILE, GALLERY_FILE - Change those options if you want to change the main filenames (not recommended).
- IMAGE_QUALITY - When the image is resized, choose the image quality. More quality - more disk space, less quality - less disk space. I recommend to leave it on 95% for optimal quality/disk space procentage.

### F. Gallery Javascript Optional Settings - top

There is a couple of settings that you can use for your convinience:

url_server | Url to admin/gallery.php file
nav_hor | Horizontal navigation container id
nav_vert | Vertical navigation container id
nav_custom | Custom navigation container id
catid | Gallery initial category id. You can find the id in the CMS - category caption line in the right
event_before_load | Event function - before image data load
event_after_load | Event function - after image data load
event_nav_click | Event function - on navigation click
event_get_catlist | Event function - get categories list array object

Settings example:

    $("#gallery").putEasyGallery({
    	url_server:"admin/gallery.php",		//a url to the CMS - gallery.php in admin folder
    	nav_custom:"#navigation",		//custom navigation container
    	nav_hor:"#navigation",			//horizonatal navigation container
    	nav_vert:"#navigation",			//vertical navigation container
    	catid:8,				//category id
    	event_before_load:onBeforeLoad,		//before image data load event function
    	event_after_load:onAfterLoad,		//after image data load event function
    	event_nav_click:onNavClick,		//on navigation item click event function
    	event_get_catlist:getCatList		//event that return categories list when the list is ready
    });

- The url_server is an url to gallery.php in the admin folder. By default it admin/gallery.php. If you want to change the admin folder, you can specify the new path in this setting.
- The catid stands for gallery category id from the CMS. In the CMS you can see the category ID in the right top bar (The bar of category name is located) when you select the category.
- The navigations contaners is settings where you can put your navigations. The navigation div can be located anywhere in your website. The nav_hor and nav_vert can be set up via the CMS, and the nav_custom can be set customly by your styles. (see next paragraph) There can be only one navigation div in the gallery page.
- The events are very usefull gallery feature. With them you can impliment some preloader, or custom navigation for example. In the examples folder there is an example that uses those events.

### G. Custom Gallery Navigation Structure - top

If you chose to put custom style navigation, you ca do it easily. Just set the custom navigation container in the javascript:

    $("#gallery").putEasyGallery({nav_custom:"#navigation"});

The html sructure of the custom navigation is:

    <ul class='gallery_navigation'>
    	<li class='first'><a>    <span> Item1 </span></a></li>
    	<li><a>		      	  <span> Item2 </span></a></li>
    	<li class='selected'><a> <span> Item3 </span></a></li>
    	<li class='last'><a>	  <span> Item4 </span></a></li>
    </ul>

The UL has always class - gallery_navigation The first and second LI item class is 'first', and 'last' and the 'selected' class moves across items that are selected. If the first or last items will be selected, the the 'selected' class is added to the end and the whole class will look like: class='first selected'.

### H. Using the Admin - top

Settings Tab:
In the settings tab you can set every gallery visual setting.
There is some defaults that i preset for you hardcoded, so you can restore to defaults, and start over with configuration.
Just play with the settings, push save, and refresh the gallery to try them on it. Very simple.
You'll learn them fast. I'd try to give the settings the most understandable names, but if you don't understand something, or you have a diffirent proposal to change some name don't hesitate to write me through my author profile page: http://activeden.net/user/valiano
Gallery Tab:
- The gallery panel is very intuitive. On the left side you see all the categories, and onthe right side you see the category images.
The buttons above every side are related to the items on their side.
The left "add" button adds categories, and the right "add" button adds images.
- Also right click is also enabled, and you can do all the operations on the images and categories from the right click.
Category operations:

Add a category | Click the "add" button, or "right click -> add new category". The category will be added with a default title, you may change the title by selecting the category and clicking "edit title" button, or "right click" -> edit title.
Delete a category | "delete" button, or "right click->delete category". The delete confirm dialog will appear. Note - deleting a category will delete all the picture content in it.
Edit category | "right click"->edit category or a double click on a category will open the edit dialog. In the dialog you can edit the category title, description and long description.
Changing order of categories | Just drag and drop the categories up and down. The order is saved on the fly.

Images operations:

Uploading images | Press on "upload" button, or "right click" on left side -> upload item to category. You can upload several images at once (multiple upload).
Selecting images | There are several ways to select images. - by clicking on image. - by clicking on image and holding control key (add to selection) - by clicking on image and holding shift key (select from-to) - by drag selection area with the mouse - by "right click->select all" - by "select all" button at the top try it, it's fun.
Deleting images | Select some images or one image, click on delete button, or "right click -> Delete item/delete selected items"
Reorder images | select some image, click on some of them, and drag the images to the selected position. After releasing the mouse the order will be saved.
Copy/move | Select some image, and just drag them to target category. Copy/move dialog will appear.
Edit title | "edit title" button or "right click->edit title", edit box will appear. enter will save the new title.
Edit description / link | "edit item" button or "right click->edit item", the edit dialog will appear. Press "update" to save the data.
Preview image | Double click on some item or "right click->preview item" or "preview" button will open the preview dialog.
Preview image | Double click on some item or "right click->preview item" or "preview" button will open the preview dialog.
Preview in browser | In preview panel press on "view in browser" button. New window with the image will appear.
Duplicate image | "duplicate" button or "right click->duplicate".

Once again, thank you so much for purchasing this product. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Max (valiano user)

Go To Table of Contents