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.

Control buttons





If you dont want to use these buttons, set 'useControls:false' in html settings:



Dont delete them from the html! (dont remove this):



Its important that they stay inside the DOM because slideshow timer is dependant on this.

Their css is set to display:none so they wont interfere with anything.

If you are changing the look of control buttons, make sure you replicate all names and equal sizes between them. This is needed for this 'filling' preloader effect to work.

Scrollbar





Scrollbar use in jScrollPane: http://jscrollpane.kelvinluck.com/

If you try to modify scrollbar in css and it stops working and you cannot get it back, I suggest resetting to original file and start again.

There are a few things dependant on scrollbar to get initialized properly, and missing just one of these settings in css can brake it.


Personally, I found some settings around these html elements (componentWrapper, componentScrollWrapper, componentPlaylist):



like 'position', 'width', 'height', 'overflow' make scrollbar work. Now this is just one example, settings are different whether its horizontal or vertical orientation obviously.


Initialization of jScrollPane in jquery code (jquery.accordionGallery.js) in case you need it:



Constructing slides


Every slide has this div wrapper:



This is required and it needs to be there.

Everything else is optional (images, title, captions, prettyphoto...), you can place anything you want inside the slide. So again, you just need to have this div class='slide' inside.

Whole playlist is hidden with css opacity 0 (until everything sets at the beginning):



I didnt want to use 'display:none' in case there are problems with some browsers and slide content inside.

You can place inside anything you want and style it with css.



These divs need to have defined width and height (this is partly set in css, partly in jquery code).

If all your slides are the same size:



Then you set slide width and height both in css:



Also note in the previous picture that image size in slides is also declared there, and well in html (below picture):





If your slides are different size:



Then for horizontal orientation, only height is set in css (since all slides are the same height, but not width):



width for each slide will be set in html (data-width):



Also note in the previous picture that image size in slides is also declared there.



The opposite works for vertical orientation, in css only slide width is declared (since all slides are the same width, but not height):



height for each slide will be set in html (data-height):



Also note in the previous picture that image size in slides is also declared there.

These custom attributtes (data-width, data-height) are for my jquery code which sets size of each slide individually.



Inline content


Example of google maps inside slide:



Google maps api call on top of html:



Plus this javascript in html:



And css:





Example of some ordinary content inside slide:



And css:





You add slide detail: (prettyphoto, image link)



Is added like this:



Special features


Whole slide link is controlled with this:



data-link - link whole slide with this feature, leave blank for none. (NOTE! You cannot access anything inside this slide if click is assigned to the whole slide)
data-target (if data-link is used: '_blank' - open in new window, '_parent' - open in same window)

This is achieved by making a transparent div the same size as the slide and placing it inside the slide above all other layers and making it clickable, see following in the jquery.accordionGallery.js file:



You can possibly change the z-index of this transparent div, placing it some layers down if you still want to have some elements above it.
Also, note feature below, which creates another transparent div, above all other content, to prevent click going below (so you dont mess something if changing z indexes).





Prevent click on slide from executing other action data-preventDefaultOnOpen, aka force slide to open when clicked regardless of content inside:



Good examples are Youtube and Vimeo video.
When you place an iframe inslide the slide (like the examples in the preview) and you click on closed slide containing that video, video will start playing instead of slide opening.

If data-preventDefaultOnOpen is true, this creates transparent div above all layers in slide, and attaches click to it instead of default slide div holder to open the slide. Then when the slide opens, this transparent div is hidden so it doesnt interfere with content.

Check this in jquery.accordionGlalery.js:







Show content when slide opens, hide when it closes:



If you place a content inside div with a class slide_content, this content will be hidden (opacity 0) in all slides, and then when slide opens, it will show that contant (fade in), and hide this content when slide closes (fade out).

Controlling video in slides


If you look at the preview example named index_horizontal_dif_width or index_vertical_same_height, you will see that have 'built in' video functions for Vimeo and Youtube which stop/reset video to beginning when slides which contained video in exited.

So for example, if you start video on certain slide, and then advance to another slide, it will automatically stop the video.

This is achieved with the following:

Vimeo api script:



Stop/reset callbacks included in public function callbacks assosiated with slide numbers in which video resides:



Vimeo api initialization:



Vimeo and Youtube global vars and Youtube api initialization:



Youtube video embedded in slide, notice frame 'id' attributte, and notice 'transparency', this is needed for some browsers and proper z-index layering:



Vimeo video embedded in slide, notice frame 'id' attributte:



You can use this feature to add additional functionality, like maybe auto start video when slide is entered or smiliar...

Check these links for Vimeo and Youtube api:

https://developer.vimeo.com/player/embedding

https://developer.vimeo.com/player/js-api

https://developers.google.com/youtube/iframe_api_reference

https://developers.google.com/youtube/player_parameters

http://php.quicoto.com/how-to-fix-z-index-in-youtube-iframes/

Google web fonts


Google web fonts are being used in the component.
You can find all the info here:
http://www.google.com/webfonts

In the html file, they are being loaded on the beginning before script is being executes:



And in css file you will see it appearing on a couple of places:




If you want to get rid of google web fonts do this:

Replace this while thing in html file:



with just this:



Delete google font call on top of html file:



In the CSS files edit font-family wherever google web font appears:



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.


Also, in the css, find wherever this font name appears:



You can delete / modify that as well if you dont use them.

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.



jQuery Accordion Gallery