Download
User Rating: 3.6/5 ( 1 votes)
Some of the amazing features
-
Slideshow and transition effects
Automatically transition between images with a choice of effects.
-
Full screen view
Expand the gallery to fill the browser window and browse the gallery using the keyboard arrow keys.
-
Video support
Displays videos from YouTube, Flickr or Picasa feeds, or any other source.
-
Flickr, Facebook & Picasa support
Pull images or videos directly from Flickr or Picasa Web as well as images from Facebook.
-
Dynamic image sizing
Images can be scaled automatically or set at a maximum scale size.
-
Displays HTML content
Displays any HTML content using regular HTML tags.
-
Permalinks
Link to or bookmark each image directly.
-
Cross-browser and mobile support
Displays consistently on all major browsers, including iOS.
-
Divide images into albums and galleries
Reuse the same images across multiple albums.
-
Responsive gallery
Resizes automatically according to the screen or browser window size, also for mobile browsers.
-
Scrolling thumbnail carousel
Display thumbnails vertically or horizontally, scrolled with mouse movement.
-
CSS skinning
Create your own skin without any coding or JavaScript.
-
Dedicated WordPress admin panel
Manage and upload images and albums in the WordPress version without technical knowledge.
-
Powerful API
For full control over most aspects of TN3 Gallery.
Installing the jQuery javascript library
-
Visit http://jquery.com/ and click the download button. Save the file on your hard drive somewhere you will be able to access it later.
Installing the TN3 jQuery plugin
-
Unzip the TN3 download package you received when you purchased the TN3 Gallery. If you no longer have it you can redownload it from your TN3 Gallery account by logging in at the top of this site.
-
Save the TN3 file somewhere on your hard drive you’ll be able to access later.
Installing the Default Skins
-
Locate the skins in the TN3 download package. Each skin is provided in a single folder inside the ‘skins’ folder and contains the user interface images, preloader animated gif, HTML file and a CSS file.
-
Copy the tn3 skins folder into a location on your hard drive you’ll be able to access later.
The TN3 Gallery plugin is extremely simple to use, however if you are new to jQuery or working in a browser we recommend that you read the ‘Getting Started’ section of this userguide in place of this quick start guide.
Quick start
-
Create a new HTML file.
-
Copy the ‘skins’ folder into the same directory where your HTML file is.
-
Create an ‘images’ folder in the same folder where your HTML file is and place some images in it.
In this example we will assume that the large (full size) images are named 1.jpg, 2.jpg, 3.jpg… and that their corresponding thumbnails are named thumb_1.jpg, thumb_2.jpg, thumb_3.jpg…
-
Import the default style sheet:
1 |
<link type="text/css" rel="stylesheet" href="skins/tn3/tn3.css"></link> |
-
Import the latest version of jQuery and the TN3 gallery file:
1 |
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script> |
2 |
<script type="text/javascript" src="js/jquery.tn3.min.js"></script> |
-
Add the following markup to the body of the HTML file, in order to build a gallery containing three images:
1 |
<div class="tn3gallery"> |
2 |
<img src="images/fixed/1.jpg" /> |
3 |
<img src="images/fixed/2.jpg" /> |
4 |
<img src="images/fixed/3.jpg" /> |
In order to categorize images into separate albums, or to add titles and descriptions to the images you must use additional markup. Refer to the Getting Started section of this userguide for more details.
Note that to use separate thumbnails you should specify the name of the thumbnail in the img tag and surround it with a tags, specifying the name of the full size image as the href attribute, like so:
1 |
<a href="images/fixed/1.jpg"><img src="images/thumbs/1.jpg" /></a> |
You can now test the HTML file in a browser to see your TN3 Gallery.
You can download userguide at here or read more at http://www.tn3gallery.com/quick-start/
The full version of TN3 Gallery ships with five skins. Besides editing the default skin style sheet, you can also create your own skin HTML and CSS files from scratch. Modify all visual elements of the gallery to fit any site design.
JS Tutorial
