Help Guide

1. Overview:

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

Features:

Multiple image transitions available. Can also set a different transition per image.
Able to turn auto image 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.
Directional and index buttons allow for navigating thumbnails.
Editable captions available for each thumbnail.
Links are assignable for each image.
Different text descriptions are assignable for each image.
Text description and captions can be aligned top or bottom.

back to top

2. Usage:

Installing the gallery in 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.
Instantiating a javascript call with any optional parameters.

Below describes the steps in more detail.

In step 1, you will need to include the jquery's library file, jquery-1.4.2.min.js to run jquery and the gallery's own jquery.wt-gallery.js file. Both files are located inside the js directory. Below shows the code needed to include the 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 compressed version of the jquery.wt-gallery.js file named jquery.wt-gallery.min.js that can be use instead.

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

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

In step 3, to specify the tags of the gallery itself, look at the the example in the index.html file. In the file, you'll see a block of tags starting and ending with the following:

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

You can use this as a template and copy and paste it onto your own page, but will have to modify it accordingly with your own image 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 running. The example code looks the following:

<script type="text/javascript">
$(document).ready(	
    function() {
      $(".container").wtGallery();
   }
);
</script>

This will instantiate the gallery using the default parameters. Section 4 will describe how to pass in custom parameters.

back to top

3. Adding Content:

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

Below is an example of what the tags would look like for an image entry. You will have to repeat this for each image for your gallery.

<li effect="fade" delay="8000">
    <div>
        <a href="images/triworks_abstract27.jpg">
            <img src="images/thumbs/triworks_abstract27.jpg"/>            
        </a>
        <p>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 optional attribute call effect in which an individual transition effect can be assigned for the image. Refer to the transitions table for a list of available transitions. If you do not specify an effect here, the global effect assigned to the plugin is used instead.

There is also a 2nd optional attribute call delay for the <li> tag for specifying an timer delay for rotation. The delay time is in milliseconds. Like the effect attribute, if you do not specify a delay here, the global delay will be used instead.

Within the <li> tag, there is a <div> tag representing the thumbnail container and inside, you will see an <a> tag specifying the image's url as its href value. This is the image's url location for the image displayed when the thumbnail is clicked.

Next, within the <a> tag, there is an <img> tag specifying the thumbnail image.

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 omit this tag.

After the first <div> tag, you'll see a 2nd <div> tag with class name data. This <div> tag contains the data associated with the thumbnail.

First, the <a> tag's href value is the link assigned to 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 omit this tag.

Next, the <p> tag represents the description used for the main window's text panel when the thumbnail is selected. You can specify html text within the <p> tags. If you do not want a description, you can leave the text empty or omit this tag.

back to top

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.

<script type="text/javascript">
$(document).ready(	
    function() {
        $(".container").wtGallery({
            num_display:5,
            screen_width:720,
            screen_height:405,
            padding:10,
            thumb_width:125,
            thumb_height:70,
            thumb_margin:5,
            text_align:"top",
            caption_align:"bottom",
            auto_rotate:true,
            delay:5000,					
            cont_imgnav:true,
            cont_thumbnav:true,
            display_imgnav:true,
            display_imgnum:true,
            display_thumbnav:true,
            display_thumbnum:true,					
            display_arrow:true,
            display_tooltip:false,
            display_timer:true,
            display_indexes:true,					
            mouseover_text:false,
            mouseover_info:false,
            mouseover_caption:false,
            mouseover_buttons:true,
            transition:"random",
            transition_speed:800,
            scroll_speed:600,
            vert_size:45,
            horz_size:45,					
            vstripe_delay:100,
            hstripe_delay:100,
            move_one:false,            
            shuffle:false
        });
    }
);
</script>

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.	5	Any positive number.
screen_width	The width of the main image's window.	720	Any positive number.
screen_height	The height of the main image's window.	405	Any positive number.
padding	The size of the gallery's padding.	10	Any 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_align	The vertical alignment of the text panel.	"top"	"top", "bottom".
caption_align	The vertical alignment of the thumbnails' caption box. Also use for tooltip alignment.	"bottom"	"top", "bottom".
auto_rotate	Specify if auto image rotation is on or off.	true	true, false.
delay	The global time delay for image rotation in milliseconds.	5000	Any positive number.
cont_imgnav	Specifies if the main image directional buttons allow for continuous navigation.	true	true, false.
cont_thumbnav	Specifies if the thumbnails directional buttons allow for continuous navigation.	true	true, false.
display_imgnav	To specify if the main image directional buttons are visible.	true	true, false.
display_imgnum	To specify if the current image number info is visible.	true	true, false.
display_timer	To specify if the timer bar is visible.	true	true, false.
display_thumbnav	To specify if the thumbnails' directional buttons are visible.	true	true, false.
display_indexes	To specify if the pagination index buttons are visible.	true	true, false.
display_thumbnum	To specify if the thumbnail current number info is visible.	true	true, false.
display_tooltip	To specify if the thumbnails display its caption as a tooltip.	false	true, false.
display_arrow	To specify if the selected thumbnail displays an arrow.	true	true, false.
mouseover_text	To specify if the text panel appears only on mouseover.	false	true, false.
mouseover_info	To specify if the info panel appears only on mouseover.	false	true, false.
mouseover_caption	To specify if the thumbnails' caption appears only on mouseover.	false	true, false.
mouseover_buttons	To specify if the main image directional buttons appear only on mouseover.	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 speed use for 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.
vstripe_delay	The delay when the next vertical stripe transition occurs in sequence. (in milliseconds)	100	Any positive number.
hstripe_delay	The delay when the next horizontal stripe transition occurs in sequence. (in milliseconds)	100	Any positive number.
move_one	To specify if thumbnails scroll/move by one at a time.	false	true, false.
shuffle	To specify if images are displayed in random order.	false	true, false.

Transitions Table:

Transition Value	Description	Category
none	No transition	N/A
fade	Fade in transition
random	Random transition
vert.tl	Vertical stripe transition starting top left.	Vertical Stripe
vert.tr	Vertical stripe transition starting top right.
vert.bl	Vertical stripe transition starting bottom left.
vert.br	Vertical stripe transition starting bottom right.
fade.left	Vertical stripe transition fade starting from left.
fade.right	Vertical stripe transition fade starting from right.
alt.left	Alternating vertical stripe transition starting from left.
alt.right	Alternating vertical stripe transition starting from right.
blinds.left	Vertical blinds transition starting from left.
blinds.right	Vertical blinds transition starting from right.
vert.random.fade	Vertical random fade.
horz.tl	Horizontal stripe transition starting top left.	Horizontal Stripe
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.top	Horizontal stripe transition fade starting from top.
fade.bottom	Horizontal stripe transition fade starting from bottom.
alt.top	Alternating horizontal stripe transition starting from top.
alt.bottom	Alternating horizontal stripe transition starting from bottom.
blinds.top	Horizontal blinds transition starting from top.
blinds.bottom	Horizontal blinds transition starting from bottom.
horz.random.fade	Horizontal random fade.

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

back to top

Contact Information:

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

back to top

jQuery Image Gallery (v1.4) - Help Guide

1. Overview:

2. Usage:

3. Adding Content:

4. Plugin Parameters:

Parameters Table:

Transitions Table:

Contact Information: