Installation
You have 2 folders (deploy and source). You only need deploy folder on your server. Source folder hold javascript files (non minified versions) and help.
Please dont place non-minified files on your server.
To start open index.html in any text editor (Dreamweaver is good if you have it, but any plain text editor will do).
There are 2 sections (one in head tag and one in body tag) that you need to copy into your website.
In the head tag you have links to stylesheets and javascript files, and the settings for the component. In the body part are all the component elements.
Make sure you copy everything from both head and body tags into your web page at appropriate places.
Editing jQuery file
If you need to edit the main jquery files (which hold javascript code for the component), you will see it comes in 2 versions with the package: 'minified' and 'non-minified'.
What this basically means is that minified version has all the empty spaces removed and some of the 'encryption' applied.
Both is usefull in case someone takes your script from your online website, making it almost useless for any kind of editing at least.
I suggest using minified version on your website.
Ofcourse if you need to edit this file yourself, switch to non-minified version (from the source folder) and then when you finish editing you can minify the file yourself here:
http://closure-compiler.appspot.com/home
Its as simple as it gets, you just copy/paste content of the whole file in the left provided space, press 'COMPILE' and when its done copy/paste all content from the right window back to your file, overwritting all the content with the new (minified) one. You dont need to touch any of the minify options, just leave all default as it is (Optimization: simple).
Minified files usually have .min extension in its name and non-minified dont!
It doesnt have to be that way, its just a common practice, but its important note in case your web paths get wrong.
Setting the layout
Every slide consists of the following:
These are the important bits, div with class '.slide', and div with class '.scaler'.
This needs to stay, but everything else you place inside is optional.
Outer '.slide' div server as a border, while inner '.scaler' div server as 'scaling' container in which content needs to be placed.
Outer '.slide' div is therefore 10px bigger in size than inner '.scaler' div, and inner '.scaler' div is positioned on 10px left/top.
You dont need to have this border, but if you want to remove it, then set both of these divs the same size.
There is a code in jquery.stackGallery.js which resizes both of these outer and inner divs, when component size changes,
or when the slides simply dont fit into provided area:
The content you put inside should resize automtically, if you set css properly.
There are examples provided in the download package which include youtube and vimeo video, google maps, and image in every slide.
If you look at their css, you will see how this works:
Image in slide:
Youtube and Vimeo video, Google maps:
Controls currently align on two sides, vertically and horizontally:
You can add more example, controls on the one side are positioned in css:
On the other side they are aligned in jquery.stackGallery.js:
Callbacks (methods called from jquery into html)
There are currently following callbacks available but new one can always be made.
If you need a specific callback just send me an email request.
Public methods available
There are some public methods available which you can use. These methods are available after this function (callback) in html has fired:
Public methods in html:
If you dont use this, you can delete this whole part from the html file.
If you dont use them, you can delete this whole part from the html file.
Also, in the css:
You can delete / modify that as well if you dont use them, this is just for display purposes.
Finding errors in code
Sometimes if the script doesnt run as it supposed to or doesnt run at all, open/install firebug:
http://getfirebug.com/
Its a MUST have extension for firefox which allows you to see possible erorrs in code (any much more).
Once you have firebug, open CONSOLE section and run the file again online or on local server like xampp to see if any errors occur.
