jQuery c9carousel

by AntonLapshin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.0/jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.0/jquery.mCustomScrollbar.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:400,700">

<div id="modal">
    <div id="container">
    </div>
</div>

CSS

body {
    font-family: Open Sans;
}

#modal {
    background: url(http://i.snag.gy/HYxfV.jpg) no-repeat;
    margin: 10px;
    height: 583px;
    width: 533px;
    position: absolute;
    padding: 110px 100px 0 20px;
}

div.c9_ground {
    position: absolute;
    background-color: black;
    opacity: 0.5;
    width: 575px;
    height: 100%;
    left: 0;
    top: 0;
    display: none;
}

div.c9_preview {
    position: absolute;
    display: none;
    text-align: center;
    background-color: #4377B5;
    border: 1px solid #33547B;
    left: 80px;
    margin-top: 10px;
    width: 400px;

    &:before {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 15px 15px 15px;
        border-color: transparent transparent #33547B transparent;
        content:'';
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -15px;
        margin-top: -15px;
    }

    &:after {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 14px 14px 14px;
        border-color: transparent transparent #4377B5 transparent;
        content:'';
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -14px;
        margin-top: -14px;
    }

    h2 {
        font-size: 2em;
        color: white;
    }
    
    img {
        width: 400px;
    }
}

ul.c9_carousel {
    overflow-y: auto;
    overflow-x:  auto;
    height: 85px;
    white-space:nowrap;

    li {
        overflow: hidden;
        display: inline-block;
        margin-right: 2px;
        cursor: pointer;
        height: 63px;
        vertical-align: top;
        border: 2px solid white;
        padding: 2px;

        &:hover {
            border-color: #F1931E;
        }

        &.selected {
            border-color: #F1931E;
        } 

        div {
            overflow: hidden;
            width: 100%;
            height: 100%;
            
            .c9_thumb {
                width: 78px;
        ...

JavaScript

$('head style[type="text/css"]').attr('type','text/less');
less.env = 'development';
less.refreshStyles();

//
// jQuery plugin. C9 Carousel
//
;(function(){

	var containerTemplate = '<ul class="c9_carousel">{0}</ul>';
	var itemTemplate = '<li data-id="{0}" data-name="{1}"><div><img class="c9_thumb" src="{2}" /></div></li>';
    var previewTemplate = '<div class="c9_preview"><h2></h2><img /></div>';
    var groundTemplate = '<div class="c9_ground"></div>';
    
    String.prototype.f = function() {
        var s = this, i = arguments.length;
        while (i--) { s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]); }
        return s;
    };

    Function.prototype.debounce = function (milliseconds) {
        var baseFunction = this,
            timer = null,
            wait = milliseconds;

        return function () {
            var self = this,
                args = arguments;

            function complete() {
                baseFunction.apply(self, args);
                timer = null;
            }

            if (timer) {
                clearTimeout(timer);
            }

            timer = setTimeout(complete, wait);
        };
    };

	var fade = function($items, way){
    	if (way === 'in'){
            $items.fadeIn(300);
        }
        else {
            $items.fadeOut(300);        
        }
    }.debounce(100);

	$.fn.c9carousel = function(options){
    	var $container = $(this);
        
        if (!options)
        	return {
            	val: function(value){
                	if (!value){
                    	var $li = $container.find('li.selected');
                        return $li.data('id');
                    }
                    
                    $container.find('li.selected').removeClass('selected');
                    var $li = $container.find('li[data-id="{0}"]'.f(value)).addClass('selected');
                    $container.find('ul.c9_carousel').mCustomScrollbar("scrollTo", $li);
                }
         ...