Facebook Album Preview jQuery Plugin

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

Please explore more tutorials on our start page. Click here.

Thank you for learning from our post about FbAlbumPreview jQuery Plugin.

By Mike Dalisay

I'm Mike Dalisay, a pro web developer since 2010. I love web development. Improving our tutorials and source codes makes me happy. Do you want to suggest an edit to our tutorial? Got something to ask about our source codes? Email our team at [email protected]