Creating photo album with Galleriffic jQuery plugin Today we will make a new photo gallery. Recently I found another nice JQuery plugin – Galleriffic. This plugin well optimized to handle high volumes of photos. Also it have nice features like thumbnail navigation (with pagination), jQuery.history plugin integration, slideshow with Play/Pause, keyboard navigation etc. So I decided to practice with it today.
使用Galleriffic jQuery插件创建相册今天，我们将创建一个新的相册。 最近，我找到了另一个不错的JQuery插件– Galleriffic。 该插件经过优化，可处理大量照片。 它还具有不错的功能，例如缩略图导航(带有分页)，jQuery.history插件集成，带有播放/暂停的幻灯片放映，键盘导航等。因此，我决定今天开始练习。
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)
Here are html source code of our photo album. I don`t will scare you with huge code here, but will show most important.
这是我们相册的html源代码。 我不会在这里用巨大的代码吓到您，但是会显示出最重要的内容。
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Creating photo album with Galleriffic jQuery plugin | Script Tutorials</title>
<link href="css/galleriffic.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="container">
<div class="navigation-container">
<div id="thumbs" class="navigation">
<a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a>
<ul class="thumbs">
<li>
<a class="thumb" name="photo1" href="images/pic1.jpg" title="Title #1">
<img src="images/t_pic1.jpg" alt="Title #1" />
</a>
<div class="caption">
<div class="image-title">Title #1</div>
<div class="image-desc">HTML <b>description</b></div>
<div class="download"><a href="images/pic1.jpg">Download Original</a></div>
</div>
</li>
<li>
<a class="thumb" name="photo2" href="images/pic2.jpg" title="Title #2">
<img src="images/t_pic2.jpg" alt="Title #2" />
</a>
<div class="caption">
<div class="image-title">Title #2</div>
<div class="image-desc">HTML <i>description</i></div>
<div class="download"><a href="images/pic2.jpg">Download Original</a></div>
</div>
</li>
........... other photos here ..............
</ul>
<a class="pageLink next" style="visibility: hidden;" href="#" title="Next Page"></a>
</div>
</div>
<div class="content">
<div class="slideshow-container">
<div id="controls" class="controls"></div>
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container">
<div class="photo-index"></div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<footer>
<h2>Creating photo album with Galleriffic jQuery plugin</h2>
<a href="https://www.script-tutorials.com/creating-photo-album-with-galleriffic-jquery-plugin/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Creating photo album with Galleriffic jQuery plugin | Script Tutorials</title>
<link href="css/galleriffic.css" rel="stylesheet" type="text/css" />
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery.history.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div class="container">
<div class="navigation-container">
<div id="thumbs" class="navigation">
<a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a>
<ul class="thumbs">
<li>
<a class="thumb" name="photo1" href="images/pic1.jpg" title="Title #1">
<img src="images/t_pic1.jpg" alt="Title #1" />
</a>
<div class="caption">
<div class="image-title">Title #1</div>
<div class="image-desc">HTML <b>description</b></div>
<div class="download"><a href="images/pic1.jpg">Download Original</a></div>
</div>
</li>
<li>
<a class="thumb" name="photo2" href="images/pic2.jpg" title="Title #2">
<img src="images/t_pic2.jpg" alt="Title #2" />
</a>
<div class="caption">
<div class="image-title">Title #2</div>
<div class="image-desc">HTML <i>description</i></div>
<div class="download"><a href="images/pic2.jpg">Download Original</a></div>
</div>
</li>
........... other photos here ..............
</ul>
<a class="pageLink next" style="visibility: hidden;" href="#" title="Next Page"></a>
</div>
</div>
<div class="content">
<div class="slideshow-container">
<div id="controls" class="controls"></div>
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container">
<div class="photo-index"></div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<footer>
<h2>Creating photo album with Galleriffic jQuery plugin</h2>
<a href="https://www.script-tutorials.com/creating-photo-album-with-galleriffic-jquery-plugin/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</footer>
</body>
</html>
All units – LI elements. Af useful feature – we can set custom HTML description for each object (photo).
所有单位– LI元素。 有用的功能–我们可以为每个对象(照片)设置自定义HTML描述。
步骤2. CSS (Step 2. CSS)
css / main.css (css/main.css)
This file contain styles of our main page layout. We do not have to publish it here – it will be available in our package. But another one file – more important – styles for gallery:
该文件包含我们主页布局的样式。 我们不必在这里发布它-它可以在我们的程序包中找到。 但是还有一个文件(更重要的是)画廊的样式：
css / galleriffic.css (css/galleriffic.css)
div#container {
overflow: hidden;
}
div.content {
display: none;
clear: both;
}
div.content a, div.navigation a {
text-decoration: none;
}
div.content a:hover, div.content a:active {
text-decoration: underline;
}
div.navigation a.pageLink {
height: 52px;
line-height: 52px;
}
div.controls {
margin-top: 5px;
height: 23px;
}
div.controls a {
padding: 5px;
}
div.ss-controls {
float: left;
}
div.nav-controls {
float: right;
}
div.slideshow-container,
div.loader,
div.slideshow a.advance-link {
width: 510px;
}
div.loader,
div.slideshow a.advance-link,
div.caption-container {
height: 342px;
}
div.slideshow-container {
position: relative;
clear: both;
float: left;
height: 372px;
}
div.loader {
position: absolute;
top: 0;
left: 0;
background-image: url(loader.gif);
background-repeat: no-repeat;
background-position: center;
}
div.slideshow span.image-wrapper {
display: block;
position: absolute;
top: 30px;
left: 0;
}
div.slideshow a.advance-link {
display: block;
line-height: 342px;
text-align: center;
}
div.slideshow a.advance-link:hover,
div.slideshow a.advance-link:active,
div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.slideshow a.advance-link:focus {
outline: none;
}
div.slideshow img {
border-style: solid;
border-width: 1px;
border-color: #888;
}
div.caption-container {
color: #eee;
float: right;
position: relative;
margin-top: 30px;
}
span.image-caption {
display: block;
position: absolute;
top: 0;
left: 0;
}
div.caption-container, span.image-caption {
width: 334px;
}
div.caption {
padding: 0 12px;
}
div.image-title {
font-weight: bold;
font-size: 1.4em;
}
div.image-desc {
line-height: 1.3em;
padding-top: 12px;
}
div.download {
margin-top: 8px;
}
div.photo-index {
position: absolute;
bottom: 0;
left: 0;
padding: 0 12px;
}
div.navigation-container {
float: left;
position: relative;
left: 50%;
}
div.navigation {
float: left;
position: relative;
left: -50%;
}
div.navigation a.pageLink {
display: block;
position: relative;
float: left;
margin: 2px;
width: 16px;
background-position:center center;
background-repeat:no-repeat;
}
div.navigation a.pageLink:focus {
outline: none;
}
div.navigation a.prev {
background-image: url(page_prev.gif);
}
div.navigation a.next {
background-image: url(page_next.gif);
}
ul.thumbs {
position: relative;
float: left;
margin: 0;
padding: 0;
}
ul.thumbs li {
float: left;
padding: 0;
margin: 2px;
list-style: none;
}
a.thumb {
padding: 1px;
display: block;
}
a.thumb:focus {
outline: none;
}
ul.thumbs li.selected a.thumb {
background: #fff;
}
ul.thumbs img {
border: none;
display: block;
}
div.pagination {
clear: both;
position: relative;
left: -50%;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
position: relative;
display: block;
float: left;
margin-right: 2px;
padding: 4px 7px 2px 7px;
border: 1px solid #ccc;
}
div.pagination a:hover {
text-decoration: none;
}
div.pagination span.current {
font-weight: bold;
}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;
}
div.gallery-gutter {
clear: both;
padding-bottom: 20px;
}
div#container {
overflow: hidden;
}
div.content {
display: none;
clear: both;
}
div.content a, div.navigation a {
text-decoration: none;
}
div.content a:hover, div.content a:active {
text-decoration: underline;
}
div.navigation a.pageLink {
height: 52px;
line-height: 52px;
}
div.controls {
margin-top: 5px;
height: 23px;
}
div.controls a {
padding: 5px;
}
div.ss-controls {
float: left;
}
div.nav-controls {
float: right;
}
div.slideshow-container,
div.loader,
div.slideshow a.advance-link {
width: 510px;
}
div.loader,
div.slideshow a.advance-link,
div.caption-container {
height: 342px;
}
div.slideshow-container {
position: relative;
clear: both;
float: left;
height: 372px;
}
div.loader {
position: absolute;
top: 0;
left: 0;
background-image: url(loader.gif);
background-repeat: no-repeat;
background-position: center;
}
div.slideshow span.image-wrapper {
display: block;
position: absolute;
top: 30px;
left: 0;
}
div.slideshow a.advance-link {
display: block;
line-height: 342px;
text-align: center;
}
div.slideshow a.advance-link:hover,
div.slideshow a.advance-link:active,
div.slideshow a.advance-link:visited {
text-decoration: none;
}
div.slideshow a.advance-link:focus {
outline: none;
}
div.slideshow img {
border-style: solid;
border-width: 1px;
border-color: #888;
}
div.caption-container {
color: #eee;
float: right;
position: relative;
margin-top: 30px;
}
span.image-caption {
display: block;
position: absolute;
top: 0;
left: 0;
}
div.caption-container, span.image-caption {
width: 334px;
}
div.caption {
padding: 0 12px;
}
div.image-title {
font-weight: bold;
font-size: 1.4em;
}
div.image-desc {
line-height: 1.3em;
padding-top: 12px;
}
div.download {
margin-top: 8px;
}
div.photo-index {
position: absolute;
bottom: 0;
left: 0;
padding: 0 12px;
}
div.navigation-container {
float: left;
position: relative;
left: 50%;
}
div.navigation {
float: left;
position: relative;
left: -50%;
}
div.navigation a.pageLink {
display: block;
position: relative;
float: left;
margin: 2px;
width: 16px;
background-position:center center;
background-repeat:no-repeat;
}
div.navigation a.pageLink:focus {
outline: none;
}
div.navigation a.prev {
background-image: url(page_prev.gif);
}
div.navigation a.next {
background-image: url(page_next.gif);
}
ul.thumbs {
position: relative;
float: left;
margin: 0;
padding: 0;
}
ul.thumbs li {
float: left;
padding: 0;
margin: 2px;
list-style: none;
}
a.thumb {
padding: 1px;
display: block;
}
a.thumb:focus {
outline: none;
}
ul.thumbs li.selected a.thumb {
background: #fff;
}
ul.thumbs img {
border: none;
display: block;
}
div.pagination {
clear: both;
position: relative;
left: -50%;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
position: relative;
display: block;
float: left;
margin-right: 2px;
padding: 4px 7px 2px 7px;
border: 1px solid #ccc;
}
div.pagination a:hover {
text-decoration: none;
}
div.pagination span.current {
font-weight: bold;
}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;
}
div.gallery-gutter {
clear: both;
padding-bottom: 20px;
}
步骤3. JS (Step 3. JS)
js / jquery-1.5.2.min.js，js / jquery.galleriffic.js，js / jquery.history.js和js / jquery.opacityrollover.js (js/jquery-1.5.2.min.js, js/jquery.galleriffic.js, js/jquery.history.js and js/jquery.opacityrollover.js)
This is different jQuery libraries (including our new gallery), these files always available in package
这是不同的jQuery库(包括我们的新库)，这些文件始终在软件包中可用
js / main.js (js/main.js)
jQuery(document).ready(function($) {
$('div.content').css('display', 'block');
var onMouseOutOpacity = 0.67; // initial opacity
$('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({ // onhover styles
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
var gallery = $('#thumbs').galleriffic({ // initialization of Galleriffic plugin
delay: 2500,
numThumbs: 8,
preloadAhead: 8,
enableTopPager: false,
enableBottomPager: false,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: 'Previous Photo',
nextLinkText: 'Next Photo',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
var nextPageLink = this.find('a.next').css('visibility', 'hidden');
if (this.displayedPage > 0)
prevPageLink.css('visibility', 'visible');
var lastPage = this.getNumPages() - 1;
if (this.displayedPage < lastPage)
nextPageLink.css('visibility', 'visible');
this.fadeTo('fast', 1.0);
}
});
gallery.find('a.prev').click(function(e) { // other event handlers - Prev/Next links
gallery.previousPage();
e.preventDefault();
});
gallery.find('a.next').click(function(e) {
gallery.nextPage();
e.preventDefault();
});
// integration with jquery.history
function pageload(hash) {
if (hash) {
$.galleriffic.gotoImage(hash);
} else {
gallery.gotoIndex(0);
}
}
$.historyInit(pageload, 'system.html');
});
jQuery(document).ready(function($) {
$('div.content').css('display', 'block');
var onMouseOutOpacity = 0.67; // initial opacity
$('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({ // onhover styles
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
var gallery = $('#thumbs').galleriffic({ // initialization of Galleriffic plugin
delay: 2500,
numThumbs: 8,
preloadAhead: 8,
enableTopPager: false,
enableBottomPager: false,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: 'Previous Photo',
nextLinkText: 'Next Photo',
nextPageLinkText: 'Next ›',
prevPageLinkText: '‹ Prev',
enableHistory: true,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
var nextPageLink = this.find('a.next').css('visibility', 'hidden');
if (this.displayedPage > 0)
prevPageLink.css('visibility', 'visible');
var lastPage = this.getNumPages() - 1;
if (this.displayedPage < lastPage)
nextPageLink.css('visibility', 'visible');
this.fadeTo('fast', 1.0);
}
});
gallery.find('a.prev').click(function(e) { // other event handlers - Prev/Next links
gallery.previousPage();
e.preventDefault();
});
gallery.find('a.next').click(function(e) {
gallery.nextPage();
e.preventDefault();
});
// integration with jquery.history
function pageload(hash) {
if (hash) {
$.galleriffic.gotoImage(hash);
} else {
gallery.gotoIndex(0);
}
}
$.historyInit(pageload, 'system.html');
});
Here are we have initialization of gallery itself, several event handlers etc.
这是我们初始化图库本身，几个事件处理程序等的方法。
Here you can find full documentation for this gallery (with explanation of all params).
在这里，您可以找到此图库的完整文档(包含所有参数的说明)。
步骤4.图片 (Step 4. Images)
For gallery interface – we using few small icons (loader.gif, next.png, page_next.gif, page_prev.gif and prev.png). These icons available in package. Images of pur album located in ‘images’ folder. Here are thumb images (with prefix ‘t_’) and full-size images (pic1.jpg, pic2.jpg .. pic10.jpg).
对于图库界面–我们使用了一些小图标(loader.gif，next.png，page_next.gif，page_prev.gif和prev.png)。 这些图标在包装中可用。 pur专辑的图像位于“图像”文件夹中。 这是拇指图像(带有前缀“ t_”)和全尺寸图像(pic1.jpg，pic2.jpg .. pic10.jpg)。
现场演示
结论 (Conclusion)
I hope that today we made new nice gallery. Good luck in your projects!
我希望今天我们有了一个新的漂亮的画廊。 在您的项目中祝您好运！
翻译自: https://www.script-tutorials.com/creating-photo-album-with-galleriffic-jquery-plugin/
958
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
