Browse files

Link video thumbnail to YouTube

  • Loading branch information...
1 parent e37710a commit e1151e4fa62e16eabc9329cfae26906b2726a5f1 @kdeldycke committed Mar 24, 2013
View
5 README.md
@@ -45,6 +45,11 @@ Third-party assets
The theme uses external softwares, scripts, libraries and artworks:
+ jQuery MGlass v1.1
+ Copyright (c) 2012 Younès El Biache
+ Distributed under a MIT license
+ Source: https://github.com/younes0/jQuery-MGlass
+
Solarized Pygment style v0.1.0
Copyright (c) 2012 Shoji KUMAGAI
Distributed under a MIT license
View
86 content/templates/videos.html
@@ -16,205 +16,233 @@
{ 'name': "Omashay — <em>Tale of Two</em>"
, 'desc': "Painting timelapse."
, 'thumb': "/static/uploads/2013/03/tale-of-two-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=4HtfugU_mGg"
, 'roles': ["Music video"]
, 'tools': ["2013"]
- , 'links': ["http://www.youtube.com/watch?v=4HtfugU_mGg"]
},
{ 'name': "Omashay — <em>Goodnight</em>"
, 'desc': "When original hand-drawing meet artificial slow-motion."
, 'thumb': "/static/uploads/2013/02/goodnight-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=bAKmRTV7Lek"
, 'roles': ["Music video"]
, 'tools': ["2013"]
- , 'links': ["http://www.youtube.com/watch?v=bAKmRTV7Lek", "http://kevin.deldycke.com/2013/03/goodnight-video/"]
+ , 'links': ["http://kevin.deldycke.com/2013/03/goodnight-video/"]
},
{ 'name': "The making of <em>Where is she ?</em>"
, 'desc': ""
, 'thumb': "/static/uploads/2013/02/where-is-she-making-of.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=xtLz6jfSp-I"
, 'roles': ["Documentary"]
, 'tools': ["2012"]
- , 'links': ["http://www.youtube.com/watch?v=xtLz6jfSp-I"]
+ , 'links': []
},
{ 'name': "20m Scuba Diving Pool"
, 'desc': "First dive of my life at 20m."
, 'thumb': "/static/uploads/2010/01/20m-pool-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=LPpoNwjrg-4"
, 'roles': ["Documentary"]
, 'tools': ["2012"]
- , 'links': ["http://www.youtube.com/watch?v=LPpoNwjrg-4", "http://kevin.deldycke.com/2012/11/20m-scuba-diving-pool/"]
+ , 'links': ["http://kevin.deldycke.com/2012/11/20m-scuba-diving-pool/"]
},
{ 'name': "Mel+Tom Wedding Entrance"
, 'desc': ""
, 'thumb': "/static/uploads/2010/01/mel-tom-wedding-entrance-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=SejUVkC5JHs"
, 'roles': ["Narrative"]
, 'tools': ["2012"]
- , 'links': ["http://www.youtube.com/watch?v=SejUVkC5JHs", "http://kevin.deldycke.com/2012/11/wedding-entrance-paris-video-postcard/"]
+ , 'links': ["http://kevin.deldycke.com/2012/11/wedding-entrance-paris-video-postcard/"]
},
{ 'name': "Color grading of <em>Where is she ?</em>"
, 'desc': ""
, 'thumb': "/static/uploads/2010/01/where-is-she-color-grading-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=t6cCQV2Jt2U"
, 'roles': ["Documentary"]
, 'tools': ["2012"]
- , 'links': ["http://www.youtube.com/watch?v=t6cCQV2Jt2U"]
+ , 'links': []
},
{ 'name': "Omashay — <em>Where is she ?</em>"
, 'desc': "A postcard of Paris I shot in 2 days."
, 'thumb': "/static/uploads/2010/01/where-is-she-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=YjE_uIRVnv8"
, 'roles': ["Music video"]
, 'tools': ["2012"]
- , 'links': ["http://www.youtube.com/watch?v=YjE_uIRVnv8", "http://kevin.deldycke.com/2012/08/where-is-she-music-video-released/"]
+ , 'links': ["http://kevin.deldycke.com/2012/08/where-is-she-music-video-released/"]
},
{ 'name': "Making of <em>Burlesque Burgrary</em>"
, 'desc': ""
, 'thumb': "/static/uploads/2010/01/burlesque-burglary-making-of-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=yNCtfnQp1uw"
, 'roles': ["Documentary"]
, 'tools': ["2012"]
- , 'links': ["http://www.youtube.com/watch?v=yNCtfnQp1uw", "http://kevin.deldycke.com/2012/07/scenes-burlesque-burglary-music-video/"]
+ , 'links': ["http://kevin.deldycke.com/2012/07/scenes-burlesque-burglary-music-video/"]
},
{ 'name': "<em>Burlesque Burglary</em> (multicam)"
, 'desc': "Simulated multi-camera version of the official video."
, 'thumb': "/static/uploads/2010/01/burlesque-burglary-multicam-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=sVBPoOqxxJQ"
, 'roles': ["Music video"]
, 'tools': ["2012"]
- , 'links': ["http://www.youtube.com/watch?v=sVBPoOqxxJQ", "http://kevin.deldycke.com/2012/01/burlesque-burglary-music-video-released/"]
+ , 'links': ["http://kevin.deldycke.com/2012/01/burlesque-burglary-music-video-released/"]
},
{ 'name': "Cool Cavemen at MJC de Douai"
, 'desc': "A night in the backstages with Cool Cavemen."
, 'thumb': "/static/uploads/2010/01/cool-cavemen-mjc-2011-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=RpFqhcihQbw"
, 'roles': ["Documentary"]
, 'tools': ["2012"]
- , 'links': ["http://www.youtube.com/watch?v=RpFqhcihQbw", "http://kevin.deldycke.com/2012/03/video-summary-latest-cool-cavemens-concert/"]
+ , 'links': ["http://kevin.deldycke.com/2012/03/video-summary-latest-cool-cavemens-concert/"]
},
{ 'name': "4m²"
, 'desc': "Why all the narratives I work on have to end in tears ?"
, 'thumb': "/static/uploads/2012/03/002.png"
+ , 'thumb_link': "http://www.youtube.com/watch?v=91y6L3QKiRk"
, 'roles': ["Narrative"]
, 'tools': ["2012"]
- , 'links': ["http://www.youtube.com/watch?v=91y6L3QKiRk", "http://kevin.deldycke.com/2012/03/first-short-film-4m2-released/"]
+ , 'links': ["http://kevin.deldycke.com/2012/03/first-short-film-4m2-released/"]
},
{ 'name': "Tomasito's Sax Solo in the Park"
, 'desc': "Those cavemen can't go outside without being noticed."
, 'thumb': "/static/uploads/2010/01/park-sax-solo-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=IaL7kTyAogE"
, 'roles': ["Live music"]
, 'tools': ["2012"]
- , 'links': ["http://www.youtube.com/watch?v=IaL7kTyAogE"]
+ , 'links': []
},
{ 'name': "Cute Newborn Kids (Baby Goats)"
, 'desc': "My only attempt at a cutexploitation film."
, 'thumb': "/static/uploads/2010/01/newborn-kids-baby-goats-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=el6VMY8KZHo"
, 'roles': ["Documentary"]
, 'tools': ["2012"]
- , 'links': ["http://www.youtube.com/watch?v=el6VMY8KZHo", "http://kevin.deldycke.com/2012/02/stabilizing-cute-baby-goats/"]
+ , 'links': ["http://kevin.deldycke.com/2012/02/stabilizing-cute-baby-goats/"]
},
{ 'name': "Cool Cavemen — <em>Burlesque Burglary</em>"
, 'desc': "My first one-man project: entirely directed, shot and edited by yours truly."
, 'thumb': "/static/uploads/2012/01/burlesque-burglary-0007.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=JYQ0YehsLyU"
, 'roles': ["Music video"]
, 'tools': ["2012"]
- , 'links': ["http://www.youtube.com/watch?v=JYQ0YehsLyU", "http://kevin.deldycke.com/2012/06/burlesque-burglary-music-video-production-notes/"]
+ , 'links': ["http://kevin.deldycke.com/2012/06/burlesque-burglary-music-video-production-notes/"]
},
{ 'name': "Cool Cavemen — <em>Radio Concert Intro</em>"
, 'desc': ""
, 'thumb': "/static/uploads/2010/01/cool-cavemen-radio-concert-intro-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=wJeyu-xEL_0"
, 'roles': ["Remix"]
, 'tools': ["2011"]
- , 'links': ["http://www.youtube.com/watch?v=wJeyu-xEL_0", "http://kevin.deldycke.com/2012/01/reusing-vintage-footage-cool-cavemens-concert-intro/"]
+ , 'links': ["http://kevin.deldycke.com/2012/01/reusing-vintage-footage-cool-cavemens-concert-intro/"]
},
{ 'name': "Cool Cavemen — <em>Belgique mon Namurrr</em>"
, 'desc': "I am the Judge Dredd of concerts. I am the light !"
, 'thumb': "/static/uploads/2010/01/belgique-mon-namurrr-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=PnX-wK2lVCQ"
, 'roles': ["Concert"]
, 'tools': ["2011"]
- , 'links': ["http://www.youtube.com/watch?v=PnX-wK2lVCQ", "http://kevin.deldycke.com/2012/03/video-summary-latest-cool-cavemens-concert/"]
+ , 'links': ["http://kevin.deldycke.com/2012/03/video-summary-latest-cool-cavemens-concert/"]
},
{ 'name': "Cool Cavemen — <em>Nichrome</em>'s outtakes"
, 'desc': ""
, 'thumb': "/static/uploads/2010/01/nichrome-outtakes.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=dXoXtC55alc"
, 'roles': ["Documentary"]
, 'tools': ["2011"]
- , 'links': ["http://www.youtube.com/watch?v=dXoXtC55alc", "http://kevin.deldycke.com/2011/12/nichrome-preview-behind-the-scene-video/"]
+ , 'links': ["http://kevin.deldycke.com/2011/12/nichrome-preview-behind-the-scene-video/"]
},
{ 'name': "Cool Cavemen — <em>Nichrome</em> (preview)"
, 'desc': "The only evidence that Cool Cavemen still has unreleased songs."
, 'thumb': "/static/uploads/2010/01/nichrome-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=P1B-DUgKS9M"
, 'roles': ["Music video"]
, 'tools': ["2011"]
- , 'links': ["http://www.youtube.com/watch?v=P1B-DUgKS9M", "http://kevin.deldycke.com/2011/12/nichrome-preview-behind-the-scene-video/"]
+ , 'links': ["http://kevin.deldycke.com/2011/12/nichrome-preview-behind-the-scene-video/"]
},
{ 'name': "Cool Cavemen — <em>Drunk Dream</em> (acoustic)"
, 'desc': "Can you believe they managed to shoot that video upside-down ?"
, 'thumb': "/static/uploads/2010/01/drunk-dream-acoustic-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=FQnwFnM-8lA"
, 'roles': ["Live music"]
, 'tools': ["2011"]
- , 'links': ["http://www.youtube.com/watch?v=FQnwFnM-8lA"]
+ , 'links': []
},
{ 'name': "Omashay — <em>Wish you looked at me</em>"
, 'desc': ""
+ , 'thumb_link': "http://www.youtube.com/watch?v=iHi0lwhTqqc"
, 'thumb': "/static/uploads/2010/01/omashay-wish-you-looked-at-me-preview.png"
, 'roles': ["Music video"]
, 'tools': ["2011"]
- , 'links': ["http://www.youtube.com/watch?v=iHi0lwhTqqc", "http://kevin.deldycke.com/2011/07/making-of-omashay-wish-you-looked-at-me-music-video/"]
+ , 'links': ["http://kevin.deldycke.com/2011/07/making-of-omashay-wish-you-looked-at-me-music-video/"]
},
{ 'name': "Trapped in Freedom at Garage Café"
, 'desc': ""
+ , 'thumb_link': "http://www.youtube.com/watch?v=HlSmuJVQT8A&list=PL41DAE605B668609A"
, 'thumb': "/static/uploads/2010/01/trapped-in-freedom-preview.jpg"
, 'roles': ["Concert"]
, 'tools': ["2011"]
- , 'links': ["http://www.youtube.com/watch?v=HlSmuJVQT8A&list=PL41DAE605B668609A", "http://kevin.deldycke.com/2011/02/trapped-freedom-live-garage-cafe/"]
+ , 'links': ["http://kevin.deldycke.com/2011/02/trapped-freedom-live-garage-cafe/"]
},
{ 'name': "MIDI-controlled graphics"
, 'desc': "Quartz Composer, a MacBook and a Behringer BCF-2000."
, 'thumb': "/static/uploads/2010/01/midi-controller-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=I8JN40Vq_do&list=PL81EA3460858682F3"
, 'roles': ["Motion graphics"]
, 'tools': ["2010"]
- , 'links': ["http://www.youtube.com/watch?v=I8JN40Vq_do&list=PL81EA3460858682F3", "http://kevin.deldycke.com/tag/midi-controlled-graphics/"]
+ , 'links': ["http://kevin.deldycke.com/tag/midi-controlled-graphics/"]
},
{ 'name': "Quartz Composer experiments"
, 'desc': ""
, 'thumb': "/static/uploads/2010/01/squared-lave-lamp-preview.png"
+ , 'thumb_link': "http://www.youtube.com/watch?v=b8BuwhgaG-8&list=PLAD4B8BDC252A15E1"
, 'roles': ["Motion graphics"]
, 'tools': ["2010"]
- , 'links': ["http://www.youtube.com/watch?v=b8BuwhgaG-8&list=PLAD4B8BDC252A15E1", "http://kevin.deldycke.com/tag/qc_experiment/"]
+ , 'links': ["http://kevin.deldycke.com/tag/qc_experiment/"]
},
{ 'name': "Kaleidoscope series"
, 'desc': "My first steps into Quartz Composer."
, 'thumb': "/static/uploads/2010/01/kaleidoscope-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=a7YNLp7xy8k&list=PLF26819BF36910C57"
, 'roles': ["Motion graphics"]
, 'tools': ["2010"]
- , 'links': ["http://www.youtube.com/watch?v=a7YNLp7xy8k&list=PLF26819BF36910C57", "http://kevin.deldycke.com/tag/kaleidoscope/"]
+ , 'links': ["http://kevin.deldycke.com/tag/kaleidoscope/"]
},
{ 'name': "<em>Info TGV</em> — Android app by Uperto"
, 'desc': ""
, 'thumb': "/static/uploads/2010/01/info-tgv-android-app-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=puDy-twV-Y4"
, 'roles': ["Corporate"]
, 'tools': ["2010"]
- , 'links': ["http://www.youtube.com/watch?v=puDy-twV-Y4", "http://kevin.deldycke.com/2010/09/making-info-tgv-android-app-video/"]
+ , 'links': ["http://kevin.deldycke.com/2010/09/making-info-tgv-android-app-video/"]
},
{ 'name': "Le Duc Factory at HappyFarmFest"
, 'desc': ""
, 'thumb': "/static/uploads/2010/01/happy-farm-leduc.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=mrHZ4Wh9sCY"
, 'roles': ["Concert"]
, 'tools': ["2010"]
- , 'links': ["http://www.youtube.com/watch?v=mrHZ4Wh9sCY", "http://kevin.deldycke.com/2010/06/le-duc-live-happy-farm-fest-2010/"]
+ , 'links': ["http://kevin.deldycke.com/2010/06/le-duc-live-happy-farm-fest-2010/"]
},
{ 'name': "Cool Cavemen at Gayant Expo"
, 'desc': "A crowd of 3000 persons. My biggest concert as a lighting designer. I'll be forever grateful to my band for this amazing oportunity."
, 'thumb': "/static/uploads/2010/01/gayant-expo-live-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=qE-bis-wYxs&list=PL4BAA557B7144031F&feature=plcp"
, 'roles': ["Concert"]
, 'tools': ["2010"]
- , 'links': ["http://www.youtube.com/watch?v=qE-bis-wYxs&list=PL4BAA557B7144031F&feature=plcp", "http://kevin.deldycke.com/2010/01/cool-cavemen-live-gayant-expo-first-video-released/", "http://kevin.deldycke.com/2010/02/cool-cavemen-live-gayant-expo-part-ii/", "http://kevin.deldycke.com/2012/11/cool-cavemen-gayant-expo-production-notes/"]
+ , 'links': ["http://kevin.deldycke.com/2010/01/cool-cavemen-live-gayant-expo-first-video-released/", "http://kevin.deldycke.com/2010/02/cool-cavemen-live-gayant-expo-part-ii/", "http://kevin.deldycke.com/2012/11/cool-cavemen-gayant-expo-production-notes/"]
},
{ 'name': "Cool Cavemen — <em>Fusion</em>"
, 'desc': ""
, 'thumb': "/static/uploads/2010/01/fusion-live-at-sin-le-noble-video-preview.png"
+ , 'thumb_link': "http://www.youtube.com/watch?v=ADv4kUZC_-c"
, 'roles': ["Concert"]
, 'tools': ["2008"]
- , 'links': ["http://www.youtube.com/watch?v=ADv4kUZC_-c"]
+ , 'links': []
},
{ 'name': "Cool Cavemen — <em>Kinda Country</em>"
, 'desc': "This was shot on DSLR. Nothing exceptional. But there is a twist: we were in 2007. I was definitely ahead of the curve."
, 'thumb': "/static/uploads/2010/01/kinda-country-preview.jpg"
+ , 'thumb_link': "http://www.youtube.com/watch?v=eelHRVgGxZg"
, 'roles': ["Live music"]
, 'tools': ["2007"]
- , 'links': ["http://www.youtube.com/watch?v=eelHRVgGxZg"]
+ , 'links': []
},
]
%}
View
16 theme/static/css/jquery.mglass.css
@@ -0,0 +1,16 @@
+.mglass{
+ background-color : #000;
+ background-image : url(/theme/img/magnifier.png);
+ background-position: center;
+ background-repeat : no-repeat;
+ cursor : pointer;
+ opacity : 0;
+ filter : alpha(opacity=0);
+ position : absolute;
+ z-index : 10;
+}
+
+.mglass:hover{
+ opacity: 0.4;
+ filter : alpha(opacity=0.4);
+}
View
BIN theme/static/img/magnifier.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
7 theme/static/js/application.js
@@ -25,7 +25,7 @@
// Add bootstrap table style to table elements
$("#content table").addClass('table').addClass('table-hover');
- // Let's make videos take the full width
+ // Allow videos to take the full width of a page
// TODO; fix aspect ratio
$(".container").fitVids();
@@ -40,5 +40,10 @@
});
});
+ // Display an icon overlay for images enclosed in a link in the main content column
+ $(function(){
+ $("#content a img").mglass();
+ });
+
})
}(window.jQuery);
View
107 theme/static/js/jquery.mglass.js
@@ -0,0 +1,107 @@
+/**
+ * jQuery MGlass, Displays a magnifying glass on image hover
+ * http://github.com/younes0/jQuery-MGlass
+ *
+ * Version 1.1
+ *
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ *
+ */
+(function($) {
+
+ // Start
+ $.mglass = function(element, options) {
+
+ // Defaults
+ var defaults = {
+ opacity: 0.4,
+ speed: 150,
+ wrapper: true
+ };
+
+ var plugin = this, $element = $(element);
+
+ plugin.settings = {};
+
+
+ // Constructor
+ plugin.init = function() {
+
+ plugin.settings = $.extend({}, defaults, options);
+
+ if (plugin.settings.wrapper) {
+ $element.wrap('<div class="mglassWrapper" />');
+ }
+
+ var
+ h = $element.height(),
+ w = $element.width()
+ ;
+
+ var overlayStyle = 'width: '+w+'px; height: '+h+'px;';
+
+ // CSS3 transition Support ?
+ if (typeof $.css3Transitions === 'undefined') {
+ $.css3Transitions = plugin.supportsTransitions();
+ }
+ if ($.css3Transitions) {
+ overlayStyle+= $.fn.mglass.transitionProperty+': opacity '+(plugin.settings.speed/1000)+'s ease;';
+ }
+
+ // Mglass Div
+ $overlay = $('<div class="mglass" style="'+overlayStyle+'"></div>');
+ $overlay.insertBefore($(element));
+
+ // No CSS3 transition support : javascript fallback
+ if (!$.css3Transitions) {
+ $overlay.hover(
+ function () {
+ $(this).stop().animate({"opacity": plugin.settings.opacity}, plugin.settings.speed);
+ },
+ function () {
+ $(this).stop().animate({"opacity": 0}, 100);
+ }
+ );
+ }
+
+
+ },
+
+ plugin.supportsTransitions = function() {
+
+ var el = document.createElement('div');
+ var vendors = ['', 'Ms', 'Moz', 'Webkit', 'O'];
+
+ for (var i = 0, len = vendors.length; i < len; i++) {
+ var prop = vendors[i] + 'Transition';
+ if (prop in el.style) {
+ $.fn.mglass.transitionProperty = '-'+vendors[i].toLowerCase()+'-transition';
+ return true;
+ }
+ }
+
+ return false;
+
+ };
+
+
+ // Init
+ plugin.init();
+
+ };
+
+ // Add the plugin to the jQuery.fn object
+ $.fn.mglass = function(options) {
+ return this.each(function() {
+ if ($(this).data('mglass') === undefined) {
+ var plugin = new $.mglass(this, options);
+ $(this).data('mglass', plugin);
+ }
+ });
+ };
+
+// End
+})(jQuery);
View
2 theme/templates/base.html
@@ -20,6 +20,7 @@
<!--[if IE 7]>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome-ie7.min.css">
<![endif]-->
+ <link rel="stylesheet" href="{{ SITEURL }}/theme/css/jquery.mglass.css"/>
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/pygment-solarized-dark.css"/>
<link rel="stylesheet" href="{{ SITEURL }}/theme/css/style.css"/>
@@ -209,6 +210,7 @@ <h5 class="pull-right"><a href="#" class="icon-arrow-up"> Back to top</a></h5>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fitvids/1.0.1/jquery.fitvids.min.js"></script>
+ <script src="{{ SITEURL }}/theme/js/jquery.mglass.js"></script>
<script src="{{ SITEURL }}/theme/js/application.js"></script>
{% block extra_js %}{% endblock %}

0 comments on commit e1151e4

Please sign in to comment.