Scroller Gallery

main.js

/* ---------------------------------------------------------------------
* scroller gallery plugin - v0001
* ------------------------------------------------------------------ */


(function ( $ ) {


    $.fn.scrollerGallery = function( options ){

        
        /* ---------------------------------------------------------------------
         * settings
         * ------------------------------------------------------------------ */
        var settings = $.extend({
            defaultGalleryScale: true,
            galleryBig: 600,
            gallerySmall: 400,
            topBarHeight: 100 || options.topBarHeight           
        }, options );

        
        /* ---------------------------------------------------------------------
         * DOM elements
         * ------------------------------------------------------------------ */
        var scroller            = '.scroller' || this.selector,
            scrollerWrap        = scroller  + ' .scroller-wrap',
            container           = scrollerWrap + ' .scroller-container',
            leftBtn             = scrollerWrap + ' .left-arrow',
            rightBtn            = scrollerWrap + ' .right-arrow',
            slide               = container + ' .slide',
            scalebtn            = '.scrollerGalleryNav .scalebtn',
            cover               = slide + ' .cover',
            reseTimeDelay       = 200;


        /* ---------------------------------------------------------------------
        * add the close button
        * ------------------------------------------------------------------ */ 
        addCloseButton = function( _elem ){
            var closeButton = jQuery('<a/>', {
                class: 'closebtn',
                text: 'x close'
            });
            $(_elem).append( closeButton );
            return $(_elem);
        };

        /* ---------------------------------------------------------------------
        * reset the full screen slides
        * ------------------------------------------------------------------ */   
        resetSlides = function(){
            
            //move up the black div
            $('.black_get_bigger').css({
                width:'100%',
                height:'100%',
                position: 'fixed',
                top: '100%',
                left:0
            });

            //black bigger
            TweenMax.to( 
                [
                   $('.black_get_bigger')
                ], 
                0.5, 
                {
                    top: 0,
                    ease:Power2.easeInOut,  
                    onComplete : function(){
                        
                       setTimeout(function(){
                           
                           
                           $('.black_get_bigger').fadeOut( 1500, function(){
                               $('.black_get_bigger').remove();
                           });
                           
                           $('.big_slide .big_image').fadeOut( 300, function(){
                               $('.big_slide .big_image').remove();
                           });
                           
                           $('.big_slide').fadeOut( 500, function(){
                               $('.big_slide').remove();
                           });


                        }, 300);
                        
                    }
                    
                }
                        
            );

        };
        
        
        /* ---------------------------------------------------------------------
        * thumbnail to bigger image
        * ------------------------------------------------------------------ */ 
        thumbNailToBig = function(_elem){
            
            $('.mini_nav .slide').removeClass('active');
            $(_elem).parent().addClass('active');
            _img = $(_elem).parent().find('img').attr('src');
            $('.big_image').fadeOut(200, function(){
                 $('.big_image').attr('src', _img);
                 $('.big_image').fadeIn(300);
            });
        };
        
        
        /* ---------------------------------------------------------------------
        * add the cloned carousel
        * ------------------------------------------------------------------ */   
        addClonedContainer = function( _elem, _src ){
            
            _elem = addCloseButton(_elem);
            
            var carousel = $(slide + '.isClone').clone();
            
            $.each( carousel, function(index, value){
                if( $(this).children('img').attr('src') === _src){
                    $(this).addClass('active');
                }
            });
            
            var inside = jQuery('<div/>', {
                class: 'inside'
            });
            
            var mini_nav = jQuery('<div/>', {
                class: 'mini_nav'
            });
            
            $(mini_nav).append( $(inside) );
            $(carousel).appendTo( $(inside) );
            
            var new_img = jQuery('<img/>', {
                class: 'big_image',
                src: _src
            });
            
            $(new_img).css({
                'max-height' : $(window).height() - 400,
            });
            
            $(new_img).appendTo(_elem);
            $(mini_nav).appendTo(_elem);
            
            return _elem;
        };
        
        
        /* ---------------------------------------------------------------------
        * add the big slide
        * ------------------------------------------------------------------ */   
        addBigSlide = function(_elem, _src){
            var big_slide = jQuery('<div/>', {
                class: 'big_slide'
            });
            $(big_slide).css({
                'background': 'rgba(0,0,0,0.9)',
                'display' : 'none'
            });
            var new_elem = addClonedContainer( big_slide, _src );
            $(new_elem).appendTo('body').fadeIn();
        };
        
        
        /* ---------------------------------------------------------------------
        * add the bigger black overlay
        * ------------------------------------------------------------------ */  
        addBlackBigger = function( _from_top, _from_left, _width, _height ){
            
            var black_bigger = jQuery('<div/>', {
                class: 'black_get_bigger',
            });
            
            $(black_bigger).css({
                bottom:  0,
                left: '50%',
                width: 0,
                height: 0
            });  
            
            $(black_bigger).appendTo(container);          
            return black_bigger;
        };
        
        
        /* ---------------------------------------------------------------------
        * make full screen onclick
        * ------------------------------------------------------------------ */   
        makeFullScreen = function( _elem ){
            
   
            //elements
            _parent = $(_elem).parent(),
            _img = _parent.find('img');

            //dimentions
            _from_top   = $(_elem).offset().top ;
            _from_left  = $(_elem).offset().left;
            _new_width  = $(window).outerWidth();
            _new_height = $(window).height();


            //add the black overlay
            var black_bigger = addBlackBigger(_from_top, _from_left, _new_width, _new_height);

            
            //black bigger
            TweenMax.to( 
                [ 
                    $(black_bigger)
                ], 
                0.6, 
                {
                    width: _new_width + _from_left,
                    height: _new_height,
                    left: -(_from_left),
                    ease:Power2.easeInOut,  
                    onComplete : function(){

                        //add the big slide
                        addBigSlide(_elem, _img.attr('src') );
                       
                        //after a delay make the black slide down
                        setTimeout(function () {
                            
                            TweenMax.to( $(black_bigger), 0.5, {
                                height: 0,
                            });
  
                        }, 200 ); 
                        
                    }
                    
                }
                        
            );
    
        };

        /* ---------------------------------------------------------------------
         * total width
         * ------------------------------------------------------------------ */
        totalWidth = function() {
            total = 0;
            $(slide).each(function() {
                total += $(this).width();
            });
            return total;
        };
       
       
        /* ---------------------------------------------------------------------
         * gallery scale
         * ------------------------------------------------------------------ */
        galleryScale = function() {
            //return settings.defaultGalleryScale ? settings.galleryBig : settings.gallerySmall;
            var windowHeight = parseInt( $(window).height() ) - parseInt(settings.topBarHeight);
            return windowHeight;
        },
          
                
        /* ---------------------------------------------------------------------
         * offset
         * ------------------------------------------------------------------ */      
        offset = function(type) {

            leftOffset = 0;
            centreOffset = 0;

            // Calculate and return the width of all the images that are before the 'current' image
            if (type == "left") {
                $(slide).each(function() {
                    if ($(this).hasClass('current')) { return false; } else { leftOffset += $(this).width(); }
                });
                return leftOffset;
            }

            // Calculate and return the position for where to sit the center/current image
            if (type == "centre") {
                centreOffset = -( offset("left"))+($(scrollerWrap).width()/2)-($('.current').width()/2);
                return centreOffset;
            }
        };
       
       
        /* ---------------------------------------------------------------------
        * resetter
        * ------------------------------------------------------------------ */       
        resetter = function() {
            $(slide).height( galleryScale() );
            $(scroller).height( galleryScale());
            $(container).width( totalWidth());
            $(container).css('left', offset("centre") );
        };
       
       
        /* ---------------------------------------------------------------------
         * next and prev scroll buttons
         * ------------------------------------------------------------------ */
        nextPrevBtn = function(nextPrev) {
            
            setTimeout(function () {
                
                reverseDirection = false;

                if (reverseDirection) { 
                    nextPrev === 'prev' ? nextPrev = 'next' : nextPrev = 'prev'; 
                }

                if (!TweenMax.isTweening($(container))) {
                    if (nextPrev == 'prev') {
                      $(slide+':last').insertBefore(slide+':first');
                      $(container).css('left', parseFloat($(container).css('left'))-$(slide+':first').width());
                      $(slide+'.current').removeClass('current').prev().addClass('current');
                      TweenMax.to(container, 0.5, {left:offset("centre"), ease:Power2.easeInOut});
                    }
                    if (nextPrev == 'next') {
                        $(slide+':first').insertAfter(slide+':last');
                        $(container).css('left', parseFloat($(container).css('left'))+$(slide+':last').width());
                        $(slide+'.current').removeClass('current').next().addClass('current');
                        TweenMax.to(container, 0.5, {left:offset("centre"), ease:Power2.easeInOut});
                    }
                }

            }, reseTimeDelay); 
            
        };
        
        
        /* ---------------------------------------------------------------------
         * init the plugin
         * ------------------------------------------------------------------ */
        this.init = function() {
             
            setTimeout(function() { 
                resetter(); 
            }, 500);

            // set teh height of the gallery
            $(slide).height( galleryScale() );

            // Dependant of what the default gallery size is, adjust the scale button image/class accordingly
            settings.defaultGalleryScale ? $(scalebtn).addClass('scaledown') : $(scalebtn).removeClass('scaledown');

            $(leftBtn).click(function() {
                nextPrevBtn('prev'); 
            });

            $(rightBtn).click(function() { 
                nextPrevBtn('next'); 
            });

            $("body").keydown(function(e) {
                if(e.keyCode == 37) { 
                    $(leftBtn).click(); 
                }
                if(e.keyCode == 39) { 
                    $(rightBtn).click(); 
                }
                
            });
            
        };
        
        
        /* ---------------------------------------------------------------------
         * bind functions to dom elements
         * ------------------------------------------------------------------ */
        this.bindings = function(){
            
            $(document).on('click', cover, function() {
                makeFullScreen(this);
            });
            
            $(document).on('click', '.mini_nav .slide .cover', function() {
                thumbNailToBig(this);
            });
            
            $(document).on('click', '.big_slide .closebtn', function() {
                resetSlides();
            });
            
        };
        

        /* ---------------------------------------------------------------------
         * scroller
         * ------------------------------------------------------------------ */
        this.scroller = function() {

            // If there are less than 5 slides, clone all the current slides so larger screens won't see any unsusual animations
            if ($(slide).length == 1) { 
                for ( var i = 0; i < 6; i++ ) { 
                    $(container).children('.slide').clone().addClass('isClone').appendTo(container); 
                } 
            }
            else if ($(slide).length == 2 || $(slide).length == 3) {  
                for ( var i = 0; i < 3; i++ ) { 
                    $(container).children('.slide').clone().addClass('isClone').appendTo(container); 
                } 
            }
            else if ($(slide).length >= 4 || $(slide).length <= 6) { 
                $(container).children('.slide').clone().addClass('isClone').appendTo(container);  
            }

            // Make first 'a' set to current
            $(slide).first().addClass('current');

            // Move images from the end to the front until the 'current' image is in the middle
            for ( var i = 0; i < (Math.floor($(slide).length/2)); i++ ) { 
                $(slide+':last').insertBefore(slide+':first'); 
            }

            // Set container width
            $(container).width( totalWidth() );

            // Center the current image, including when the users window is resized
            function centerCurrentImage() { 
                $(container).css('left', - (this.offset("left") ) + ( $(scrollerWrap).width() / 2) -( $('.current').width() / 2)); 
            }

            $(window).resize(function(){ 
                centerCurrentImage(); 
            });

            centerCurrentImage();
            
            
            /* -----------------------------------------------------------------
            * fade in the gallery
            * --------------------------------------------------------------- */
            $(scrollerWrap).fadeIn(1500);

            
            
        
        };

        /* ---------------------------------------------------------------------
        * run the plugin
        * ------------------------------------------------------------------ */
        this.init();
        this.bindings();
        this.scroller();        
    };


}( jQuery ));

scroller.html

<!DOCTYPE html>
<html>
    <head>
        <title>Scroller Gallery</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="/scroller-gallery/css/styles.css" />
    </head>
<body>   
    <div class="scroller">
        <div class="scroller-wrap">
            <button class="left-arrow">left</button>
            <button class="right-arrow">right</button>
            <div class="scroller-container">
                <div class="slide">
                    <img data-ind="2" src="/scroller-gallery/slider-tmp/0001.jpeg" alt=" ">
                    <div class="cover"></div>
                </div>
                <div class="slide">
                    <img data-ind="2" src="/scroller-gallery/slider-tmp/0002.jpeg" alt=" ">
                    <div class="cover"></div>
                </div>
                <div class="slide">
                    <img data-ind="2" src="/scroller-gallery/slider-tmp/0003.jpeg" alt=" ">
                    <div class="cover"></div>
                </div>
                <div class="slide">
                    <img data-ind="2" src="/scroller-gallery/slider-tmp/0004.jpeg" alt=" ">
                    <div class="cover"></div>
                </div>
                <div class="slide">
                    <img data-ind="2" src="/scroller-gallery/slider-tmp/0005.jpeg" alt=" ">
                    <div class="cover"></div>
                </div>
                <div class="slide">
                    <img data-ind="2" src="/scroller-gallery/slider-tmp/0006.jpeg" alt=" ">
                    <div class="cover"></div>
                </div>
                <div class="slide">
                    <img data-ind="2" src="/scroller-gallery/slider-tmp/0008.jpeg" alt=" ">
                    <div class="cover"></div>
                </div>
                <div class="slide">
                    <img data-ind="2" src="/scroller-gallery/slider-tmp/0009.jpeg" alt=" ">
                    <div class="cover"></div>
                </div>
            </div>
        </div>
    </div>    
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="/scroller-gallery/js/greensock/TweenMax.min.js"></script>
    <script src="/scroller-gallery/js/main.js"></script>
    

    <script> 
        $(function(){
            
            $('.scroller').scrollerGallery({
                //--> totdo options      
                topBarHeight: 400
            });
            
            $('body').css({'background':'rgb(225, 225, 234)'});
            
        });
    </script>
    
    
    </body>
</html>

style.css

body{
    margin:0;
    padding:0;
}

.scroller{
    position: relative;
    background-color: #e6e6e6;
    width: 100%;
    height: 0;
    min-width: 960px;
    overflow: hidden;
    -webkit-transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    -ms-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}

.scroller-wrap{
    height: 100%;
    display:none;
}

.scroller-container{
    position: absolute;
    height: inherit;
    top: 0;
    left: 50%;
}

.slide{
    position: relative;
    display: block;
    float: left;
}

.slide img{
    position:abolute;
    top:0;
    left:0;
    z-index:1;
    height: inherit;
    width: auto;
    z-index: 1;
    position: relative;
}

.left-arrow {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 100px;
    z-index: 10;
    right: 50px;
}

.right-arrow {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 100px;
    z-index: 10;
    left: 50px;
}

/* -- black on mouseover on the slides -- */

.cover{ 
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    width:100%;
    height:100%;
    background:none;
    -webkit-transition: background 350ms ease-in 200ms;
    -moz-transition: background 350ms ease-in 200ms;
    -o-transition: background 350ms ease-in 200ms;
    transition: background 350ms ease-in 200ms;
}             
.cover:hover{
    cursor:pointer;    
    background: rgba(0,0,0, 0.7);
}

/* -- big overlays -- */

.black_get_bigger{
    background: rgba(0,0,0, 0.9);
    position:fixed;
    z-index:1000;
}

.big_slide{
    background-size: cover;
    z-index: 999;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.big_slide .closebtn{
    position: absolute;
    top: 10px;
    right: 20px;
    color: rgba(255, 255, 255, 0.51);
    text-transform: uppercase;
    font-family: Helvetica;
    border: solid 1px rgba(255, 255, 255, 0.51);
    padding: 10px;
    cursor: pointer;
}

/* -- big image -- */

.big_image{
    margin: auto auto;
    display: block;
    position:relative;
    
    /* center the image*/
    top:50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* -- mini nav -- */

.mini_nav {
    position:absolute;
    bottom:20px;
    width: 100%;
    text-align: center;
}

.mini_nav .inside{
    display:inline-block;
}

.mini_nav .slide{
    max-width:100px;
    max-height:100px;
    margin-left:20px;
    border:solid 2px black;
}

.mini_nav .slide:first-child { 
     margin-left:0;
}

.mini_nav .slide.active{
    border:solid 2px white;
}

.mini_nav .slide .cover:hover{ 
    background:none;
    cursor:pointer;
}

.mini_nav .slide img{
    max-width:100%;
    max-height:100%;
}