Fix: Bildergallerie

Bildergallerie läuft jetzt auf Blueimp-gallery.
Viel spaß

Gemfile

@@ -73,7 +73,6 @@ gem "cancan"
 # Fileupload
 
 gem 'paperclip' ,'~>3.4.0'
-gem 'blueimp-gallery'
 
 gem 'git'
 gem 'haml'
@@ -117,3 +116,6 @@ gem 'sitemap_generator'
 gem 'whenever'
 gem 'yaml_db'
 gem 'etherpad-lite'
+
+# Image gallery
+gem 'blueimp-gallery'

app/assets/javascripts/application.js

@@ -23,11 +23,10 @@
 //= require bootstrap
 //= require bootstrap/colorpicker
 //= require bootstrap/datepicker
-//= require bootstrap/load-image.min
-//= require bootstrap/image-gallery.min
 //= require jquery-fileupload
 // require jquery.remotipart
 //= require jquery.datetimepicker
+//= require blueimp-gallery-all
 
 function insertAttachment(url,name) {
     var ext = url.split('.').pop().toLowerCase();

app/assets/stylesheets/application.css.scss

@@ -8,7 +8,6 @@
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
- *
 *= require_self	
 * require_tree .
 *= require 'calendars'
@@ -145,3 +144,5 @@ div.contentbox
 min-width:100%;
 background:44F;
 }
+
+@import 'galleries';

app/assets/stylesheets/galleries.css.scss

@@ -2,39 +2,6 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
-//.modal.fade {
-//    top: -25%;
-//    transition: opacity 0.3s linear 0s, top 0.3s ease-out 0s;
-//}
-//.modal-gallery {
-//    max-height: none;
-//    outline: medium none;
-//    width: auto;
-//}
-//.modal {
-//    color: #333333;
-//}
-//.hide {
-//    display: none;
-//}
-//.modal {
-//background-clip: padding-box;
-//  background-color: #FFFFFF;
-//    border: 1px solid rgba(0, 0, 0, 0.3);
-//border-radius: 6px 6px 6px 6px;
-//  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-//    left: 50%;
-//    margin-left: -280px;
-//    outline: medium none;
-//    position: fixed;
-//   top: 10%;;
-//    z-index: 1050;
-//}
-//.fade {
-//    opacity: 0;
-//    transition: opacity 0.15s linear 0s;
-//}
-
 div.gallery-block
 {
   padding: 10px;

app/assets/stylesheets/layout.css.scss

@@ -1,3 +1,6 @@
+
+@import 'blueimp-gallery-all';
+
 h1 { 
   font-size: 23px
 }

app/assets/stylesheets/themes/blue1/application.css.scss

@@ -15,7 +15,6 @@
  *= require jquery.datetimepicker	
  *= require jquery.ui.dialog
  * require 'bootstrap'
-
  * require 'neuigkeiten'
  */
 

app/views/galleries/show.html.erb

@@ -40,14 +40,39 @@
 <div style="clear:both"></div>
 
 
-  <div id="blueimp-gallery" class="blueimp-gallery">
+ <!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
+<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
+    <!-- The container for the modal slides -->
     <div class="slides"></div>
+    <!-- Controls for the borderless lightbox -->
     <h3 class="title"></h3>
     <a class="prev">‹</a>
     <a class="next">›</a>
     <a class="close">×</a>
     <a class="play-pause"></a>
     <ol class="indicator"></ol>
+    <!-- The modal dialog, which will be used to wrap the lightbox content -->
+    <div class="modal fade">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" aria-hidden="true">&times;</button>
+                    <h4 class="modal-title"></h4>
+                </div>
+                <div class="modal-body next"></div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-default pull-left prev">
+                        <i class="glyphicon glyphicon-chevron-left"></i>
+                        Previous
+                    </button>
+                    <button type="button" class="btn btn-primary next">
+                        Next
+                        <i class="glyphicon glyphicon-chevron-right"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
 </div>
   <div id="links">
     <% @fotos.each_index do |i| %>
@@ -61,13 +86,4 @@
 
 
   <%= render 'layouts/pretty_toolbar' %>
-<script>
+  
-document.getElementById('links').onclick = function (event) {
-  event = event || window.event;
-  var target = event.target || event.srcElement,
-    link = target.src ? target.parentNode : target,
-    options = {index: link, event: event},
-    links = this.getElementsByTagName('a');
-  blueimp.Gallery(links, options);
-};
-</script>

app/views/layouts/application.html.erb

@@ -4,7 +4,6 @@
   <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="logo2014_64.png">
-   <link rel="stylesheet" href="/home/tblazek/prog/fetsite/css/blueimp-gallery.min.css">
 
    <!--<link rel="shortcut icon" href="http://www.fet.at/favicon.ico">-->
    <!---->

config/locales/de.yml

@@ -44,3 +44,5 @@ de:
     adresse_text: "Gußhausstraße 25-27<br>1220 Wien" 
     service_text: "Für individuelle Beratung und alle sonstigen Angelegenheiten stehen wir mit unserem Servicedienst während der Vorlesungszeit jenen <b>Mo-Fr von 9 bis 15 Uhr</b> zur Verfügung. Außerhalb dieser Zeiten ist oft trotzdem jemand auf der Fachschaft der dir weiterhelfen kann."
     telefon_text: "Telefon: +43 2241341 <br> Skype: <br><b>E-Mail: service@fet.at</b>"
+  search:
+    no_results_for: "Es wurden keine Einträge gefunden für"