How to Create a Fantastic Photo Album with TN3

  • Reading time:5 mins read
using TN3 to build photo gallery

Creating photo album with TN3. During browsing web – I noticed new interesting library – TN3. This is jQuery image gallery with slideshow, transitions effects, multiple album options etc. Plus you will able to customize it (via CSS). Today I will show you how you can implement this gallery to create own photo album.

Here are links to demo and downloadable package:

Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, lets download the example files and goto coding !

Step 1. HTML

index.html

As usual, we start with the HTML. I don`t will scare you with huge code here, wut will show most important.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="css/tn3/tn3.css" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.tn3lite.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>

    <title>Creating photo galleries with TN3 | Dev School</title>
</head>
<body>
<div class="example">
    <h4>Creating photo galleries with TN3 | Dev School</h4>

    <div class="tn3gallery"><!-- TN3Gallery -->
        <div class="tn3 album">

            <h4>Image 1 title</h4>
            <div class="tn3 description">Image 1 description</div>
            <div class="tn3 thumb">images/thumb_pic1.jpg</div>

            <ol>
                <li>
                    <h4>Image 1 title</h4>
                    <div class="tn3 description">Image 1 description</div>
                    <a href="images/pic1.jpg">
                    <img src="images/thumb_pic1.jpg" />
                    </a>
                </li>
                <li>
                    <h4>Image 2 title</h4>
                    <div class="tn3 description">Image 2 description</div>
                    <a href="images/pic2.jpg">
                    <img src="images/thumb_pic2.jpg" />
                    </a>
                </li>
                ........
                <!-- all another images of our gallery -->
                ........
            </ol>
        </div>
    </div>
</div>
</body>
</html>

As you can see – gallery based on OL-LI elements. Whole structure very easy for understanding, isn`t it?

Step 2. CSS

Here are used CSS files for our gallery:

css/tn3/tn3.css

This CSS file from standard package of that TN3 gallery. We do not have to publish it here – it will be available in our package.

css/style.css

/* demo page styles */
body {
    background:#eee;
    margin:0;
    padding:0;
}
.example {
    position:relative;
    background-color:#fff;
    width:768px;
    overflow:hidden;
    border:1px #000 solid;
    margin:20px auto;
    padding:20px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

/* custom styles */
.tn3-gallery {
    width: 768px;
    height: 559px;
}
.tn3-image {
    width: 768px;
    height: 512px;
}
.tn3-controls-bg {
    width: 768px;
}
.tn3-thumbs {
    width: 565px;
}

In our CSS file we just override a few basic styles.

Step 3. JS

js/jquery.tn3lite.min.js

This is library file, and its always available in package

js/main.js

$(document).ready(function() {
    var tn3 = $('.tn3gallery').tn3({
        skinDir:'css',
        imageClick:'fullscreen',
        image:{
            maxZoom:2.0,
            crop:true,
            clickEvent:'dblclick',
            transitions:[{
                type:'blinds'
            },{
                type:'grid'
            },{
                type:'grid',
                duration:350,
                easing:'easeInQuad',
                gridX:1,
                gridY:8,
                // flat, diagonal, circle, random
                sort:'random',
                sortReverse:false,
                diagonalStart:'bl',
                // fade, scale
                method:'scale',
                partDuration:360,
                partEasing:'easeOutSine',
                partDirection:'left'
            }]
        }
    });
});

First important things is: skinDir:’css’

With this option, we specify the folder where there will be a base css file of TN3 gallery.

Here are you can find another useful documentation of this gallery.

Step 4. Images

All our gallery images located in ‘images’ folder. Here are thumb images (thumb_pic1.jpg, thumb_pic2.jpg .. thumb_pic12.jpg) and full-size images (pic1.jpg, pic2.jpg .. pic12.jpg). Plus several small files of TN3 gallery located in same skin folder ‘css/tn3’. Here are just few files like: bg.png, tbg.png, tbg2.png and tn3.png

Live Demo

Conclusion

I hope that today we made new perfect gallery. TN3 is great library, if you will learn it – it will open to you new possibilities. Good luck in your projects!