Create Image Gallery Full Page With jQuery

In this tutorial we are going to create a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. The idea is to have a thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the image.

We will use some CSS3 Webkit properties to enhance the look and jQuery for the functionality.
That’s why the demo is best viewed in Webkit browsers like Google Chrome or Apple Safari.

We will be using the awesome jQuery thumbnail scroller by Malihu. Big thanks to him for this great and smooth script!

Again, we will be showing some amazing photography by Mark Sebastian. Please visit his Flickr page or his homepage for more information on his work. The images that we will be using are from “The IT Factor” photo set on Flickr.

So, let’s begin!

Example Image Gallery Full Page Klik here,,,

CSS::

<style>
*{
    margin:0;
    padding:0;
}
body {
    background:#212121;
    overflow:hidden;
    font-family:Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    color:#fff;
    font-size:10px;
}
#outer_container{
    position:fixed;
    bottom:-160px;    /*-160px to hide*/
    margin:0px 0px 30px 0px;
    height:130px;
    padding:0;
    -webkit-box-reflect:
        below 5px -webkit-gradient(
            linear,
            left top,
            left bottom,
            from(transparent),
            color-stop(0.6, transparent),
            to(rgb(18, 18, 18))
        );
}
#thumbScroller{
    position:relative;
    overflow:hidden;
}
#thumbScroller .container{
    position:relative;
    left:0;
}
#thumbScroller .content{
    float:left;
}
#thumbScroller .content div{
    margin:2px;
    height:100%;
}
#thumbScroller img,
img.clone{
    border:5px solid #fff;
    height:120px;
}
#thumbScroller a{
    padding:2px;
    outline:none;
}
.fp_overlay{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-TF_hDOQGE7Atw0Lf-imSTxdLiInhyn_uKIKnsdpUtTIhQwtlHER7fUTG5QN15dhAMKuGNmZyf_wy9ezC9wXQx2J5xhSh5UsEzI_mB_JM-UaGONkx7bzYe2eyg-DA4NquqzZz6y6b36A/s1600/overlay.png);
}
.fp_loading{
    display:none;
    position:fixed;
    top:50%;
    left:50%;
    margin:-35px 0px 0px -35px;
    background:#000 url(http://tympanus.net/Tutorials/FullPageImageGallery/images/icons/loader.gif) no-repeat center center;
    width:70px;
    height:70px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    z-index:999;
    opacity:0.7;
}
.fp_next,
.fp_prev{
    width:50px;
    height:50px;
    position:fixed;
    top:50%;
    margin-top:-15px;
    cursor:pointer;
    opacity:0.5;
}
.fp_next:hover,
.fp_prev:hover{
    opacity:0.9;
}
.fp_next{
    background:#000 url(http://tympanus.net/Tutorials/FullPageImageGallery/images/icons/next.png) no-repeat center center;
    right:-50px;
}
.fp_prev{
    background:#000 url(http://tympanus.net/Tutorials/FullPageImageGallery/images/icons/prev.png) no-repeat center center;
    left:-50px;
}
.fp_thumbtoggle{
    height:50px;
    background:#000;
    width:200px;
    text-align:center;
    letter-spacing:1px;
    text-shadow:1px 1px 1px #000;
    position:fixed;
    left:50%;
    margin-left:-100px;
    bottom:-50px;
    line-height:50px;
    cursor:pointer;
    opacity:0.8;
}
.fp_thumbtoggle:hover{
    opacity:1.0;
}
img.fp_preview{
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
}
</style>

SCRIPT::

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="http://tympanus.net/Tutorials/FullPageImageGallery/jquery.easing.1.3.js"></script>

<script type="text/javascript">
            $(window).load(function() {
                sliderLeft=$('#thumbScroller .container').position().left;
                padding=$('#outer_container').css('paddingRight').replace("px", "");
                sliderWidth=$(window).width()-padding;
                $('#thumbScroller').css('width',sliderWidth);
                var totalContent=0;
                $('#thumbScroller .content').each(function () {
                    totalContent+=$(this).innerWidth();
                    $('#thumbScroller .container').css('width',totalContent);
                });
                $('#thumbScroller').mousemove(function(e){
                    if($('#thumbScroller  .container').width()>sliderWidth){
                        var mouseCoords=(e.pageX - this.offsetLeft);
                        var mousePercentX=mouseCoords/sliderWidth;
                        var destX=-(((totalContent-(sliderWidth))-sliderWidth)*(mousePercentX));
                        var thePosA=mouseCoords-destX;
                        var thePosB=destX-mouseCoords;
                        var animSpeed=600; //ease amount
                        var easeType='easeOutCirc';
                        if(mouseCoords==destX){
                            $('#thumbScroller .container').stop();
                        }
                        else if(mouseCoords>destX){
                            //$('#thumbScroller .container').css('left',-thePosA); //without easing
                            $('#thumbScroller .container').stop().animate({left: -thePosA}, animSpeed,easeType); //with easing
                        }
                        else if(mouseCoords<destX){
                            //$('#thumbScroller .container').css('left',thePosB); //without easing
                            $('#thumbScroller .container').stop().animate({left: thePosB}, animSpeed,easeType); //with easing
                        }
                    }
                });
                $('#thumbScroller  .thumb').each(function () {
                    $(this).fadeTo(fadeSpeed, 0.6);
                });
                var fadeSpeed=200;
                $('#thumbScroller .thumb').hover(
                function(){ //mouse over
                    $(this).fadeTo(fadeSpeed, 1);
                },
                function(){ //mouse out
                    $(this).fadeTo(fadeSpeed, 0.6);
                }
            );
            });
            $(window).resize(function() {
                //$('#thumbScroller .container').css('left',sliderLeft); //without easing
                $('#thumbScroller .container').stop().animate({left: sliderLeft}, 400,'easeOutCirc'); //with easing
                $('#thumbScroller').css('width',$(window).width()-padding);
                sliderWidth=$(window).width()-padding;
            });
        </script>

        <!-- The JavaScript -->
        <script type="text/javascript">
            $(function() {
                //current thumb's index being viewed
                var current            = -1;
                //cache some elements
                var $btn_thumbs = $('#fp_thumbtoggle');
                var $loader        = $('#fp_loading');
                var $btn_next        = $('#fp_next');
                var $btn_prev        = $('#fp_prev');
                var $thumbScroller    = $('#thumbScroller');
               
                //total number of thumbs
                var nmb_thumbs        = $thumbScroller.find('.content').length;
               
                //preload thumbs
                var cnt_thumbs         = 0;
                for(var i=0;i<nmb_thumbs;++i){
                    var $thumb = $thumbScroller.find('.content:nth-child('+parseInt(i+1)+')');
                    $('<img/>').load(function(){
                        ++cnt_thumbs;
                        if(cnt_thumbs == nmb_thumbs)
                //display the thumbs on the bottom of the page
                showThumbs(2000);
                    }).attr('src',$thumb.find('img').attr('src'));
                }
               
               
                //make the document scrollable
                //when the the mouse is moved up/down
                //the user will be able to see the full image
                makeScrollable();
               
                //clicking on a thumb...
                $thumbScroller.find('.content').bind('click',function(e){
                    var $content= $(this);
                    var $elem     = $content.find('img');
                    //keep track of the current clicked thumb
                    //it will be used for the navigation arrows
                    current     = $content.index()+1;
                    //get the positions of the clicked thumb
                    var pos_left     = $elem.offset().left;
                    var pos_top     = $elem.offset().top;
                    //clone the thumb and place
                    //the clone on the top of it
                    var $clone     = $elem.clone()
                    .addClass('clone')
                    .css({
                        'position':'fixed',
                        'left': pos_left + 'px',
                        'top': pos_top + 'px'
                    }).insertAfter($('BODY'));
                   
                    var windowW = $(window).width();
                    var windowH = $(window).height();
                   
                    //animate the clone to the center of the page
                    $clone.stop()
                    .animate({
                        'left': windowW/2 + 'px',
                        'top': windowH/2 + 'px',
                        'margin-left' :-$clone.width()/2 -5 + 'px',
                        'margin-top': -$clone.height()/2 -5 + 'px'
                    },500,
                    function(){
                        var $theClone     = $(this);
                        var ratio        = $clone.width()/120;
                        var final_w        = 400*ratio;
                       
                        $loader.show();
                       
                        //expand the clone when large image is loaded
                        $('<img class="fp_preview"/>').load(function(){
                            var $newimg         = $(this);
                            var $currImage     = $('#fp_gallery').children('img:first');
                            $newimg.insertBefore($currImage);
                            $loader.hide();
                            //expand clone
                            $theClone.animate({
                                'opacity'        : 0,
                                'top'            : windowH/2 + 'px',
                                'left'            : windowW/2 + 'px',
                                'margin-top'    : '-200px',
                                'margin-left'    : -final_w/2 + 'px',
                                'width'            : final_w + 'px',
                                'height'        : '400px'
                            },1000,function(){$(this).remove();});
                            //now we have two large images on the page
                            //fadeOut the old one so that the new one gets shown
                            $currImage.fadeOut(2000,function(){
                                $(this).remove();
                            });
                            //show the navigation arrows
                            showNav();
                        }).attr('src',$elem.attr('alt'));
                    });
                    //hide the thumbs container
                    hideThumbs();
                    e.preventDefault();
                });
               
                //clicking on the "show thumbs"
                //displays the thumbs container and hides
                //the navigation arrows
                $btn_thumbs.bind('click',function(){
                    showThumbs(500);
                    hideNav();
                });
               
                function hideThumbs(){
                    $('#outer_container').stop().animate({'bottom':'-160px'},500);
                    showThumbsBtn();
                }

                function showThumbs(speed){
                    $('#outer_container').stop().animate({'bottom':'0px'},speed);
                    hideThumbsBtn();
                }
               
                function hideThumbsBtn(){
                    $btn_thumbs.stop().animate({'bottom':'-50px'},500);
                }

                function showThumbsBtn(){
                    $btn_thumbs.stop().animate({'bottom':'0px'},500);
                }

                function hideNav(){
                    $btn_next.stop().animate({'right':'-50px'},500);
                    $btn_prev.stop().animate({'left':'-50px'},500);
                }

                function showNav(){
                    $btn_next.stop().animate({'right':'0px'},500);
                    $btn_prev.stop().animate({'left':'0px'},500);
                }

                //events for navigating through the set of images
                $btn_next.bind('click',showNext);
                $btn_prev.bind('click',showPrev);
               
                //the aim is to load the new image,
                //place it before the old one and fadeOut the old one
                //we use the current variable to keep track which
                //image comes next / before
                function showNext(){
                    ++current;
                    var $e_next    = $thumbScroller.find('.content:nth-child('+current+')');
                    if($e_next.length == 0){
                        current = 1;
                        $e_next    = $thumbScroller.find('.content:nth-child('+current+')');
                    }
                    $loader.show();
                    $('<img class="fp_preview"/>').load(function(){
                        var $newimg         = $(this);
                        var $currImage         = $('#fp_gallery').children('img:first');
                        $newimg.insertBefore($currImage);
                        $loader.hide();
                        $currImage.fadeOut(2000,function(){$(this).remove();});
                    }).attr('src',$e_next.find('img').attr('alt'));
                }
               
                function showPrev(){
                    --current;
                    var $e_next    = $thumbScroller.find('.content:nth-child('+current+')');
                    if($e_next.length == 0){
                        current = nmb_thumbs;
                        $e_next    = $thumbScroller.find('.content:nth-child('+current+')');
                    }
                    $loader.show();
                    $('<img class="fp_preview"/>').load(function(){
                        var $newimg         = $(this);
                        var $currImage         = $('#fp_gallery').children('img:first');
                        $newimg.insertBefore($currImage);
                        $loader.hide();
                        $currImage.fadeOut(2000,function(){$(this).remove();});
                    }).attr('src',$e_next.find('img').attr('alt'));
                }
               
                function makeScrollable(){
                    $(document).bind('mousemove',function(e){
                        var top = (e.pageY - $(document).scrollTop()/2) ;
                        $(document).scrollTop(top);
                    });
                }
            });
        </script>

HTML::

<div id="fp_gallery" class="fp_gallery">
<img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/1.jpg" alt="" class="fp_preview" style="display:none;"/>
            <div class="fp_overlay"></div>
            <div id="fp_loading" class="fp_loading"></div>
            <div id="fp_next" class="fp_next"></div>
            <div id="fp_prev" class="fp_prev"></div>
            <div id="outer_container">
                <div id="thumbScroller">
                    <div class="container">
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/1.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/1.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/2.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/2.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/3.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/3.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/4.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/4.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/5.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/5.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/6.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/6.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/7.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/7.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/8.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/8.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/9.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/9.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/10.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/10.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/11.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/11.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/12.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/12.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/13.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/13.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/14.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/14.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/15.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/15.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/16.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/16.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/17.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/17.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/18.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/18.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/19.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/19.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/20.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/20.jpg" class="thumb" /></a></div>
                        </div>
                        <div class="content">
                            <div><a href="#"><img src="http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/21.jpg" alt="http://tympanus.net/Tutorials/FullPageImageGallery/images/21.jpg" class="thumb" /></a></div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="fp_thumbtoggle" class="fp_thumbtoggle">View Thumbs</div>
        </div>
        <div>

        </div>

Please rate this article: