fixed center image

_includes/head.html

@@ -16,30 +16,10 @@
  <link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
 
  <script type="text/javascript" src="/bower_components/jquery/dist/jquery.min.js"></script>
- <script type="text/javascript" src="/bower_components/imagesloaded/imagesloaded.pkgd.min.js"></script>
- <script type="text/javascript" src="/bower_components/imagefill.js/js/jquery-imagefill.js"></script>
  <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
  <script src="/bower_components/vegas/dist/jquery.vegas.min.js" type="text/javascript"></script>
-
+ <script type="text/javascript" src="/js/jquery.imagefill.min.js"></script>
- <script type="text/javascript" src="/js/custom.js"></script>
- <script type="text/javascript" src="/js/jquery.blImageCenter.js"></script>
  <script type="text/javascript" src="/js/scrollit.js-master/scrollit.min.js"></script>
-
+ <script type="text/javascript" src="/js/custom.js"></script>
- <script type="text/javascript">
-  var rnd = Math.floor(Math.random() * 6);
-
-  $(function() {
-   $.vegas({
-    src: '/assets/bgphotos/' + rnd + '.png'
-   });
-   $.vegas('overlay', {
-    src: '/assets/bgphotos/overlay.png'
-   });
-  });
-
-  // $( document ).ready(function() {
-  $('.artist-media').centerImage('inside');
-  // });
- </script>
 
 </head>

_includes/header.html

@@ -8,11 +8,15 @@
    </a>
   </div>
 
+  <div>
+   <ul class="nav navbar-nav navbar-center">
+    <li><a href="#" class="navigator-toggle"><i class="fa fa-bars"></i> Browse</a></li>
+   </ul>
+  </div>
+
   <!-- Collect the nav links, forms, and other content for toggling -->
   <div>
    <ul class="nav navbar-nav navbar-right">
-    <li><a href="#" class="navigator-toggle"><i class="fa fa-caret-square-o-down"></i> Upcoming session & more</a>
-    </li>
     {% for page in site.pages %} {% if page.title %}
     <li><a class="header-btn" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a>
     </li>

_layouts/event.html

@@ -39,9 +39,9 @@ layout: default
 
      <div class="artist-media">
       {% if {{talk.media_artist_url}} %}
-      <img class="artist-media" src={{talk.media_artist_url}}></img>
+      <img src={{talk.media_artist_url}}></img>
       {% else %}
-      <img class="artist-media" src="/assets/no_artist-media.png"></img>
+      <img src="/assets/no_artist-media.png"></img>
       {% endif %}
      </div>
 

artists.html

@@ -23,9 +23,9 @@ permalink: /artists/
 
      <div class="artist-media">
       {% if {{talk.media_artist_url}} %}
-      <img class="artist-media" src={{talk.media_artist_url}}></img>
+      <img src={{talk.media_artist_url}}></img>
       {% else %}
-      <img class="artist-media" src="/assets/no_artist-media.png"></img>
+      <img src="/assets/no_artist-media.png"></img>
       {% endif %}
      </div>
 

bower.json

@@ -20,7 +20,6 @@
   "bootstrap": "~3.3.1",
   "vegas": "~1.3.5",
   "imagefill.js": "*",
-  "imagesloaded": "~3.1.8",
   "fontawesome": "~4.3.0"
  }
 }

css/custom.css

@@ -22,22 +22,16 @@ a:hover {
  float: right;
 }
 .navbar-header {
- padding-left: 20px;
+ text-align: center;
 }
 .navbar-options {
  padding: 10px;
  float: right;
 }
-/*.navbar-options a{
-  margin-left: 10px;
-  color: #000;
-  padding: 10px;
-  background: #CCC;
-  font-size: 18px;
-}*/
 
 .navbar-brand img {
- height: 30px;
+ height: 40px;
+ margin-top:-10px;
 }
 .navbar-header a {
  color: #000;

js/custom.js

@@ -8,6 +8,18 @@ $(document).ready(function() {
   $.scrollIt();
  });
 
+ $(".artist-media img").imagefill();
+
+ var rnd = Math.floor(Math.random() * 6);
+
+ $(function() {
+  $.vegas({
+   src: '/assets/bgphotos/' + rnd + '.png'
+  });
+  $.vegas('overlay', {
+   src: '/assets/bgphotos/overlay.png'
+  });
+ });
 
  $(".navigator-toggle").click(function() {
   if (navigatorOpen) {

js/jquery.imagefill.min.js

@@ -0,0 +1,8 @@
+/*
+ * jQuery Image Fill
+ * http://pioul.fr/jquery-imagefill
+ *
+ * Copyright 2013, Philippe Masset
+ * Dual licensed under the MIT or GPL Version 2 licenses
+ */
+(function(a){a.fn.imagefill=function(b){b=a.extend({},{container:null,fadingDuration:500},b);var c=a(this);return c.each(function(){var c=a(this),d={options:b,image:c,container:b.container?c.closest(b.container):c.parent(),init:function(){this.container.css("overflow","hidden"),this.image.css("position","relative")},show:function(){this.options.fadingDuration?this.image.fadeIn(this.options.fadingDuration):this.image.show()},fillContainer:function(){var a=this.container.width(),b=this.container.height(),c=this.image.width(),d=this.image.height(),e=c/a,f=d/b;if(f>e){var g={width:a,height:d/e};g.top=-(g.height-b)/2}else{var g={width:c/f,height:b};g.left=-(g.width-a)/2}this.image.css(g).trigger("fillsContainer",[g])}};d.image.data("imagefill",d),d.container.length&&(d.init(),d.image[0].complete?setTimeout(a.proxy(function(){this.fillContainer()},d),0):(d.image.hide(),d.image.bind("load",function(){var b=a(this).data("imagefill");b.show(),b.fillContainer()})))}),c}})(jQuery);