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, 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 http://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='http://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>
<head>
<title>FB Album Preview jQuery Plugin by http://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='http://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;
}
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: 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
FbAlbumPreview jQuery plugin Code (compressed)
(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)
The Code of a Ninja Resources
For FREE programming tutorials, click the red button below and subscribe! :)
website