Rails update. Fancybox update. Migrations from Paperclip.

app/assets/javascripts/application.js

@@ -13,7 +13,6 @@
 //= require jquery
 //= require jquery_ujs
 //= require foundation
-//= require fancybox
 //= require cookies_eu
 //= require_tree .
 

app/assets/stylesheets/actiontext.scss

@@ -0,0 +1,36 @@
+//
+// Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
+// the trix-editor content (whether displayed or under editing). Feel free to incorporate this
+// inclusion directly in any other asset bundle and remove this file.
+//
+//= require trix/dist/trix
+
+// We need to override trix.css’s image gallery styles to accommodate the
+// <action-text-attachment> element we wrap around attachments. Otherwise,
+// images in galleries will be squished by the max-width: 33%; rule.
+.trix-content {
+  .attachment-gallery {
+    > action-text-attachment,
+    > .attachment {
+      flex: 1 0 33%;
+      padding: 0 0.5em;
+      max-width: 33%;
+    }
+
+    &.attachment-gallery--2,
+    &.attachment-gallery--4 {
+      > action-text-attachment,
+      > .attachment {
+        flex-basis: 50%;
+        max-width: 50%;
+      }
+    }
+  }
+
+  action-text-attachment {
+    .attachment {
+      padding: 0 !important;
+      max-width: 100% !important;
+    }
+  }
+}

app/assets/stylesheets/application.scss

@@ -11,7 +11,9 @@
  *= require_self
  *= require foundation_and_overrides
  *= require cookies_eu
- *= require fancybox
  *= require font-awesome
  *= require my_styles
  */
+
+ @import "jquery.fancybox.min";
+ 

app/assets/stylesheets/my_styles.scss

@@ -488,4 +488,55 @@ a.black
 .pkgdescription
 {
   margin-bottom: 3rem;
-}
+}
+
+
+
+.image-with-zoom-icon-container {
+	position: relative;
+	// display: inline-block;
+}
+
+.image-with-zoom-icon-container img {
+  // opacity: 1;
+  display: block;
+  width: 100%;
+  height: auto;
+  // transition: .5s ease;
+  // backface-visibility: hidden;
+}
+
+@keyframes example {
+  from {opacity: 0}
+  to {opacity: 0.5}
+}
+
+.image-with-zoom-icon-container .magnifying-glass-icon {
+  transition: .5s ease;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+	background: rgba(0,0,0,0.5);
+  color: #fff;
+	text-align: center;
+  position: absolute;
+  font-size: 200%;
+
+  border-radius: 50%;
+	padding: 20px;
+	border: 1px solid #fff;
+	line-height: 1;
+  // opacity: 0.3;
+  
+
+  animation-name: example;
+  animation-duration: 1s;
+  animation-delay: 4s;
+  animation-fill-mode: both;
+}
+
+// .magnifying-glass-icon:hover {
+//   opacity: 1;
+// }