如何使用TN3创建精彩的相册

最新推荐文章于 2021-06-10 16:06:08 发布

cuken7684698822

最新推荐文章于 2021-06-10 16:06:08 发布

阅读量387

点赞数

文章标签： html js css less web ViewUI

原文链接：https://www.script-tutorials.com/how-to-create-photo-album-with-tn3/

版权

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.

用TN3创建相册。在浏览网页时–我注意到了一个有趣的新库– TN3。这是具有幻灯片放映，转场效果，多个专辑选项等的jQuery图像库。此外，您将能够自定义它(通过CSS)。今天，我将向您展示如何实现此画廊以创建自己的相册。

Here are links to demo and downloadable package:

以下是演示和可下载软件包的链接：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, lets download the example files and goto coding !

好，让我们下载示例文件并进行编码！

步骤1. HTML (Step 1. HTML)

index.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.

和往常一样，我们从HTML开始。在这里，我不会用巨大的代码吓到你，而wut将显示出最重要的意义。


<!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>


<!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?

如您所见–基于OL-LI元素的图库。整个结构很容易理解，不是吗？

步骤2. CSS (Step 2. CSS)

Here are used CSS files for our gallery:

以下是我们画廊使用CSS文件：

css / tn3 / tn3.css (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.

该TN3图库的标准包中CSS文件。我们不必在这里发布它-它可以在我们的程序包中找到。

css / style.css (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;
}


/* 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.

在我们CSS文件中，我们仅覆盖一些基本样式。

步骤3. JS (Step 3. JS)

js / jquery.tn3lite.min.js (js/jquery.tn3lite.min.js)

This is library file, and its always available in package

这是库文件，并且始终在软件包中可用

js / main.js (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'
            }]
        }
    });
});


$(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’

首先重要的是：skinDir：'css'

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

使用此选项，我们指定TN3 gallery基本css文件所在的文件夹。

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

您可以在这里找到该图库的另一个有用的文档。

步骤4.图片 (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

我们所有的画廊图像都位于“图像”文件夹中。这是拇指图像(thumb_pic1.jpg，thumb_pic2.jpg .. thumb_pic12.jpg)和全尺寸图像(pic1.jpg，pic2.jpg .. pic12.jpg)。加上位于同一外观文件夹“ css / tn3”中的TN3画廊的几个小文件。以下是一些文件，例如：bg.png，tbg.png，tbg2.png和tn3.png

现场演示

结论 (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!

我希望今天我们有了新的完美画廊。 TN3是一个很棒的图书馆，如果您会学的话，它将为您打开新的可能性。在您的项目中祝您好运！

翻译自: https://www.script-tutorials.com/how-to-create-photo-album-with-tn3/

cuken7684698822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用TN3创建精彩的相册

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 wil...
复制链接

扫一扫