optimized design. background image changes

6_video.html

@@ -91,9 +91,164 @@ permalink: /video/
        });
 
        $this.on('mouseover', function() {
-         var offset = $this.offset();
-         var center = jQuery(window).width()/2;
-         if( offset.left >= center) {
+         var offset = $this.offset().left;
+         var center = (jQuery(window).width()/2) - 50;
+         if( offset >= center) {
+           jQuery('#videotext').css('right', '');
+           jQuery('#videotext').css('left', '20px');
+           jQuery('#videotext').css('top', '80px');
+         } else {
+           jQuery('#videotext').css('left', '');
+           jQuery('#videotext').css('right', '20px');
+           jQuery('#videotext').css('top', '80px');
+         }
+
+         jQuery('#videotext').html($this.html());
+         timer = window.setTimeout(function() {
+           jQuery('#videotext').show(300);
+         }, 500);
+       });
+
+       $this.on('mouseout', function() {
+         jQuery('#videotext').hide();
+         $this.find(".playbutton").hide();
+         if (timer) {
+           window.clearTimeout(timer);
+         }
+       });
+
+       $this.on('click', function() {
+         jQuery('#videotext').hide();
+         $this.find("img").hide();
+         if (timer) {
+           window.clearTimeout(timer);
+         }
+         jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
+           var player = jQuery('#videoplayer #player');
+           player.html(data.html)
+           player.find( "iframe" ).attr('width', "100%").attr('height', "100%");
+           var src = player.find( "iframe" ).attr('src');
+           player.find( "iframe" ).attr('src', src + "?title=0&byline=0&portrait=0&autoplay=1");
+         });
+         jQuery('#videoplayer').fadeIn(300, function() {
+           $.vegas({ src: '/assets/bgphotos/' + Math.floor(Math.random() * 12) + '.png' });
+         });
+       });
+
+       jQuery('#close-button').on('click', function() {
+         jQuery('#videoplayer').fadeOut(500, function() {
+           jQuery('#videoplayer #player').html('');
+         });
+       });
+
+     });
+     $('#video-roster').isotope({
+       // options
+       itemSelector: '.videobox'
+     });
+     // init Isotope
+      var $grid = $('#video-roster').isotope({
+      });
+      // filter items on button click
+      $('.filter-button-group').on( 'click', 'button', function() {
+        var filterValue = $(this).attr('data-filter');
+        $grid.isotope({ filter: filterValue });
+        $('.filter-button-group').find('button').css('background-color', 'black');
+        $(this).css('background-color', '#5a4b68');
+      });
+   });
+ </script>ble: false
+permalink: /video_fullscreen/
+---
+
+{% assign allTopics = "" | split:"|"  %}
+{% for post in site.posts %}
+  {% for talk in post.talks %}
+    {% if talk.talk_video_url %}
+      {% for topic in talk.topics %}
+        {% assign talkTopics = topic | split:","  %}
+        {% for talkTopic in talkTopics %}
+        {% assign tt = talkTopic | strip | downcase %}
+          {% unless allTopics contains tt %}
+            {% assign allTopics = allTopics | push: tt %}
+          {% endunless %}
+        {% endfor %}
+      {% endfor %}
+    {% endif %}
+  {% endfor %}
+{% endfor %}
+
+{% assign allTopicsABC = allTopics | sort %}
+
+<div class="content no-header">
+
+  <div class="row">
+
+    <div class="dark_bg col-md-10 col-md-offset-1">
+
+      <div class="button-group filter-button-group">
+        <button data-filter="*">show all</button>
+        {% for thisTopic in allTopicsABC %}
+          <button data-filter=".{{thisTopic | strip | replace: " ", "-"}}">{{thisTopic | capitalize }}</button>
+        {% endfor %}
+      </div>
+
+    </div>
+  </div>
+
+  <div class="spacer"></div>
+
+  <div class="row">
+    <div class="dark_bg col-md-10 col-md-offset-1">
+
+      <div id="video-roster" class="container-fluid">
+
+       {% for post in site.posts %}
+         {% for talk in post.talks %}
+           {% if talk.talk_video_url %}
+             {% assign vimeo_id = talk.talk_video_url %}
+             {% if talk.topics %}
+               {% assign tags = (talk.topics | split:",") %}
+             {% endif %}
+           <div class="videobox {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}} col-sm-3" vimeo="{{vimeo_id}}">
+             <div class="video-title">{{talk.artist}}</div>
+             <div class="playbutton"></div>
+             <div class="video-description"><h3>{{talk.title}}</h3><p><span class="video-session">#{{ post.number }}</span>: <span class="video-artist">{{talk.artist}}</span> / {{talk.artist_website}} – {{talk.description}}</p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+           </div>
+           {% endif %}
+         {% endfor %}
+       {% endfor %}
+
+        <div id="videotext"></div>
+
+        <div id="videoplayer">
+          <div id="player"></div>
+          <div id="close-button"></div>
+        </div>
+
+    </div>
+
+  </div>
+
+</div> <!-- container -->
+
+<script>
+
+   jQuery( document ).ready(function() {
+
+     jQuery('.videobox').each(function() {
+
+       var $this = jQuery(this);
+       jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
+         $this.css('background', 'url("' + data.thumbnail_url + '")');
+         $this.css('background-size', 'cover');
+         $this.css('background-position', 'center center');
+       });
+
+       $this.on('mouseover', function() {
+         var offset = $this.offset().left;
+         var center = (jQuery(window).width()/2) - 50;
+         if( offset >= center) {
            jQuery('#videotext').css('right', '');
            jQuery('#videotext').css('left', '20px');
            jQuery('#videotext').css('top', '80px');
@@ -131,11 +286,13 @@ permalink: /video/
            var src = player.find( "iframe" ).attr('src');
            player.find( "iframe" ).attr('src', src + "?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1");
          });
-         jQuery('#videoplayer').fadeIn(300);
+         jQuery('#videoplayer').fadeIn(300, function() {
+           $.vegas({ src: '/assets/bgphotos/' + Math.floor(Math.random() * 12) + '.png' });
+         });
        });
 
-       jQuery('#videoplayer').on('click', function() {
-         jQuery(this).fadeOut(500, function() {
+       jQuery('#close-button').on('click', function() {
+         jQuery('#videoplayer').fadeOut(500, function() {
            jQuery('#videoplayer #player').html('');
          });
        });

7_video_no_header_or_footer.html

@@ -2,6 +2,8 @@
 layout: no_header_or_footer
 title: Video showcase
 icon: video
+visititle: Video showcase
+icon: video
 visible: false
 permalink: /video_fullscreen/
 ---
@@ -91,9 +93,164 @@ permalink: /video_fullscreen/
        });
 
        $this.on('mouseover', function() {
-         var offset = $this.offset();
-         var center = jQuery(window).width()/2;
-         if( offset.left >= center) {
+         var offset = $this.offset().left;
+         var center = (jQuery(window).width()/2) - 50;
+         if( offset >= center) {
+           jQuery('#videotext').css('right', '');
+           jQuery('#videotext').css('left', '20px');
+           jQuery('#videotext').css('top', '80px');
+         } else {
+           jQuery('#videotext').css('left', '');
+           jQuery('#videotext').css('right', '20px');
+           jQuery('#videotext').css('top', '80px');
+         }
+
+         jQuery('#videotext').html($this.html());
+         timer = window.setTimeout(function() {
+           jQuery('#videotext').show(300);
+         }, 500);
+       });
+
+       $this.on('mouseout', function() {
+         jQuery('#videotext').hide();
+         $this.find(".playbutton").hide();
+         if (timer) {
+           window.clearTimeout(timer);
+         }
+       });
+
+       $this.on('click', function() {
+         jQuery('#videotext').hide();
+         $this.find("img").hide();
+         if (timer) {
+           window.clearTimeout(timer);
+         }
+         jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
+           var player = jQuery('#videoplayer #player');
+           player.html(data.html)
+           player.find( "iframe" ).attr('width', "100%").attr('height', "100%");
+           var src = player.find( "iframe" ).attr('src');
+           player.find( "iframe" ).attr('src', src + "?title=0&byline=0&portrait=0&autoplay=1");
+         });
+         jQuery('#videoplayer').fadeIn(300, function() {
+           $.vegas({ src: '/assets/bgphotos/' + Math.floor(Math.random() * 12) + '.png' });
+         });
+       });
+
+       jQuery('#close-button').on('click', function() {
+         jQuery('#videoplayer').fadeOut(500, function() {
+           jQuery('#videoplayer #player').html('');
+         });
+       });
+
+     });
+     $('#video-roster').isotope({
+       // options
+       itemSelector: '.videobox'
+     });
+     // init Isotope
+      var $grid = $('#video-roster').isotope({
+      });
+      // filter items on button click
+      $('.filter-button-group').on( 'click', 'button', function() {
+        var filterValue = $(this).attr('data-filter');
+        $grid.isotope({ filter: filterValue });
+        $('.filter-button-group').find('button').css('background-color', 'black');
+        $(this).css('background-color', '#5a4b68');
+      });
+   });
+ </script>ble: false
+permalink: /video_fullscreen/
+---
+
+{% assign allTopics = "" | split:"|"  %}
+{% for post in site.posts %}
+  {% for talk in post.talks %}
+    {% if talk.talk_video_url %}
+      {% for topic in talk.topics %}
+        {% assign talkTopics = topic | split:","  %}
+        {% for talkTopic in talkTopics %}
+        {% assign tt = talkTopic | strip | downcase %}
+          {% unless allTopics contains tt %}
+            {% assign allTopics = allTopics | push: tt %}
+          {% endunless %}
+        {% endfor %}
+      {% endfor %}
+    {% endif %}
+  {% endfor %}
+{% endfor %}
+
+{% assign allTopicsABC = allTopics | sort %}
+
+<div class="content no-header">
+
+  <div class="row">
+
+    <div class="dark_bg col-md-10 col-md-offset-1">
+
+      <div class="button-group filter-button-group">
+        <button data-filter="*">show all</button>
+        {% for thisTopic in allTopicsABC %}
+          <button data-filter=".{{thisTopic | strip | replace: " ", "-"}}">{{thisTopic | capitalize }}</button>
+        {% endfor %}
+      </div>
+
+    </div>
+  </div>
+
+  <div class="spacer"></div>
+
+  <div class="row">
+    <div class="dark_bg col-md-10 col-md-offset-1">
+
+      <div id="video-roster" class="container-fluid">
+
+       {% for post in site.posts %}
+         {% for talk in post.talks %}
+           {% if talk.talk_video_url %}
+             {% assign vimeo_id = talk.talk_video_url %}
+             {% if talk.topics %}
+               {% assign tags = (talk.topics | split:",") %}
+             {% endif %}
+           <div class="videobox {% for tag in tags | uniq %}{{tag | strip | replace: " ", "-" | downcase}} {% endfor %}{{post.location | strip | replace: " ", "-" | downcase}} col-sm-3" vimeo="{{vimeo_id}}">
+             <div class="video-title">{{talk.artist}}</div>
+             <div class="playbutton"></div>
+             <div class="video-description"><h3>{{talk.title}}</h3><p><span class="video-session">#{{ post.number }}</span>: <span class="video-artist">{{talk.artist}}</span> / {{talk.artist_website}} – {{talk.description}}</p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div>
+           </div>
+           {% endif %}
+         {% endfor %}
+       {% endfor %}
+
+        <div id="videotext"></div>
+
+        <div id="videoplayer">
+          <div id="player"></div>
+          <div id="close-button"></div>
+        </div>
+
+    </div>
+
+  </div>
+
+</div> <!-- container -->
+
+<script>
+
+   jQuery( document ).ready(function() {
+
+     jQuery('.videobox').each(function() {
+
+       var $this = jQuery(this);
+       jQuery.getJSON('https://vimeo.com/api/oembed.json?url=' + encodeURIComponent(jQuery(this).attr('vimeo')), {format: "json"}, function(data) {
+         $this.css('background', 'url("' + data.thumbnail_url + '")');
+         $this.css('background-size', 'cover');
+         $this.css('background-position', 'center center');
+       });
+
+       $this.on('mouseover', function() {
+         var offset = $this.offset().left;
+         var center = (jQuery(window).width()/2) - 50;
+         if( offset >= center) {
            jQuery('#videotext').css('right', '');
            jQuery('#videotext').css('left', '20px');
            jQuery('#videotext').css('top', '80px');
@@ -131,11 +288,13 @@ permalink: /video_fullscreen/
            var src = player.find( "iframe" ).attr('src');
            player.find( "iframe" ).attr('src', src + "?title=0&amp;byline=0&amp;portrait=0&amp;autoplay=1");
          });
-         jQuery('#videoplayer').fadeIn(300);
+         jQuery('#videoplayer').fadeIn(300, function() {
+           $.vegas({ src: '/assets/bgphotos/' + Math.floor(Math.random() * 12) + '.png' });
+         });
        });
 
-       jQuery('#videoplayer').on('click', function() {
-         jQuery(this).fadeOut(500, function() {
+       jQuery('#close-button').on('click', function() {
+         jQuery('#videoplayer').fadeOut(500, function() {
            jQuery('#videoplayer #player').html('');
          });
        });

_site/css/video.css

@@ -16,11 +16,12 @@
   right: 0;
   left: 0;
   margin-bottom:20px;
+  border: 4px solid transparent;
 }
 
 .videobox:hover
 {
-  /*opacity:1;*/
+  border: 4px solid #5a4b68;
 }
 
 .videobox .video-title
@@ -37,15 +38,15 @@
 
 #videotext
 {
-  width:40%;
+  width:45%;
   background-color:#000;
-  opacity:.8;
+  opacity:.9;
   position:fixed;
   z-index:10000;
-  right:50px;
-  bottom: 50px;
+  right:20px;
+  bottom: 20px;
   display:none;
-  padding:30px;
+  padding:20px;
   color:#fff;
 }
 
@@ -63,7 +64,6 @@
 
 #videotext .video-description
 {
-  display:block;
   font-size: 1em;
 }
 
@@ -117,7 +117,7 @@
   display:block;
   width:50px;
   height:50px;
-  top:90px;
+  top:30px;
   right:30px;
   background-image:url("/images/close-button-large.png");
   background-size:cover;

_site/feed.xml

@@ -6,8 +6,8 @@
 </description>
   <link>http://scopesessions.org/</link>
   <atom:link href="http://scopesessions.org /feed.xml " rel="self" type="application/rss+xml" />
-  <pubDate>Mon, 23 Jan 2017 12:34:45 +0100</pubDate>
-  <lastBuildDate>Mon, 23 Jan 2017 12:34:45 +0100</lastBuildDate>
+  <pubDate>Mon, 23 Jan 2017 14:31:50 +0100</pubDate>
+  <lastBuildDate>Mon, 23 Jan 2017 14:31:50 +0100</lastBuildDate>
   <generator>Jekyll v3.1.6</generator>
   
   <item>

css/video.css

@@ -16,11 +16,12 @@
   right: 0;
   left: 0;
   margin-bottom:20px;
+  border: 4px solid transparent;
 }
 
 .videobox:hover
 {
-  /*opacity:1;*/
+  border: 4px solid #5a4b68;
 }
 
 .videobox .video-title
@@ -37,15 +38,15 @@
 
 #videotext
 {
-  width:40%;
+  width:45%;
   background-color:#000;
-  opacity:.8;
+  opacity:.9;
   position:fixed;
   z-index:10000;
-  right:50px;
-  bottom: 50px;
+  right:20px;
+  bottom: 20px;
   display:none;
-  padding:30px;
+  padding:20px;
   color:#fff;
 }
 
@@ -63,7 +64,6 @@
 
 #videotext .video-description
 {
-  display:block;
   font-size: 1em;
 }
 
@@ -117,7 +117,7 @@
   display:block;
   width:50px;
   height:50px;
-  top:90px;
+  top:30px;
   right:30px;
   background-image:url("/images/close-button-large.png");
   background-size:cover;