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!
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.
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.
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.
<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>
<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.
After uploading the files, you can configure the Admin for your convinience.
The configuration you set via admin/config/config.php file.
| Url to admin/gallery.php file | |
| Horizontal navigation container id | |
| Vertical navigation container id | |
| Custom navigation container id | |
| Gallery initial category id. You can find the id in the CMS - category caption line in the right | |
| The preset id from the admin | |
| Event function - before image data load | |
| Event function - after image data load | |
| Event function - on navigation click | |
| Event function - get categories list array object |
$("#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.
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'.
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:
|
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" button, or "right click->delete category". The delete confirm dialog will appear. Note - deleting a category will delete all the picture content in it. | |
| "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. | |
| Just drag and drop the categories up and down. The order is saved on the fly. |
| Press on "upload" button, or "right click" on left side -> upload item to category. You can upload several images at once (multiple upload). | |
|
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. | |
| Select some images or one image, click on delete button, or "right click -> Delete item/delete selected items" | |
| 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. | |
|
Select some image, and just drag them to target category.
Copy/move dialog will appear. | |
| "edit title" button or "right click->edit title", edit box will appear. enter will save the new title. | |
| "edit item" button or "right click->edit item", the edit dialog will appear. Press "update" to save the data. | |
| Double click on some item or "right click->preview item" or "preview" button will open the preview dialog. | |
| Double click on some item or "right click->preview item" or "preview" button will open the preview dialog. | |
|
In preview panel press on "view in browser" button.
New window with the image will appear. | |
| "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)