How to Create a Fantastic Photo Album with TN3

How to Create a Fantastic Photo Album with TN3

8 87230
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 | Script Tutorials</title>
</head>
<body>
<div class="example">
    <h4>Creating photo galleries with TN3 | Script Tutorials</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!

SIMILAR ARTICLES


8 COMMENTS

  1. Not sure if this is something that you might be able to steer me in the right direction with, but I’m developing the website above (still plenty to do before going live with it) and the bottom line is that I will have 35+ home communities that I am marketing and on each community page, I would like to display about 200 photos or thereabouts in a gallery-type display and have the photos hosted on a host site (so as not to slow down the site).

    Any suggestions?

    I’d appreciate any guidance or direction at all if possible.

    Thank you for any help whatsoever!

    Tim

    • Hi Tim,
      And, what are you looking for in result? For nice gallery? If you have many photos which you going to display in gallery – look for ajaxy-loading galleries

    • Yes, this is pretty interesting question, I don’t know why they cut ‘alt’ attribute from images.

  2. Thanks, Andrew. I was looking at this gallery myself so this is great. I am making this one responsive – with the main image that resizes, and hopefully the thumbnails as well. I have been working to get components like this gallery to actually enlarge on 1080 HD displays, so I’m thinking about overall scaling in my pages.

    • Hi Giany,
      This is not a problem if you can work with PHP and MySQL. All you need is to prepare the HTML code of necessary images in php (taking them from your database).

Leave a Reply to Tim Scott Cancel reply