Slideshow: swipe & keyboard gallery

Slideshow

function slideshow(element){
    
    var self = this,
		$element = $(element),
		$container = $(">ul", $element),
		$panes = $(">ul>li", $element),
		pane_width = 0,
		pane_height = 0,
		pane_count = $panes.length,
		current_pane = 0,
		_animate = "animate";

    this.init = function(){

    	current_pane = 0;

        setPaneDimensions();
        slideNavigation();
        handleKeyboard();

        // set first slide as active

		$element.find("> ul > li:eq(0)").addClass("active");

        $(window).on("scroll load throttledresize orientationchange", function(){
            setPaneDimensions();

        	if( element.hasClass("slider-services") ){

				element.find("ul").css({
					height: element.find("li.active").find(".container").outerHeight()
				});
			}    
        }).scroll();
    };

    function setPaneDimensions(){

		pane_width = $element.width();
        
        $panes.each(function(){
            
            $(this).css({
            	width: pane_width
            });
        });

        $container.width(pane_width*pane_count);
    };

    this.showPane = function( index ) {

    	index = Math.max(0, Math.min(index, pane_count-1));
        current_pane = index;

        var offset = -((100/pane_count)*current_pane);
        setContainerOffset(offset, true);

        $element.find(".active").removeClass("active");
        $element.find("> ul > li:eq("+ current_pane +")").addClass("active");

        // set active menu

        var _active = "active",
        	$nav;

        if( element.hasClass("slider-values") ) $nav = $("#slider-values-nav");
        else $nav = $("#slider-services-nav");
				
		$nav.find("button").removeClass(_active);
		$nav.find("button:eq("+ index +")").addClass(_active);

		// handle height

		if( element.hasClass("slider-services") ){

			element.find("ul").css({
				height: element.find("li:eq("+index+")").find(".container").outerHeight()
			});

			setTimeout(function(){
				$(window).scroll();
			}, 400);
		}
    };

    function setContainerOffset(percent, animate) {
        
        $container.removeClass(_animate);

        if(animate) $container.addClass(_animate);

        if(Modernizr.csstransforms3d) {
            $container.css("transform", "translate3d("+ percent +"%,0,0) scale3d(1,1,1)");
        }
        else if(Modernizr.csstransforms) {
            $container.css("transform", "translate("+ percent +"%,0)");
        }
        else {
            var px = ((pane_width*pane_count) / 100) * percent;
            $container.css("left", px+"px");
        }
    }

    this.next = function(){

		return this.showPane(current_pane+1, true);
	};

    this.prev = function(){

		return this.showPane(current_pane-1, true);
	};

	function handleHammer(ev) {

		pane_width = $element.width();
        
        // disable browser scrolling

        ev.gesture.preventDefault();

        switch(ev.type) {
            case 'dragright':
            case 'dragleft':

                // stick to the finger

                var pane_offset = -(100/pane_count)*current_pane,
                	drag_offset = ((100/pane_width)*ev.gesture.deltaX) / pane_count;

                // slow down at the first and last pane
                
                if((current_pane == 0 && ev.gesture.direction == Hammer.DIRECTION_RIGHT) ||
                    (current_pane == pane_count-1 && ev.gesture.direction == Hammer.DIRECTION_LEFT)) {
                    drag_offset *= .4;
                }

                setContainerOffset(drag_offset + pane_offset);
                break;

            case 'swipeleft':
                self.next();
                ev.gesture.stopDetect();
                break;

            case 'swiperight':
                self.prev();
                ev.gesture.stopDetect();
                break;

            case 'release':
                
                // more then 50% moved, navigate
                
                if(Math.abs(ev.gesture.deltaX) > pane_width/2) {
                    if(ev.gesture.direction == 'right') {
                        self.prev();
                    } else {
                        self.next();
                    }
                }
                else {
                    self.showPane(current_pane, true);
                }
                break;
        }
    }

    function handleKeyboard(){

		$("body").keydown(function(e){

			var $slider = $(".slider");

			$.each($slider, function(i,v){

				var wHeight = mv.helpers.wHeight(),
					wScroll = mv.helpers.wScroll(),
					
					slideOffset = $(v).offset().top,
					slideHeight = $(v).height();

				// check if slider is visible

				if( wScroll > slideOffset-wHeight && wScroll < slideOffset+slideHeight ){

					// emulate button click

					if (e.which == 37) self.prev();
					if (e.which == 39) self.next();
				}
			});
		});
	}

    function slideNavigation(){

    	var $bt = element.hasClass("slider-values") ? $("#slider-values-nav button") :
    												  $("#slider-services-nav button");

		$bt.on("click", function(){

			var $self = $(this),
				index = $self.index();

			self.showPane(index);
		});
	}

	$element.hammer({
		drag_lock_to_axis: true
	}).on("release dragleft dragright swipeleft swiperight", handleHammer);
}