Home jQuery

FbAlbumPreview 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, 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

FbAlbumPreview 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!

THANK YOU!

has been added to your cart!

Powered by Easy Digital Downloads

Thank you!

have been added to your cart!

Powered by Easy Digital Downloads

Related Tutorials

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