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.
Here are links to demo and downloadable package:
Contents
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, lets download the example files and goto coding !
Step 1. 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.
01 | <!DOCTYPE html> |
02 | <html lang="en" > |
03 | <head> |
04 | <meta charset="utf-8" /> |
05 | <title>Creating photo album with Galleriffic jQuery plugin | Script Tutorials</title> |
06 | <link href="css/galleriffic.css" rel="stylesheet" type="text/css" /> |
07 | <link href="css/main.css" rel="stylesheet" type="text/css" /> |
08 | <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> |
09 | <script type="text/javascript" src="js/jquery.history.js"></script> |
10 | <script type="text/javascript" src="js/jquery.galleriffic.js"></script> |
11 | <script type="text/javascript" src="js/jquery.opacityrollover.js"></script> |
12 | <script type="text/javascript" src="js/main.js"></script> |
13 | </head> |
14 | <body> |
15 | <div class="container"> |
16 | <div class="navigation-container"> |
17 | <div id="thumbs" class="navigation"> |
18 | <a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a> |
19 | <ul class="thumbs"> |
20 | <li> |
21 | <a class="thumb" name="photo1" href="images/pic1.jpg" title="Title #1"> |
22 | <img src="images/t_pic1.jpg" alt="Title #1" /> |
23 | </a> |
24 | <div class="caption"> |
25 | <div class="image-title">Title #1</div> |
26 | <div class="image-desc">HTML <b>description</b></div> |
27 | <div class="download"><a href="images/pic1.jpg">Download Original</a></div> |
28 | </div> |
29 | </li> |
30 | <li> |
31 | <a class="thumb" name="photo2" href="images/pic2.jpg" title="Title #2"> |
32 | <img src="images/t_pic2.jpg" alt="Title #2" /> |
33 | </a> |
34 | <div class="caption"> |
35 | <div class="image-title">Title #2</div> |
36 | <div class="image-desc">HTML <i>description</i></div> |
37 | <div class="download"><a href="images/pic2.jpg">Download Original</a></div> |
38 | </div> |
39 | </li> |
40 | ........... other photos here .............. |
41 | </ul> |
42 | <a class="pageLink next" style="visibility: hidden;" href="#" title="Next Page"></a> |
43 | </div> |
44 | </div> |
45 | <div class="content"> |
46 | <div class="slideshow-container"> |
47 | <div id="controls" class="controls"></div> |
48 | <div id="loading" class="loader"></div> |
49 | <div id="slideshow" class="slideshow"></div> |
50 | </div> |
51 | <div id="caption" class="caption-container"> |
52 | <div class="photo-index"></div> |
53 | </div> |
54 | </div> |
55 | <div style="clear: both;"></div> |
56 | </div> |
57 | <footer> |
58 | <h2>Creating photo album with Galleriffic jQuery plugin</h2> |
59 | <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> |
60 | </footer> |
61 | </body> |
62 | </html> |
All units – LI elements. Af useful feature – we can set custom HTML description for each object (photo).
Step 2. 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
001 | div#container { |
002 | overflow: hidden; |
003 | } |
004 | div.content { |
005 | display: none; |
006 | clear: both; |
007 | } |
008 | div.content a, div.navigation a { |
009 | text-decoration: none; |
010 | } |
011 | div.content a:hover, div.content a:active { |
012 | text-decoration: underline; |
013 | } |
014 | div.navigation a.pageLink { |
015 | height: 52px; |
016 | line-height: 52px; |
017 | } |
018 | div.controls { |
019 | margin-top: 5px; |
020 | height: 23px; |
021 | } |
022 | div.controls a { |
023 | padding: 5px; |
024 | } |
025 | div.ss-controls { |
026 | float: left; |
027 | } |
028 | div.nav-controls { |
029 | float: right; |
030 | } |
031 | div.slideshow-container, |
032 | div.loader, |
033 | div.slideshow a.advance-link { |
034 | width: 510px; |
035 | } |
036 | div.loader, |
037 | div.slideshow a.advance-link, |
038 | div.caption-container { |
039 | height: 342px; |
040 | } |
041 | div.slideshow-container { |
042 | position: relative; |
043 | clear: both; |
044 | float: left; |
045 | height: 372px; |
046 | } |
047 | div.loader { |
048 | position: absolute; |
049 | top: 0; |
050 | left: 0; |
051 | background-image: url(loader.gif); |
052 | background-repeat: no-repeat; |
053 | background-position: center; |
054 | } |
055 | div.slideshow span.image-wrapper { |
056 | display: block; |
057 | position: absolute; |
058 | top: 30px; |
059 | left: 0; |
060 | } |
061 | div.slideshow a.advance-link { |
062 | display: block; |
063 | line-height: 342px; |
064 | text-align: center; |
065 | } |
066 | div.slideshow a.advance-link:hover, |
067 | div.slideshow a.advance-link:active, |
068 | div.slideshow a.advance-link:visited { |
069 | text-decoration: none; |
070 | } |
071 | div.slideshow a.advance-link:focus { |
072 | outline: none; |
073 | } |
074 | div.slideshow img { |
075 | border-style: solid; |
076 | border-width: 1px; |
077 | border-color: #888; |
078 | } |
079 | div.caption-container { |
080 | color: #eee; |
081 | float: right; |
082 | position: relative; |
083 | margin-top: 30px; |
084 | } |
085 | span.image-caption { |
086 | display: block; |
087 | position: absolute; |
088 | top: 0; |
089 | left: 0; |
090 | } |
091 | div.caption-container, span.image-caption { |
092 | width: 334px; |
093 | } |
094 | div.caption { |
095 | padding: 0 12px; |
096 | } |
097 | div.image-title { |
098 | font-weight: bold; |
099 | font-size: 1.4em; |
100 | } |
101 | div.image-desc { |
102 | line-height: 1.3em; |
103 | padding-top: 12px; |
104 | } |
105 | div.download { |
106 | margin-top: 8px; |
107 | } |
108 | div.photo-index { |
109 | position: absolute; |
110 | bottom: 0; |
111 | left: 0; |
112 | padding: 0 12px; |
113 | } |
114 | div.navigation-container { |
115 | float: left; |
116 | position: relative; |
117 | left: 50%; |
118 | } |
119 | div.navigation { |
120 | float: left; |
121 | position: relative; |
122 | left: -50%; |
123 | } |
124 | div.navigation a.pageLink { |
125 | display: block; |
126 | position: relative; |
127 | float: left; |
128 | margin: 2px; |
129 | width: 16px; |
130 | background-position:center center; |
131 | background-repeat:no-repeat; |
132 | } |
133 | div.navigation a.pageLink:focus { |
134 | outline: none; |
135 | } |
136 | div.navigation a.prev { |
137 | background-image: url(page_prev.gif); |
138 | } |
139 | div.navigation a.next { |
140 | background-image: url(page_next.gif); |
141 | } |
142 | ul.thumbs { |
143 | position: relative; |
144 | float: left; |
145 | margin: 0; |
146 | padding: 0; |
147 | } |
148 | ul.thumbs li { |
149 | float: left; |
150 | padding: 0; |
151 | margin: 2px; |
152 | list-style: none; |
153 | } |
154 | a.thumb { |
155 | padding: 1px; |
156 | display: block; |
157 | } |
158 | a.thumb:focus { |
159 | outline: none; |
160 | } |
161 | ul.thumbs li.selected a.thumb { |
162 | background: #fff; |
163 | } |
164 | ul.thumbs img { |
165 | border: none; |
166 | display: block; |
167 | } |
168 | div.pagination { |
169 | clear: both; |
170 | position: relative; |
171 | left: -50%; |
172 | } |
173 | div.pagination a, div.pagination span.current, div.pagination span.ellipsis { |
174 | position: relative; |
175 | display: block; |
176 | float: left; |
177 | margin-right: 2px; |
178 | padding: 4px 7px 2px 7px; |
179 | border: 1px solid #ccc; |
180 | } |
181 | div.pagination a:hover { |
182 | text-decoration: none; |
183 | } |
184 | div.pagination span.current { |
185 | font-weight: bold; |
186 | } |
187 | div.pagination span.ellipsis { |
188 | border: none; |
189 | padding: 5px 0 3px 2px; |
190 | } |
191 | div.gallery-gutter { |
192 | clear: both; |
193 | padding-bottom: 20px; |
194 | } |
Step 3. 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
js/main.js
01 | jQuery(document).ready(function($) { |
02 | $('div.content').css('display', 'block'); |
03 | var onMouseOutOpacity = 0.67; // initial opacity |
04 | $('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({ // onhover styles |
05 | mouseOutOpacity: onMouseOutOpacity, |
06 | mouseOverOpacity: 1.0, |
07 | fadeSpeed: 'fast', |
08 | exemptionSelector: '.selected' |
09 | }); |
10 | var gallery = $('#thumbs').galleriffic({ // initialization of Galleriffic plugin |
11 | delay: 2500, |
12 | numThumbs: 8, |
13 | preloadAhead: 8, |
14 | enableTopPager: false, |
15 | enableBottomPager: false, |
16 | imageContainerSel: '#slideshow', |
17 | controlsContainerSel: '#controls', |
18 | captionContainerSel: '#caption', |
19 | loadingContainerSel: '#loading', |
20 | renderSSControls: true, |
21 | renderNavControls: true, |
22 | playLinkText: 'Play Slideshow', |
23 | pauseLinkText: 'Pause Slideshow', |
24 | prevLinkText: 'Previous Photo', |
25 | nextLinkText: 'Next Photo', |
26 | nextPageLinkText: 'Next ›', |
27 | prevPageLinkText: '‹ Prev', |
28 | enableHistory: true, |
29 | autoStart: false, |
30 | syncTransitions: true, |
31 | defaultTransitionDuration: 900, |
32 | onSlideChange: function(prevIndex, nextIndex) { |
33 | this.find('ul.thumbs').children() |
34 | .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end() |
35 | .eq(nextIndex).fadeTo('fast', 1.0); |
36 | }, |
37 | onPageTransitionOut: function(callback) { |
38 | this.fadeTo('fast', 0.0, callback); |
39 | }, |
40 | onPageTransitionIn: function() { |
41 | var prevPageLink = this.find('a.prev').css('visibility', 'hidden'); |
42 | var nextPageLink = this.find('a.next').css('visibility', 'hidden'); |
43 | if (this.displayedPage > 0) |
44 | prevPageLink.css('visibility', 'visible'); |
45 | var lastPage = this.getNumPages() - 1; |
46 | if (this.displayedPage < lastPage) |
47 | nextPageLink.css('visibility', 'visible'); |
48 | this.fadeTo('fast', 1.0); |
49 | } |
50 | }); |
51 | gallery.find('a.prev').click(function(e) { // other event handlers - Prev/Next links |
52 | gallery.previousPage(); |
53 | e.preventDefault(); |
54 | }); |
55 | gallery.find('a.next').click(function(e) { |
56 | gallery.nextPage(); |
57 | e.preventDefault(); |
58 | }); |
59 | // integration with jquery.history |
60 | function pageload(hash) { |
61 | if (hash) { |
62 | $.galleriffic.gotoImage(hash); |
63 | } else { |
64 | gallery.gotoIndex(0); |
65 | } |
66 | } |
67 | $.historyInit(pageload, 'system.html'); |
68 | }); |
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).
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).
Live Demo
Conclusion
I hope that today we made new nice gallery. Good luck in your projects!
