jQuery Image Gallery - Help Guide

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:

2. Usage:

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

  1. Including the 2 required javascript files.
  2. Including the gallery's css file.
  3. Specifying the html tags of the gallery within your page.
  4. 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.