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:
Installing the gallery within your html page requires the following steps.
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.
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.
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:
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. |
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.
For technical help or questions regarding this file, email me at webtako@gmail.com.