ndarray 花式
Fancy Image gallery – jqFancyTransitions In our new tutorial I would like to show you how to create a nice looking photo gallery with transition effects. I’m going to use a ready jQuery plugin – jqFancyTransitions. It is easy and effective jQuery plugin to display photos as photo slideshow with fancy transition effects (wave, zipper and curtain). There are a lot of ways to customize the result. All the possible options will be published at the end of this article.
Fancy Image gallery – jqFancyTransitions在我们的新教程中，我想向您展示如何创建具有过渡效果的漂亮照片库。 我将使用现成的jQuery插件– jqFancyTransitions。 这是一个简单有效的jQuery插件，可以将照片显示为带有奇幻过渡效果(波浪，拉链和窗帘)的照片幻灯片。 有很多方法可以自定义结果。 所有可能的选项将在本文结尾处发布。
现场演示
[sociallocker]
[社交储物柜]
打包下载
[/sociallocker]
[/ sociallocker]
Ok, let’s download the source files and start coding !
好的，让我们下载源文件并开始编码！
步骤1. HTML (Step 1. HTML)
Firstly, in order to use this gallery we should add all the necessary styles and scripts in the header section:
首先，为了使用此库，我们应在标题部分添加所有必要的样式和脚本：
<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!-- add scripts -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/jqFancyTransitions.1.8.min.js"></script>
<script src="js/main.js"></script>
<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!-- add scripts -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/jqFancyTransitions.1.8.min.js"></script>
<script src="js/main.js"></script>
Then, we can prepare an easy html markup of our photo gallery with several photos:
然后，我们可以使用几张照片为我们的照相馆准备一个简单的html标记：
<div id="gallery">
<img src="images/pic1.jpg" alt="<i>A look to New Jersey <a href='http://1x.com/photo/53587'>by Hannes Cmarits</a></i>" />
<img src="images/pic2.jpg" alt="<i>Reflections [color] <a href='http://1x.com/photo/20045'>by Sven Fennema</a></i>" />
<img src="images/pic3.jpg" alt="<i>Silk <a href='http://1x.com/photo/45014'>by Bryan Jolly</a></i>" />
<img src="images/pic4.jpg" alt="<i>Space City III <a href='http://1x.com/photo/31495'>by WisoNet</a></i>" />
<img src="images/pic5.jpg" alt="<i>Forms and reflections <a href='http://1x.com/photo/30093'>by Sven Fennema</a></i>" />
<img src="images/pic6.jpg" alt="<i>Skyarena <a href='http://1x.com/photo/19329'>by Luis Romero</a></i>" />
</div>
<div id="gallery">
<img src="images/pic1.jpg" alt="<i>A look to New Jersey <a href='http://1x.com/photo/53587'>by Hannes Cmarits</a></i>" />
<img src="images/pic2.jpg" alt="<i>Reflections [color] <a href='http://1x.com/photo/20045'>by Sven Fennema</a></i>" />
<img src="images/pic3.jpg" alt="<i>Silk <a href='http://1x.com/photo/45014'>by Bryan Jolly</a></i>" />
<img src="images/pic4.jpg" alt="<i>Space City III <a href='http://1x.com/photo/31495'>by WisoNet</a></i>" />
<img src="images/pic5.jpg" alt="<i>Forms and reflections <a href='http://1x.com/photo/30093'>by Sven Fennema</a></i>" />
<img src="images/pic6.jpg" alt="<i>Skyarena <a href='http://1x.com/photo/19329'>by Luis Romero</a></i>" />
</div>
There are six images, each of them has alt attribute, afterward, the value of this attribute will be converted into title for every photo, as you can see – we can use html entities here.
有六个图像，每个图像都有alt属性，然后，如您所见，此属性的值将转换为每张照片的标题-我们可以在此处使用html实体。
步骤2. CSS (Step 2. CSS)
css / main.css (css/main.css)
In order to produce good result, I had to customize our gallery:
为了产生良好的效果，我必须自定义我们的画廊：
.ft-title {
background-color: rgba(128, 128, 128, 0.8) !important;
font-size: 18px;
font-weight: bold;
height: 37px;
line-height: 40px;
margin-right:10px;
text-align: right;
width: 100%;
}
.ft-title a {
color: #fff;
}
.ft-prev, .ft-next {
/* CSS3 transform */
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.ft-prev {
background-color: rgba(128, 128, 128, 0.5);
border-color: transparent #0072BC transparent transparent;
border-radius: 0 30px 30px 0;
border-style: solid;
border-width: 30px;
height: 0;
overflow: hidden;
width: 0;
}
.ft-next {
background-color: rgba(128, 128, 128, 0.5);
border-color: transparent transparent transparent #0072BC;
border-radius: 30px 0 0 30px;
border-style: solid;
border-width: 30px;
overflow: hidden;
width: 0;
height: 0;
}
.ft-prev:hover {
border-right-color: #00548b;
}
.ft-next:hover {
border-left-color: #00548b;
}
#ft-buttons-gallery a:link, #ft-buttons-gallery a:visited {
background-color: #F5F5F5;
border: 1px solid #EBEBEB;
color: #0072BC;
font-weight: normal;
margin-left: 10px;
padding: 2px 7px;
text-decoration: none;
width: 22px;
}
#ft-buttons-gallery a.ft-button-gallery-active {
background-color: #DDEEFF;
border: 1px solid #BBDDFF;
color: #0072BC;
cursor: default;
margin-left: 10px;
padding: 2px 7px;
text-decoration: none;
}
.ft-title {
background-color: rgba(128, 128, 128, 0.8) !important;
font-size: 18px;
font-weight: bold;
height: 37px;
line-height: 40px;
margin-right:10px;
text-align: right;
width: 100%;
}
.ft-title a {
color: #fff;
}
.ft-prev, .ft-next {
/* CSS3 transform */
-webkit-transition: all 0.2s ease-in-out 0s;
-moz-transition: all 0.2s ease-in-out 0s;
-o-transition: all 0.2s ease-in-out 0s;
-ms-transition: all 0.2s ease-in-out 0s;
transition: all 0.2s ease-in-out 0s;
}
.ft-prev {
background-color: rgba(128, 128, 128, 0.5);
border-color: transparent #0072BC transparent transparent;
border-radius: 0 30px 30px 0;
border-style: solid;
border-width: 30px;
height: 0;
overflow: hidden;
width: 0;
}
.ft-next {
background-color: rgba(128, 128, 128, 0.5);
border-color: transparent transparent transparent #0072BC;
border-radius: 30px 0 0 30px;
border-style: solid;
border-width: 30px;
overflow: hidden;
width: 0;
height: 0;
}
.ft-prev:hover {
border-right-color: #00548b;
}
.ft-next:hover {
border-left-color: #00548b;
}
#ft-buttons-gallery a:link, #ft-buttons-gallery a:visited {
background-color: #F5F5F5;
border: 1px solid #EBEBEB;
color: #0072BC;
font-weight: normal;
margin-left: 10px;
padding: 2px 7px;
text-decoration: none;
width: 22px;
}
#ft-buttons-gallery a.ft-button-gallery-active {
background-color: #DDEEFF;
border: 1px solid #BBDDFF;
color: #0072BC;
cursor: default;
margin-left: 10px;
padding: 2px 7px;
text-decoration: none;
}
There are styles for the customized title area, prev and next buttons and for pagination.
自定义标题区域，上一个和下一个按钮以及分页都有样式。
步骤3. JS (Step 3. JS)
js / main.js (js/main.js)
Now, we have to initialize our photo gallery:
现在，我们必须初始化我们的照片库：
js / main.js (js/main.js)
$(function(){
$('#gallery').jqFancyTransitions({
effect: 'zipper', // wave, zipper, curtain
width: 850, // width of panel
height: 600, // height of panel
strips: 15, // number of strips
delay: 3000, // delay between images in ms
stripDelay: 20, // delay beetwen strips in ms
titleOpacity: 0.8, // opacity of title
titleSpeed: 2000, // speed of title appereance in ms
position: 'curtain', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: true, // prev and next navigation buttons
links: false // show images as links
});
})
$(function(){
$('#gallery').jqFancyTransitions({
effect: 'zipper', // wave, zipper, curtain
width: 850, // width of panel
height: 600, // height of panel
strips: 15, // number of strips
delay: 3000, // delay between images in ms
stripDelay: 20, // delay beetwen strips in ms
titleOpacity: 0.8, // opacity of title
titleSpeed: 2000, // speed of title appereance in ms
position: 'curtain', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: true, // prev and next navigation buttons
links: false // show images as links
});
})
Everything is very easy, isn’t it? You can follow this link in order to find an official demonstration and documentation.
一切都很容易，不是吗？ 您可以单击此链接以找到官方的演示和文档。
步骤4.图片 (Step 4. Images)
All the gallery images are in ‘images’ folder.
所有画廊图像都在“图像”文件夹中。
jqFancyTransitions参数 (jqFancyTransitions params)
You can use the next properties to ininialize this plugin:
您可以使用以下属性来初始化此插件：
| Param | Type | Default | Description |
|---|---|---|---|
| effect | string | Transition effect, possible values are: wave, zipper and curtain | |
| width | int | 500 | Panel width |
| height | int | 332 | Panel height |
| strips | int | 10 | Strips amount |
| delay | int | 5000 | Delay between images in ms |
| stripDelay | int | 50 | Delay beetwen strips in ms |
| titleOpacity | float | 0.7 | Title’s opacity |
| titleSpeed | int | 1000 | Speed of title appereance in ms |
| position | string | alternate | Strips position: top, bottom, alternate, curtain |
| direction | string | fountainAlternate | Strips direction: left, right, alternate, random, fountain, fountainAlternate |
| navigation | boolean | false | Display prev-next navigation buttons |
| links | boolean | false | Display images as links |
| 参数 | 类型 | 默认 | 描述 |
|---|---|---|---|
| 影响 | 串 | 过渡效果，可能的值为：波浪，拉链和窗帘 | |
| 宽度 | 整型 | 500 | 面板宽度 |
| 高度 | 整型 | 332 | 面板高度 |
| 带子 | 整型 | 10 | 剥离量 |
| 延迟 | 整型 | 5000 | 图像之间的延迟(以毫秒为单位) |
| stripDelay | 整型 | 50 | 延迟beetwen条的毫秒数 |
| title不透明度 | 浮动 | 0.7 | 标题的不透明度 |
| titleSpeed | 整型 | 1000 | 标题出现速度(毫秒) |
| 位置 | 串 | 备用 | 条带位置：顶部，底部，备用，窗帘 |
| 方向 | 串 | 喷泉 | 条带方向：左，右，交替，随机，喷泉，喷泉 |
| 导航 | 布尔值 | 假 | 显示上一个-下一个导航按钮 |
| 链接 | 布尔值 | 假 | 将图像显示为链接 |
现场演示
结论 (Conclusion)
That is all for today. We have just created new photo gallery with jqFancyTransitions. I hope that everything have been easy for you and you like our result. Good luck!
今天就这些。 我们刚刚使用jqFancyTransitions创建了新的照相馆。 我希望一切对您来说都很容易，并且您喜欢我们的结果。 祝好运！
翻译自: https://www.script-tutorials.com/fancy-image-gallery-jqfancytransitions/
ndarray 花式
扫一扫
94
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
