jQuery Image Gallery - Help Guide

Description
Usage
Adding Content
Plugin Parameters
Contact Info

1. Description:

This is a jQuery image gallery plugin featuring a horizontal thumbnail layout and multiple transitions. The sliding thumbnails and buttons allow for easy navigation of your image portfolio. The gallery is also re-sizable and configurable through the plugin's parameters.

Features:

Multiple image transitions available. Can set transition individually, randomly or turn off transition.
Able to turn auto image auto rotation on/off with configurable time delay. Rotation is paused when mouse is over gallery.
Changeable number of thumbnails visible per scroll.
Image and thumbnails' container size are re-sizable.
Mouse over main image to access directional buttons for navigating previous/next image.
Thumbnail directional buttons and pagination indexes allow for navigating thumbnails.
Editable captions available for each thumbnail.
Different links are assignable for each image.
Different text descriptions are assignable for each image.
Text description can be aligned top or bottom.

2. Usage:

Installing the gallery within your html page requires the following steps.

Including the 2 required javascript files.
Including the gallery's css file.
Specifying the html tags of the gallery within your page.
Instantiating a javascript function call with any optional parameters.

Below describes these steps in more detail.

In the first step, you will need to include the jquery's library file, jquery-1.4.2.min.js to run jquery and the gallery's jquery.wt-gallery.js file. Both files are located inside the js directory. Below is the code needed to include these 2 files in your html file:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.wt-gallery.js"></script>

Note: there is a smaller, compressed version of the jquery.wt-gallery.js file called jquery.wt-gallery.min.js that can be use instead for faster page loading.

In step 2, to include the css file wt-gallery.css, simply specify the following line of code inside your html's <head> tag:

<link rel="stylesheet" type="text/css" href="wt-gallery.css/>

In step 3, to specify the html tags of the gallery itself, refer to the example in the index.html file. In the file, you'll see a block of html code starting and ending with inside the <body> tag:

<div class="container">
<!-- begin gallery -->
   <div class="wt-gallery">
      ...
   </div>
<!--end gallery-->
</div>

In which you can copy and paste onto your own html page.

Note: you will have to modify this block of html code accordingly with your own images & information. Section 3 will describe this step in detail.

Finally in step 4, you will need to instantiate a javascript function call to get the gallery working. The example code looks like this below:

$(document).ready(
   function() {
      $(".container").wtGallery({});
   }
);

This will instantiate the gallery using the default parameters. Section 4 will describe instantiating this code with custom parameters in more detail.

3. Adding Content:

In order to add/change content to the gallery, you will have to specify a set of html tags for each image within the gallery's html code. The list of images is represented as a html list tag <ul> and each image/thumb is represented by a list item tag <li>.

Below is an example of what the html tags would look like for one image. You will have to repeat this for as many images as needed in your gallery.

<li tran="fade">
    <div>
        <a href="images/triworks_abstract27.jpg">
            <img src="images/thumbs/triworks_abstract27.jpg"/>            
        </a>
        <p>1. Image Caption</p>
    </div>
    <div class="data">
        <a href="http://codecanyon.net" target="_blank"></a>    
        <p>
            Lorem ipsum no vocibus accusamus dignissim et, 
            eius erat an ius, quot zzril facilisi an no. 
        </p>
    </div>
</li>

The example above shows that each image entry begins with an opening and closing <li> tag. The <li> tag contains an attribute labeled "tran" in which an individual transition type can be specified for the related image. Refer to the transitions table for a list of all available transitions.

Inside the <li> tag, there is a <div> tag and inside, you will see an <a> tag specifying the large image's url as its href value. This is the image's url location for the main window when the thumbnail is clicked. Within the <a> tag, there is an <img> tag specifying the thumbnail image itself

After the <a> tag, there's a <p> tag specifying the caption associated with the thumbnail. If you do not want a caption for a thumbnail, you can leave the text between the <p> tags empty.

After the first <div> tag, you'll see another set of <div> tag with class name "data". This <div> tag represents the data associated with the thumbnail when selected.

First, the <a> tag's href value is the link clickable on the main window when the thumbnail is selected. You can also specify the target used for the link. If you do not want a link associated with the image, you can leave the href value blank.

Next, the <p> tag represents the description used on the main window when the thumbnail is selected. You can specify plain or html text within these <p> tags. Like the thumb caption, if you do not want a description, you can leave the text empty.

4. Plugin Parameters:

You can change some common attributes of the gallery through the parameters of the plugin. Below is an example of the attributes being specified with corresponding values.

$(document).ready(	
   function() {
      $(".container").wtGallery({
         num_display: 4,
         background_color: "#EEEEEE",
         window_color: "#333333",
         padding: 10,
         screen_width: 575,
         screen_height: 323,
         thumb_width: 125,
         thumb_height: 70,
         thumb_margin: 5,
         text_pane_align: "top",
         auto_rotate: true,
         delay: 5000,
         image_nav: true,
         info_pane: true,
         thumb_nav: true,
         pagination: true,         
         thumb_info: true,
         transition: "fade",
         transition_speed: 800,
         scroll_speed: 600,
         vert_size: 50,
         horz_size: 50
      });
   }
);

Note: if you want to leave a parameter as is with its default value, you can omit that parameter in the javascript call.

The table below describes each attribute in more detail:

Parameters Table:

Attribute Name	Description	Default Value	Possible Values
num_display	The number of thumbnails displayed at a time.	4	Any positive number.
background_color	The background color of the gallery.	"#EEEEEE"	RGB color value in the format "#RRGGBB".
window_color	The color of the main image and thumbnails' window.	"#333333"	RGB color value in the format "#RRGGBB".
padding	The size of the gallery's padding.	10	Any number.
screen_width	The width of the main image's window.	575	Any positive number.
screen_height	The height of the main image's window.	323	Any positive number.
thumb_width	The width of the thumbnail's window.	125	Any positive number.
thumb_height	The height of the thumbnail's window.	70	Any positive number.
thumb_margin	The margin between thumbnails.	5	Any number.
text_panel_align	The vertical alignment of the text panel.	"top"	“top”, “bottom”.
auto_rotate	Specify if auto image rotation is on or off.	true	true, false.
delay	The time delay used for image rotation in milliseconds.	5000	Any positive number.
image_nav	To specify if the main directional buttons appears on mouse over.	true	true, false.
info_pane	To specify if the info pane is visible.	true	true, false.
thumb_nav	To specify if the thumbnails' directional buttons are visible.	true	true, false.
pagination	To specify if the pagination indexes are visible.	true	true, false.
thumb_info	To specify if the thumb info is visible.	true	true, false.
transition	The global transition use for images.	"fade"	See the next table for more information on the available transitions.
transition_speed	The transition speed use for image transition in milliseconds.	800	Any positive number.
scroll_speed	The transition speed use for thumbnail scroll in milliseconds.	600	Any positive number.
vert_size	The size of the vertical stripes use for vertical stripe transitions.	50	Any positive number.
horz_size	The size of the horizontal stripes use for horizontal stripe transitions.	50	Any positive number.

Transitions Table:

Transition Value	Description
none	No transition
fade	Fade in transition
random	Random transition
vert.tl	Vertical stripe transition starting top left.
vert.tr	Vertical stripe transition starting top right.
vert.bl	Vertical stripe transition starting bottom left.
vert.br	Vertical stripe transition starting bottom right.
horz.tl	Horizontal stripe transition starting top left.
horz.tr	Horizontal stripe transition starting top right.
horz.bl	Horizontal stripe transition starting bottom left.
horz.br	Horizontal stripe transition starting bottom right.
fade.left	Vertical stripe transition fade starting from left.
fade.right	Vertical stripe transition fade starting from right.
fade.top	Horizontal stripe transition fade starting from top.
fade.bottom	Horizontal stripe transition fade starting from bottom.
alt.left	Alternating vertical stripe transition starting from left.
alt.right	Alternating vertical stripe transition starting from right.
alt.top	Alternating horizontal stripe transition starting from top.
alt.bottom	Alternating horizontal stripe transition starting from bottom.
blinds.left	Vertical blinds transition starting from left.
blinds.right	Vertical blinds transition starting from right.
blinds.top	Horizontal blinds transition starting from top.
blinds.bottom	Horizontal blinds transition starting from bottom.

Note: all transition values can be set either individually for each image through the <li> tag of the thumbnail or globally through the instantiation javascript call. Transition values set through thumbnails take precedence over transition set globally.

Contact Information:

For technical help or questions regarding this file, email me at webtako@gmail.com.