Today we will continue overviews of available photo galleries. Next gallery will SmartGallery. This light-weight gallery will allow us to have thumbnail navigation, auto image scaling, 12 transition effects (to current moment). All this is done with the options of this gallery.
By default, the gallery is expected that all the necessary HTML data is prepared (with all used images). Our task is to create a script that will automatically load the necessary sets of images (as you may remember – our main goal is to picture the various members). We will use JQuery ($. get function).
Firstly – you can download our package and check demo:
Live Demo
download in package
Lets start coding !
Step 1. HTML
As usual, we start with the HTML. This is source code of our sample:
index.html
1 |
<link rel="stylesheet" href="css/main.css" type="text/css" /> |
2 |
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> |
3 |
<script type="text/javascript" src="js/smart-gallery.min.js"></script> |
4 |
<script type="text/javascript" src="js/main.js"></script> |
5 |
6 |
<div class="example"> |
7 |
<h3><a href="#">SmartGallery example</a></h3> |
8 |
<div class="smart_gallery"></div> |
9 |
</div> |
As you can see – we having empty <div class=”smart_gallery”></div> here. We will load imaged dinamically.
Step 2. CSS
Here are used CSS file with styles of our demo and of this gallery too:
css/main.css
001 |
body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0} |
002 |
.example{background:#FFF;width:572px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px} |
003 |
004 |
/*SmartGallery styles*/ |
005 |
.min-gallery |
006 |
{ |
007 |
width:572px; |
008 |
height:465px; |
009 |
border:solid 1px black; |
010 |
background-color:Black; |
011 |
background:url(../images/bg.jpg); |
012 |
margin:auto; |
013 |
} |
014 |
.min-gallery .preview |
015 |
{ |
016 |
width:500px; |
017 |
height:335px; |
018 |
margin-top:36px; |
019 |
margin-left:36px; |
020 |
margin-right:36px; |
021 |
position:relative; |
022 |
border:solid 2px black; |
023 |
overflow:hidden; |
024 |
background-color:White; |
025 |
} |
026 |
.min-gallery .preview img |
027 |
{ |
028 |
position:absolute; |
029 |
} |
030 |
.min-gallery .bottom |
031 |
{ |
032 |
width:100%; |
033 |
height:98px; |
034 |
color:Gray; |
035 |
font-family:Arial; |
036 |
font-size:1em; |
037 |
font-weight:bold; |
038 |
overflow:hidden; |
039 |
} |
040 |
.min-gallery .bottom .long |
041 |
{ |
042 |
width:100%; |
043 |
} |
044 |
.close |
045 |
{ |
046 |
text-align:center; |
047 |
color:white; |
048 |
font-family:Verdana; |
049 |
font-size:10px; |
050 |
font-weight:normal; |
051 |
text-transform:uppercase; |
052 |
cursor:pointer; |
053 |
width:100%; |
054 |
padding:4px; |
055 |
} |
056 |
.min-gallery .bottom .short |
057 |
{ |
058 |
width:100%; |
059 |
height:100%; |
060 |
} |
061 |
.min-gallery .bottom .short .left |
062 |
{ |
063 |
padding-left:5%; |
064 |
padding-top:42px; |
065 |
width:35%; |
066 |
float:left; |
067 |
} |
068 |
.min-gallery .bottom .short .middle |
069 |
{ |
070 |
width:20%; |
071 |
float:left; |
072 |
} |
073 |
.min-gallery .bottom .short .right |
074 |
{ |
075 |
width:35%; |
076 |
float:left; |
077 |
text-align:right; |
078 |
padding-right:5%; |
079 |
padding-top:42px; |
080 |
} |
081 |
.min-gallery .bottom .short .middle > div |
082 |
{ |
083 |
float:left; |
084 |
} |
085 |
086 |
.short-thumbnail-container |
087 |
{ |
088 |
width:36px; |
089 |
padding-top:30px; |
090 |
cursor:pointer; |
091 |
} |
092 |
.gallery-nav-left |
093 |
{ |
094 |
cursor:pointer; |
095 |
width:12px; |
096 |
margin-right:25px; |
097 |
height:18px; |
098 |
background-image:url(../images/arrow-left.png); |
099 |
background-repeat:no-repeat; |
100 |
background-position:center; |
101 |
margin-top:40px; |
102 |
} |
103 |
.gallery-nav-right |
104 |
{ |
105 |
width:12px; |
106 |
margin-left:25px; |
107 |
height:18px; |
108 |
cursor:pointer; |
109 |
background-image:url(../images/arrow-right.png); |
110 |
background-repeat:no-repeat; |
111 |
background-position:center; |
112 |
margin-top:40px; |
113 |
} |
114 |
.thumbnail-button |
115 |
{ |
116 |
width:8px; |
117 |
height:8px; |
118 |
margin:2px; |
119 |
background-image:url(../images/box.jpg); |
120 |
float:left; |
121 |
} |
122 |
.active-image |
123 |
{ |
124 |
z-index:100; |
125 |
display:block; |
126 |
} |
127 |
.inactive-image |
128 |
{ |
129 |
} |
130 |
.gallery-caption |
131 |
{ |
132 |
position:absolute; |
133 |
width:100%; |
134 |
height:100px; |
135 |
background-color:Black; |
136 |
widht:100%; |
137 |
z-index:102; |
138 |
color:gray; |
139 |
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; |
140 |
filter:alpha(opacity=70); |
141 |
-moz-opacity:0.7; |
142 |
-khtml-opacity:0.7; |
143 |
opacity:0.7; |
144 |
padding:8px; |
145 |
} |
146 |
147 |
.thumbnails |
148 |
{ |
149 |
width:420px; |
150 |
margin:auto; |
151 |
padding:0; |
152 |
padding:22px 0px 0px 0px; |
153 |
position:relative; |
154 |
} |
155 |
.thumbnails-back, .thumbnails-forward |
156 |
{ |
157 |
float:left; |
158 |
width:13px; |
159 |
height:40px; |
160 |
position:relative; |
161 |
top:6px; |
162 |
cursor:pointer; |
163 |
} |
164 |
.thumbnails-back |
165 |
{ |
166 |
background-image:url(../images/arrow-left.png); |
167 |
background-repeat:no-repeat; |
168 |
background-position:left; |
169 |
} |
170 |
.thumbnails-forward |
171 |
{ |
172 |
background-image:url(../images/arrow-right.png); |
173 |
background-repeat:no-repeat; |
174 |
background-position:right; |
175 |
} |
176 |
.thumbnails-contents |
177 |
{ |
178 |
width:390px; |
179 |
height:48px; |
180 |
float:left; |
181 |
position:relative; |
182 |
overflow:hidden; |
183 |
} |
184 |
.thumbnails-contents > div |
185 |
{ |
186 |
position:absolute; |
187 |
width:100%; |
188 |
} |
189 |
.thumbnails-contents > div > div |
190 |
{ |
191 |
float:left; |
192 |
} |
193 |
.thumbnails-contents img |
194 |
{ |
195 |
width:43px; |
196 |
height:43px; |
197 |
margin-left:9px; |
198 |
margin-right:9px; |
199 |
border:solid 2px black; |
200 |
} |
201 |
202 |
.hidden |
203 |
{ |
204 |
display:none; |
205 |
} |
206 |
.visible |
207 |
{ |
208 |
display:block; |
209 |
} |
210 |
.thumbnail-active |
211 |
{ |
212 |
filter:alpha(opacity=100); |
213 |
opacity:1.0; |
214 |
cursor:pointer; |
215 |
} |
216 |
.thumbnail-inactive |
217 |
{ |
218 |
filter:alpha(opacity=50); |
219 |
opacity:0.5; |
220 |
cursor:pointer; |
221 |
} |
222 |
.thumbnail-text |
223 |
{ |
224 |
color:#7A7677; |
225 |
font-weight:bold; |
226 |
text-align:left; |
227 |
display:block; |
228 |
padding:10px 2px 2px 0px; |
229 |
} |
230 |
.clear-fix |
231 |
{ |
232 |
clear:both; |
233 |
} |
Step 3. JS
Here are all JS files:
js/main.js
01 |
jQuery(window).load(function() { |
02 |
$.get('feed.php', function(data){ |
03 |
$('.smart_gallery').append(data); |
04 |
05 |
$('.smart_gallery').gallery({ |
06 |
random: true, |
07 |
circular: true, |
08 |
masked: true, |
09 |
animation: "blind", |
10 |
noofthumbnails: 6, |
11 |
thumbnailscrollspeed: 2000, |
12 |
animationspeed: 1000, |
13 |
stickthumbnails: true, |
14 |
imagedisplaytime: 3000 |
15 |
}); |
16 |
}); |
17 |
}); |
So, when page loaded, I start loading extra info (about using images) from feed.php using jQuery. After, appending received info to our $(‘.smart_gallery’). And then – perform initialization of our gallery with necessary params. Full list of possible params I will put in end of article.
js/jquery-1.5.2.min.js and js/smart-gallery.min.js
This is main jQuery library with gallery plugin. Available in our package.
Step 4. PHP
Here are source code of our generator of images:
feed.php
01 |
<? |
02 |
03 |
// define template for gallery |
04 |
$sImageTemplate = <<<HTML |
05 |
<a href="{fileurl}" title="{title}"><img src="{fileurl}" /></a> |
06 |
HTML; |
07 |
08 |
$sImages = ''; |
09 |
$sFolder = 'data_images/'; |
10 |
11 |
$aUnits = array( // obtaining array of used images |
12 |
'pic1.jpg' => 'Image 1', 'pic2.jpg' => 'Image 2', 'pic3.jpg' => 'Image 3', 'pic4.jpg' => 'Image 4', |
13 |
'pic5.jpg' => 'Image 5', 'pic6.jpg' => 'Image 6', 'pic7.jpg' => 'Image 7', 'pic8.jpg' => 'Image 8', |
14 |
'pic9.jpg' => 'Image 9', 'pic10.jpg' => 'Image 10' |
15 |
); |
16 |
17 |
foreach ($aUnits as $sFileName => $sTitle) { // preparing images data |
18 |
$sImages .= strtr($sImageTemplate, array('{fileurl}' => $sFolder . $sFileName, '{title}' => $sTitle)); |
19 |
} |
20 |
21 |
echo $sImages; |
22 |
23 |
?> |
This is easy code, in begining – template for image list, then – I passing through our images, performing replaces, and echo result of our list (back to JS function)
Step 5. Images
Our SmartGallery gallery using next images:
And at last – table with all possible params (to current moment) of that gallery:
| Param | Type | Default | Description |
|---|---|---|---|
| random | boolean | true | If you going to use single transition, set to ‘false’ |
| circular | boolean | true | Is thumb gallery circular? |
| masked | boolean | true | All images in thumbs line will have mask, and, onhover – mask disappear |
| animation | string | blind | Transition effect (fadein, blind, fallingbars, appear, fillin, explode, jumble, risingbars, paint, diagonal, crunchingbars, slidein) |
| noofthumbnails | int | 6 | Amount of thumbs displayed in time |
| thumbnailscrollspeed | int | 2000 | Speed, where thumbnails scroll back and forth (ms) |
| animationspeed | int | 1000 | Speed of animation (ms) |
| stickthumbnails | boolean | false | In case of false – bar with thumbnails will closing automatically |
| imagedisplaytime | int | 3000 | Time of displaying of single image (ms) |
Live Demo
download in package
Conclusion
Today I told you how to build new jQuery gallery. Sure that you will happy to use it in your projects. Good luck!