first commit

assets/css/style.css

@@ -0,0 +1,151 @@
+/**
+* @section Reset styles
+* These styles reset the default style sheet that comes with the user agent.
+*/
+html {
+  overflow-y: scroll;
+  min-height: 100%
+}
+
+body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, fieldset, blockquote, pre, textarea {
+  margin: 0
+}
+
+ul, ol, td, th, fieldset, legend {
+  padding: 0
+}
+
+a {
+    text-decoration: none
+}
+
+img {
+    border: none
+}
+
+/**
+* Clearfix
+*/
+.cf:before, .cf:after {
+    content: " ";
+    display: table
+}
+
+.cf:after {
+    clear: both
+}
+
+/**
+* @section Main
+* Custom Styles/Fonts here
+*/
+body {
+  background: url('../img/noisy.png') repeat;
+  font: 62.5% arial, helvetica, sans-serif
+}
+
+/**
+* @section Gallery
+* Gallery Styles here
+*/
+.gallery {
+    margin: 100px auto;
+    width: 960px
+}
+
+.gallery .featured {
+    background-color: #000;
+    box-shadow: 0 0 40px #000;
+    height: 540px;
+    margin-bottom: 50px
+}
+
+.gallery .carousel-container {
+    position: relative;
+    height: 200px;
+    width: 960px
+}
+
+.gallery .shadow {
+    height: 200px;
+    position: absolute;
+    top: 0;
+    width: 60px;
+    z-index: 30
+}
+
+.gallery .shadow-left {
+    background: url('../img/shadow.png') no-repeat;
+    border-top-left-radius: 8px;
+    border-bottom-left-radius: 8px;
+    left: 0
+}
+
+.gallery .shadow-right {
+    background: url('../img/shadowr.png') no-repeat;
+    border-top-right-radius: 8px;
+    border-bottom-right-radius: 8px;
+    right: 0
+}
+
+.gallery .carousel-inner {
+    float: left;
+    margin-top: 20px;
+    overflow: hidden;
+    width: 960px;
+}
+
+.gallery .slider {
+    position: relative;
+    width: 9999px;
+}
+
+.gallery .slider li {
+    float: left;
+    height: 158px;
+    list-style: none;
+    margin-right: 60px;
+    width: 280px
+}
+
+.gallery .slider li.current a {
+  display: block;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+
+.gallery .slider li.current a:after {
+    box-shadow: 0 0 0 8px #006292 inset;
+    content: "";
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: 10;
+}
+
+.gallery .slider li img {
+    max-width: 100%
+}
+
+.gallery .controll {
+    cursor: pointer;
+    display: none;
+    height: 54px;
+    position: absolute;
+    top: 70px;
+    width: 54px;
+    z-index: 5
+}
+
+.gallery .controll.prev {
+  background: url('../img/prev-slider.png') no-repeat;
+  left: -84px
+}
+
+.gallery .controll.next {
+  background: url('../img/next-slider.png') no-repeat;
+  right: -84px
+}

assets/js/lib.js

@@ -0,0 +1,107 @@
+/*
+--------------------------------
+Vimeo Carousel Gallery
+--------------------------------
++ https://github.com/pinceladasdaweb/Vimeo-Carousel-Gallery
++ version 1.0
++ Copyright 2013 Pedro Rogerio
++ Licensed under the MIT license
+
++ Documentation: https://github.com/pinceladasdaweb/Vimeo-Carousel-Gallery
+*/
+
+var Vimeo = {
+    init: function(config) {
+        this.container = config.container;
+        this.fetch();
+    },
+    fetch: function() {
+        var self        = this,
+            carousel    = $('<div class="carousel-container cf"><span class="shadow shadow-left"></span><span class="prev controll"></span><div class="carousel-inner"><ul class="slider cf"></ul></div><span class="next controll"></span><span class="shadow shadow-right"></span></div>'),
+            featured    = $('<div class="featured"></div>'),
+            main        = self.getId(data.main),
+            videos      = data.videos,
+            videosUrl   = [];
+
+        if(main){
+            $(self.container).append(featured).append(carousel);
+            featured.html(function(){
+                var mainVideo = self.getId(data.main);
+                return '<iframe src="http://player.vimeo.com/video/'+mainVideo+'?autoplay=0" width="960" height="540" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>';
+            });
+        } else {
+            throw new Error('The url of the video page is wrong or not defined');
+        }
+
+        for (var i = 0, l = videos.length; i < l; i += 1) {
+            videosUrl.push(videos[i].url);
+        }
+
+        for (var i = 0, l = videosUrl.length; i < l; i += 1) {
+            var id = self.getId(videosUrl[i]);
+
+            $.getJSON('http://www.vimeo.com/api/v2/video/' + id + '.json?callback=?', {format: "json"}, function(data) {
+                var url     = data[0].url,
+                    thumb   = data[0].thumbnail_large,
+                    title   = data[0].title;
+
+                carousel.find('.slider').append('<li class="thumb"><a title="'+title+'" href="'+url+'"><img src="'+thumb+'" alt="'+title+'" title="'+title+'"></a></li>');
+            });
+        }
+
+        $(document.body).on('click', '.thumb', function(e){
+            e.preventDefault();
+            var href = $(this).find('a').attr('href');
+
+            featured.find('iframe').attr({'src' : 'http://player.vimeo.com/video/'+self.getId(href)+'?autoplay=1'});
+            carousel.find('li').removeClass('current');
+            $(this).addClass('current');
+        });
+
+        $(window).load(function(){
+            self.carousel();
+        })
+    },
+    getId: function(url){
+        var vid = url.match(/https?:\/\/(?:www\.)?vimeo.com\/(?:channels\/|groups\/([^\/]*)\/videos\/|album\/(\d+)\/video\/|)(\d+)(?:$|\/|\?)/);
+        if(vid){
+            return vid[3];
+        }
+    },
+    carousel: function(){
+        var slider      = $('.slider'),
+            controll    = $('.carousel-container .controll'),
+            photosLen   = slider.find('li').length;
+
+        if(photosLen > 3){
+            var itemWidth = $('.slider li').outerWidth(true);
+
+            controll.css({display: 'block'});
+
+            slider.css({
+                left: '-'+itemWidth+'px'
+            });
+
+            slider.find('li:first').before(slider.find('li:last'));
+
+            $(document.body).on('click', '.carousel-container .controll', function(){
+                var $this = $(this);
+
+                if($this.hasClass('next')){
+                    var leftIndent = parseInt(slider.css('left')) - itemWidth;
+
+                    $('.slider:not(:animated)').animate({'left' : leftIndent}, 500, function() {
+                        slider.find('li:last').after(slider.find('li:first'));
+                        slider.css({left : '-'+itemWidth+'px'});
+                    });
+                } else {
+                    var leftIndent = parseInt(slider.css('left')) + itemWidth;
+                    $('.slider:not(:animated)').animate({'left' : leftIndent}, 500, function() {
+                        slider.find('li:first').before(slider.find('li:last'));
+                        slider.css({left : '-'+itemWidth+'px'});
+                    });
+                }
+            });
+        }
+    }
+}

index.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Vimeo Carousel Gallery</title>
+        <link rel="stylesheet" href="assets/css/style.css">
+    </head>
+    <body>
+
+        <div class="gallery"></div>
+
+        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
+        <script src="assets/js/lib.js"></script>
+        <script>
+            var data = {
+                "main" : "http://vimeo.com/70161501",
+                "videos" : [
+                    { "url" : "https://vimeo.com/71495477" },
+                    { "url" : "https://vimeo.com/70775770" },
+                    { "url" : "https://vimeo.com/71238762" },
+                    { "url" : "https://vimeo.com/70388552" },
+                    { "url" : "https://vimeo.com/67890000" },
+                    { "url" : "https://vimeo.com/70777838" },
+                    { "url" : "https://vimeo.com/38931673" },
+                    { "url" : "https://vimeo.com/70286906" }
+                ]
+            }
+
+            Vimeo.init({
+                container: $('.gallery')
+            });
+        </script>
+    </body>
+</html>