s Documentation to Simple Lightbox Gallery With CMS

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


“Simple Lightbox Gallery With CMS”

Created: 10/10/2010
Last Updated: 16/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

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:


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.


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
  • preset
  • The preset id from the admin
  • 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
    	preset:"example1",			//the preset
    	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 preset option is a settings preset from the admin. You can set several presets and use them in different pages of the website, for different configuration of the carousel with only one admin.

    - 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

    Tools Tab:
    In this tab there are several tools that give you another admin capabilities. Currently there is only one very powerfull option, that copies all the pictures from "upload" directory to the gallery. So, if you already have pictures in your server and you want to use them in gallery, just move or copy them into "upload" folder, and press "move all images" button. The images will be moved to selected category.

    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