added theme metallic for slider

app/assets/javascripts/application.js

@@ -7,6 +7,7 @@
 //= require jquery
 //= require jquery_ujs
 //= require jquery.easing.1.3
+//= require jquery.noisy.min
 //= require twitter/bootstrap
 //= require plupload
 //= require jquery.plupload.queue
@@ -17,3 +18,15 @@
 //= require plupload.gears
 //= require plupload.browserplus
 //= require_tree .
+
+
+$(document).ready(function () {
+    $('body').noisy({
+        'intensity':10,
+        'size':200,
+        'opacity':0.320,
+        'fallback':'',
+        'monochrome':false
+    }).css('background-color', '#fefefe');
+});
+

app/assets/stylesheets/application.css

@@ -5,6 +5,129 @@
  *= require bootstrap_and_overrides
  */
 
+*{
+    text-shadow: 1px 1px 1px #fff;
+    /*text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 30px rgba(255, 255, 255, 0.125);*/
+    font-family: 'Nunito', 'Istok Web', sans-serif;
+    color: #959494;
+}
+
+body {
+    padding-top: 90px;
+    padding-bottom: 40px;
+}
+h1, h2, h3, h4, h5, h6 {
+    color: #666;
+}
+
+
+.navbar-inner {
+    background-color: #FAFAFA;
+    background-image: -moz-linear-gradient(center top, #FAFAFA, #EAEAEA);
+    background-image: -ms-linear-gradient(center top, #FAFAFA, #EAEAEA);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FAFAFA), to(#EAEAEA));
+    background-image: -webkit-linear-gradient(center top, #FAFAFA, #EAEAEA);
+    background-image: -o-linear-gradient(center top, #FAFAFA, #EAEAEA);
+    background-image: linear-gradient(top, #FAFAFA, #EAEAEA);
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#FAFAFA', endColorstr = '#EAEAEA', GradientType = 0);
+}
+
+
+.navbar .brand {
+    color: #000;
+    font-weight: bold;
+    padding-bottom: 5px;
+    /*text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 30px rgba(255, 255, 255, 0.125);*/
+}
+
+navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
+    border-top-color: #000000;
+}
+
+.navbar .nav {
+    margin-top: 15px;
+}
+
+.navbar .nav > li {
+    padding-right: 5px;
+}
+
+.navbar .nav .divider-vertical {
+    padding: 0;
+    height: 61px;
+}
+
+.navbar .nav > li > a {
+    color: #333333;
+    font-size: 18px;
+}
+
+.navbar .nav > li > a:hover {
+    background-color: #FAFAFA;
+    color: #7B7B7B;
+    border: 0px solid #C9C9C9;
+    border-radius: 5px 5px 5px 5px;
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 0px rgba(255, 255, 255, 0.75);
+    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 0px rgba(255, 255, 255, 0.75);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 0px rgba(255, 255, 255, 0.75);
+    transition: none;
+}
+
+.navbar .nav .active > a, .navbar .nav .active > a:hover {
+    background-color: #FAFAFA;
+    color: #7B7B7B;
+    border: 0;
+    border-radius: 5px 5px 5px 5px;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 0px rgba(255, 255, 255, 0.75);
+    transition: none;
+}
+
+.navbar .nav .open > .dropdown-toggle, .navbar .nav .active > .dropdown-toggle, .navbar .nav .open.active > .dropdown-toggle {
+    background-color: #FAFAFA;
+    color: #7B7B7B;
+}
+
+.navbar .nav .active > .dropdown-toggle:hover {
+    color: #7B7B7B;
+}
+
+.navbar-search {
+    margin-top: 15px;
+}
+
+.navbar-search .search-query {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 15px;
+    font-weight: normal;
+    line-height: 1.2;
+    color: #333;
+    background: #666;
+    background: rgba(255, 255, 255, 0.3);
+    border: 0;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 0px rgba(255, 255, 255, 0.75);
+    transition: none;
+}
+.navbar-search .search-query :-moz-placeholder {
+    color: #666;
+}
+.navbar-search .search-query::-webkit-input-placeholder {
+    color: #666;
+}
+.navbar-search .search-query:hover {
+    color: #333;
+    background-color: #999999;
+    background-color: rgba(255, 255, 255, 0.5);
+}
+.navbar-search .search-query:focus, .navbar-search .search-query.focused {
+    padding: 5px 10px;
+    color: #333333;
+    text-shadow: 0 1px 0 #ffffff;
+    background-color: #ffffff;
+    border: 0;
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
+    outline: 0;
+}
+
 .ajaxful-rating-wrapper{
     float: right;
 }

app/uploaders/file_uploader.rb

@@ -5,6 +5,7 @@ class FileUploader < CarrierWave::Uploader::Base
   @@generate_file_name = ''
   @@original_filename  = ''
 
+
   # Include RMagick or ImageScience support
   #     include CarrierWave::RMagick
   #     include CarrierWave::ImageScience
@@ -71,7 +72,7 @@ class FileUploader < CarrierWave::Uploader::Base
   # Below 767px viewports, the columns become fluid and stack vertically.
 
   version :middle do
-    process :resize_to_fit => [724, 500]
+    process :resize_to_fill => [742, 500]
 
     def store_dir
       ENV['STORAGE_PATH'] + "/thumbs/#{model.album.path}/#{model.id}"
@@ -79,7 +80,7 @@ class FileUploader < CarrierWave::Uploader::Base
   end
 
   version :large do
-    process :resize_to_fit => [940, 500]
+    process :resize_to_fill => [940, 600]
 
     def store_dir
       ENV['STORAGE_PATH'] + "/thumbs/#{model.album.path}/#{model.id}"
@@ -87,7 +88,7 @@ class FileUploader < CarrierWave::Uploader::Base
   end
 
   version :largest do
-    process :resize_to_fit => [1170, 500]
+    process :resize_to_fill => [1170, 600]
 
     def store_dir
       ENV['STORAGE_PATH'] + "/thumbs/#{model.album.path}/#{model.id}"

app/views/shared/_home_slider.html.erb

@@ -1,14 +1,14 @@
 <%= content_for :head do %>
-    <%= stylesheet_link_tag "anythingslider/anythingslider" %>
+    <%= stylesheet_link_tag "anythingslider/anythingslider", "anythingslider/theme-metallic", "anythingslider/animate" %>
     <%= javascript_include_tag "anythingslider/jquery.anythingslider.min" %>
 
     <script>
         $(function () {
             $('#home-slider').anythingSlider({
-//                theme:'metallic',
+                theme:'metallic',
-                expand:true,
+               // expand:true,
                 //resizeContents: false,
-                autoPlay:true
+                autoPlay:false
             });
 
 
@@ -17,12 +17,11 @@
 
     <style type="text/css">
         #home-slider {
-            height: 1000px;
+            height: 600px;
         }
 
         .slider-wrapper {
             width: 100%;
-            height: 1000px;
             margin: 0 auto;
             margin-bottom: 20px;
         }
@@ -32,7 +31,7 @@
 <div class="span12 slider-wrapper">
   <ul id="home-slider">
     <% @popular_photos.each do |photo| %>
-        <li><%= image_tag photo.attachment.large.url %></li>
+        <li><%= image_tag photo.attachment.largest.url %></li>
     <% end %>
   </ul>
 </div>

test/blueprints.rb

@@ -62,7 +62,7 @@ Photo.blueprint {
   public { true }
   attachment {
     file_name = ::SecureRandom.hex(8)
-    file = open("http://lorempixel.com/1300/1000/people/")
+    file = open("http://lorempixel.com/1170/600/people/")
     if file.kind_of? Tempfile
       name = File.basename(file.path)
       FileUtils.move(file.path, "#{Rails.root}/tmp/attachments/#{name}.jpeg")

vendor/assets/javascripts/anythingslider/theme-metallic.css

@@ -34,7 +34,7 @@
 }
 /* Navigation buttons + start/stop button, default state */
 .anythingSlider-metallic .anythingControls a {
-	background: transparent url(../images/arrows-metallic.png) -68px -40px repeat-x;
+	background: transparent url(/assets/anythingslider/arrows-metallic.png) -68px -40px repeat-x;
 	color: #000;
 	border: #000 1px solid;
 	border-radius: 5px;
@@ -130,7 +130,7 @@
 	margin: -47.5px 0 0 0; /* half height of image */
 	text-align: center;
 	outline: 0;
-	background: url(../images/arrows-metallic.png) no-repeat;
+	background: url(/assets/anythingslider/arrows-metallic.png) no-repeat;
 }
 
 /* back arrow */

vendor/assets/javascripts/jquery.noisy.min.js

@@ -0,0 +1,3 @@
+(function(c){c.fn.noisy=function(b){b=c.extend({},c.fn.noisy.defaults,b);var d,a;if(JSON&&localStorage.getItem)a=localStorage.getItem(JSON.stringify(b));if(a)d=a;else{a=document.createElement("canvas");if(a.getContext){a.width=a.height=b.size;for(var h=a.getContext("2d"),e=h.createImageData(a.width,a.height),i=b.intensity*Math.pow(b.size,2),j=255*b.opacity;i--;){var f=(~~(Math.random()*a.width)+~~(Math.random()*a.height)*e.width)*4,g=i%255;e.data[f]=g;e.data[f+1]=b.monochrome?g:~~(Math.random()*255);
+e.data[f+2]=b.monochrome?g:~~(Math.random()*255);e.data[f+3]=~~(Math.random()*j)}h.putImageData(e,0,0);d=a.toDataURL("image/png");if(d.indexOf("data:image/png")!=0||c.browser.msie&&c.browser.version.substr(0,1)<9&&d.length>32768)d=b.fallback}else d=b.fallback;JSON&&localStorage&&localStorage.setItem(JSON.stringify(b),d)}return this.each(function(){c(this).css("background-image","url('"+d+"'),"+c(this).css("background-image"))})};c.fn.noisy.defaults={intensity:0.9,size:200,opacity:0.08,fallback:"",
+monochrome:false}})(jQuery);