Javascript Sliding Gallery

demo: http://fahimchowdhury.com/demo/slidegallery/index.html
DOWNLOAD: http://fahimchowdhury.com/demo/slidegallery/FC_SlideGallery_v1.zip

Features

Horizontal Sliding transition
Vertical Sliding transition
Fade transition
Auto transition
Drag-able
Touch to slide
Any type of content
Thumbnails
Customisation via CSS


SCRIPT SETUP

Add the following scripts to the 'head' tag:


<script type="text/javascript" src="lib/com/greensock/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="lib/com/greensock/easing/EasePack.min.js"></script>
<script type="text/javascript" src="lib/com/greensock/TweenLite.min.js"></script>
<script type="text/javascript" src="lib/com/utensil/Gallery.js"></script>
<script type="text/javascript">Gallery.init();</script>


Changing Gallery Type:

In the script tag with 'Gallery.init();' set the type before it. To set the type, set the Gallery.setType variable to either of the following:


FADE
Gallery.setType=Gallery.type.FADE_OUT;

VERTICAL SLIDE
Gallery.setType=Gallery.type.SLIDE_VERTICAL;

HORIZONTAL SLIDE
Gallery.setType=Gallery.type.SLIDE_HORIZONTAL;

Complete code:
<script type="text/javascript">
Gallery.type.SLIDE_HORIZONTAL;
Gallery.init();
</script>


HTML SETUP
For a basic gallery just create the following elements anywhere in the body tag:
<div class="gallery-container">

<ul class="gallery-wrapper">

</ul>
</div>


Now you can place you content within ul but the content must be wrapped with 'li' tags.


example:

<ul class="gallery-wrapper">
<li>
<img src="resource/image/2.jpg" />
</li>


Adding Gallery buttons
You can play buttons anywhere in the body tag. All you have to do is to ensure they have the following id tags:

<div id="leftButton"></div>
<div id="rightButton" ></div>


You can style them and add content.



Add Thumbnails
Add the following tags anywhere in the body:

<div class="gallery-thumbs-container">
<ul class="gallery-thumbs-wrapper">

</ul>
</div>


Place your thumbnail content within the 'ul' tag, make sure you wrap it with an 'li' tag.


example:

<div class="gallery-thumbs-container">
<ul class="gallery-thumbs-wrapper">
<li>
<img src="resource/image/2.jpg" />
</li>

</ul>
</div>




Width of all the thumbnails is taken from the width of the first thumbnail.


Adding thumbnail buttons
Place the following tags anywhere in the body tag.  All you have to do is to ensure they have the following id tags:

<div id="thumbButtonLeft"></div>
<div id="thumbButtonRight"></div>