[adinserter block=”34″]
Hi there guys! Today I want to share with you a jQuery plugin that I made.
This jQuery plugin will enable your users to preview your web albums instantly.
My inspiration here is the Facebook albums, if you have a Facebook account (I’m sure you have, haha!) and wanted to view the list of albums, you can experience this functionality:
For me, the above is a very simple Facebook feature and yet, it’s awesome. It is very convenient for a user to have an album preview just by doing a hover.
Here’s our index.html code:
<html>
<head>
<title>FB Album Preview jQuery Plugin by https://codeofaninja.com/</title>
<!– add some styles –>
<link rel=‘stylesheet’ type=‘text/css’ href=‘css/style.css’ />
</head>
<body>
<h3>
Demo of FB Album Preview jQuery Plugin by <a href=‘https://codeofaninja.com/’>The Code Of A Ninja</a>
</h3>
<!– -You can generate all these HTML and JS codes using your server side script -The number of photos or thumbnails to be previewed depends on you –>
<div id=‘mainContent’>
<!– album # 1 –>
<div class=‘albumDetails’>
<div class=“fbAlbum”>
<!– the first image is the album cover photo –>
<img class=“active” src=“images/1.jpg” />
<img src=“images/2.jpg” />
<img src=“images/3.jpg” />
<img src=“images/4.jpg” />
<img src=“images/5.jpg” />
</div>
<div class=‘albumTitle’><a href=”>Profile Picture</a></div>
<div class=‘photosNum’>5 photos</div>
</div>
<!– album # 2 –>
<div class=‘albumDetails’>
<div class=“fbAlbum”>
<!– the first image is the album cover photo –>
<img class=“active” src=“images/6.jpg” />
<img src=“images/7.jpg” />
<img src=“images/8.jpg” />
</div>
<div class=‘albumTitle’><a href=”>Mobile Uploads</a></div>
<div class=‘photosNum’>3 photos</div>
</div>
<!– album # 3 –>
<div class=‘albumDetails’>
<div class=“fbAlbum”>
<!– the first image is the album cover photo –>
<img class=“active” src=“images/9.jpg” />
<img src=“images/10.jpg” />
<img src=“images/11.jpg” />
<img src=“images/12.jpg” />
</div>
<div class=‘albumTitle’><a href=”>Wall Photos</a></div>
<div class=‘photosNum’>4 photos</div>
</div>
</div>
<!– include jQuery library and our FB album preview plugin –>
<script src=“js/jquery.min.js”></script>
<script src=“js/fb.album.preview.js”></script>
<!– this is how we’re gonna use the plugin –>
<script type=‘text/javascript’>
$(document).ready(function(){
// since all albums images container are under the class ‘fbAlbum’,
// that’s what we are gonna user as the selector
$(‘.fbAlbum’).FbAlbumPreview();
});
</script>
</body>
</html>
Our CSS code:
body{
font-family: ‘helvetica neue’, helvetica, arial, sans-serif;
}
.fbAlbum {
position:relative;
width:206px;
height:206px;
cursor:pointer;
}
.fbAlbum IMG {
position:absolute;
top:0;
left:0;
z-index:8;
width:206px;
height:206px;
}
.fbAlbum IMG.active {
z-index:10;
}
.fbAlbum IMG.last-active {
z-index:9;
}
.albumDetails{
float:left;
width:206px;
height:270px;
margin:20px;
}
.albumTitle{
font-family: ‘helvetica neue’, helvetica, arial, sans-serif;
white-space: nowrap;
font-weight:bold;
font-size:14px;
padding:10px 0 5px 0;
text-align:center;
}
.albumTitle a{
text-decoration:none;
color:#3B5998;
}
.albumTitle a:hover{
text-decoration:underline;
}
.photosNum{
color:gray;
line-height:19px;
font-size:11px;
text-align:center;
font-family: ‘lucida grande’, tahoma, verdana, arial, sans-serif;
}
#mainContent{
width:750px;
margin:0 auto;
margin-top:100px;
}
.clearb{
clear:both;
}
Customization code: Yes, you can supply values to customize the view and fade speed effect of this plugin. The default is viewSpeed = 1000 and fadeSpeed = 500. viewSpeed should always be greater than fadeSpeed.
$(‘.fbAlbum’).FbAlbumPreview({
viewSpeed: 800,
fadeSpeed: 400
});
viewSpeed – refers to how long the user can take a look at the thumbnail image.
fadeSpeed – how long the transition (fade effect) from one image to another will take place
Facebook Album Preview jQuery plugin Code (compressed)
/*FbAlbumPreview jQuery Plugin by Mike Dalisay - https://codeofaninja.com/ */
(function(a) {
a.fn.FbAlbumPreview = function(b) {
var c = a.extend({
viewSpeed: 1e3,
fadeSpeed: 500
}, b);
return this.each(function() {
var b;
var d = c.fadeSpeed;
var e = false;
a(this).hover(function() {
var f = a(this);
b = setInterval(function() {
f.find("IMG").show();
var a = f.find("IMG.active");
if (a.length == 0) {
a = f.find("IMG:last")
}
var b = a.next().length ? a.next() : f.find("IMG:first");
a.addClass("last-active");
b.css({
opacity: 0
}).addClass("active").animate({
opacity: 1
}, d, function() {
a.removeClass("active last-active");
e = true
})
}, c.viewSpeed)
}, function() {
clearInterval(b);
if (e == true) {
var c = a(this);
c.find("img").hide();
c.find("IMG.active").removeClass("active");
var f = c.find("IMG:first").fadeOut(d).fadeIn(d).addClass("active");
e = false
}
})
})
}
})(jQuery)
Download Source Codes
You can download all the code used in this tutorial for only $9.99 $5.55!
[purchase_link id=”12291″ text=”Download Now” style=”button” color=”green”]
Related Tutorials
[adinserter block=”1″]
Thank you for learning from our post about FbAlbumPreview jQuery Plugin.
Leave a Reply