blueimp-gallery inside rails

_gallery_blueimp.slim

/ app/views/application/_gallery_blueimp.slim

.blueimp-gallery {
  id = 'blueimp-gallery'
  data-hide-page-scrollbars = 'false'
  data-transition-speed = '250'
}
  .slides
  h3.title
  a.prev ‹
  a.next ›
  ol.indicator

application.css

/* app/assets/stylesheets/web/application.css */

..
*= require blueimp-gallery-all
..

application.html.slim

/ app/views/layouts/application.html.slim

doctype html
html
  head
    ...
  body
    ...
    = render 'gallery_blueimp'

application.js

// app/assets/javascripts/application.js

...
//= require blueimp-gallery-all
...

blueimp-gallery.sass

// app/assets/stylesheets/web/blocks/blueimp-gallery.sass

.blueimp-gallery
  background: rgba(#000, 0.85)
  transition-duration: 0.25s

  > .slides
    transform: translateY(-20px)
    transition: all 0.25s

  > .slides > .slide > .slide-content
    border: 10px solid #fff
    box-shadow: 0 30px 50px rgba(#212537, 0.5)
    max-height: 80%
    max-width: 80%
    transition-duration: 0.25s

  > .title
    background: linear-gradient(to bottom, rgba(#000, 0), rgba(#000, 0.25))
    bottom: 0
    display: block
    font-weight: 500
    left: 0
    padding: 18px 20px
    text-align: center
    top: initial
    transition: opacity 0.25s
    width: 100%

.blueimp-gallery-display
  > .slides
    transform: translateY(0)

Gemfile

gem 'blueimp-gallery'

show.html.slim

/ Anywhere in views

= link_to image_path('image-full.jpg'), target: '_blank', data: { gallery: 'gallery-name' }
  = image_tag 'image-thumb.jpg'