diff --git a/Gemfile b/Gemfile
index 98dc781..36a96f3 100755
--- a/Gemfile
+++ b/Gemfile
@@ -78,3 +78,5 @@ end
 
 gem "simple_calendar", "~> 0.1.9"
 gem 'rmagick'
+
+gem 'bootstrap-addons-rails'
diff --git a/Gemfile.lock b/Gemfile.lock
index ff6d52b..9fba644 100755
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -35,6 +35,8 @@ GEM
       activerecord (>= 3.0.0)
     bcrypt-ruby (3.0.1)
     bcrypt-ruby (3.0.1-x86-mingw32)
+    bootstrap-addons-rails (0.1.2)
+      rails
     bootstrap-sass (2.3.2.1)
       sass (~> 3.2)
     builder (3.0.4)
@@ -179,6 +181,7 @@ PLATFORMS
 DEPENDENCIES
   annotate (>= 2.5.0)
   awesome_nested_set
+  bootstrap-addons-rails
   bootstrap-sass (~> 2.3.2.1)
   cancan
   carrierwave
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 68c0b94..f880db0 100755
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -16,4 +16,7 @@
 //= require_tree .
 //= require tinymce-jquery
 //= require bootstrap
-
+//= require bootstrap/colorpicker
+//= require bootstrap/datepicker
+//= require bootstrap/load-image.min
+//= require bootstrap/image-gallery.min
diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss
index bd9a219..b127f38 100755
--- a/app/assets/stylesheets/application.css.scss
+++ b/app/assets/stylesheets/application.css.scss
@@ -11,10 +11,14 @@
  *= require_self
  *= require_tree .
  * require 'bootstrap'
+ 
  */
 $linkColor: #03006E;
 @import 'bootstrap';
 @import 'bootstrap-responsive';
+@import 'bootstrap/image-gallery';
+
+
 h1 
 {font-size: 23px}
 h2 
diff --git a/app/views/galleries/show.html.erb b/app/views/galleries/show.html.erb
index 392008b..a19e755 100644
--- a/app/views/galleries/show.html.erb
+++ b/app/views/galleries/show.html.erb
@@ -14,14 +14,48 @@
   <b>Datum:</b>
   <%= @gallery.datum %>
 </p>
+<div id="blueimp-gallery-fotos" class="blueimp-gallery" data-start-slideshow="true" data-filter=":even">
+    <div class="slides"></div>
+    <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>
+</div>
+<!-- modal-gallery is the modal dialog used for the image gallery -->
+<div id="modal-gallery" class="modal modal-gallery hide fade" tabindex="-1">
+    <div class="modal-header">
+        <a class="close" data-dismiss="modal">&times;</a>
+        <h3 class="modal-title"></h3>
+    </div>
+    <div class="modal-body"><div class="modal-image"></div></div>
+    <div class="modal-footer">
+        <a class="btn btn-primary modal-next">Next <i class="icon-arrow-right icon-white"></i></a>
+        <a class="btn btn-info modal-prev"><i class="icon-arrow-left icon-white"></i> Previous</a>
+        <a class="btn btn-success modal-play modal-slideshow" data-slideshow="5000"><i class="icon-play icon-white"></i> Slideshow</a>
+        <a class="btn modal-download" target="_blank"><i class="icon-download"></i> Download</a>
+    </div>
+</div>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
+<script src="js/bootstrap.js"></script>
+<script src="js/load-image.js"></script>
+<script src="js/bootstrap-image-gallery.js"></script>
+<div id="gallery" data-toggle="modal-gallery" data-target="#modal-gallery">
 <% @gallery.fotos.each do |f| %>
-<%= link_to image_tag(f.datei.big_thumb.url,{:class=>"img-polaroid"}) , gallery_foto_path(@gallery,f) %>
 
+<a href="<%= gallery_foto_path(@gallery,f)%>" title="<%=f.title%>" data-gallery="gallery">
+<%=image_tag(f.datei.big_thumb.url,{:class=>"img-polaroid"}) %></a>
+<% # image_tag(f.datei.url, :data => {:gallery => "gallery"}, :title => "Apple") %>
 
 
 <% end %>
-
+</div>
 
 <%= link_to 'NewFoto' , new_gallery_foto_path(@gallery)  %> | 
 <%= link_to 'Edit', edit_gallery_path(@gallery) %> |
 <%= link_to 'Back', galleries_path %>
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
+<script src="js/bootstrap.js"></script>
+<script src="js/load-image.js"></script>
+<script src="js/bootstrap-image-gallery.js"></script>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 81c8440..774d3c9 100755
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -5,9 +5,14 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Fetsite</title>
   <%= stylesheet_link_tag "application", :media => "all" %>
-  
+    <link rel="stylesheet" href="css/bootstrap.css">
+<link rel="stylesheet" href="css/style.css">
+<link rel="stylesheet" href="css/bootstrap-responsive.css">
+<!--[if lt IE 7]><link rel="stylesheet" href="css/bootstrap-ie6.css"><![endif]-->
+<link rel="stylesheet" href="css/bootstrap-image-gallery.css">
   <%= javascript_include_tag "application" %>
   <%= csrf_meta_tags %>
+
 </head>
 <body>
 <div class="container-fluid">