gallery/app/views/galleries/show.html.erb

<%
  params = OrbitHelper.params
  page = @page || Page.where(url:params['url']).first
  @layout_type = 0
  if page.methods.include?(:select_option_items)
    @show_option_items = ModuleApp.where(key: 'gallery').last.show_option_items rescue nil
    page.select_option_items.each do |select_option_item|
      if !(@show_option_items.nil?) && select_option_item.field_name == @show_option_items.keys.first.to_s
        value = YAML.load(select_option_item.value)
        tmp = value[:en]
        I18n.with_locale(:en) do
          if tmp == t('gallery.grid_style')
            @layout_type = 0
          elsif tmp == t('gallery.card_style')
            @layout_type = 1
          elsif tmp == t('gallery.slideshow_style')
            @layout_type = 2
          end
        end
      end
    end
  end
  data = action_data 
%>
<% if @layout_type==0 %>
<%= render_view %>
<% elsif @layout_type==1 %>

<div class="show-gallery gallery card-group">
  <h1 class="show-title">
    <span><%= data['data']['album-title'] %></span>
  </h1>
  <%= data['data']['album-description'].html_safe %>
  <link rel="stylesheet" type="text/css" href="/assets/gallery_card.css">
  <div class="row show-content" data-level="0" data-list="images">
    <% data['images'].each do |image| %>
      <div class="card card-flip h-100">
        <div class="card-front">
          <div class="card-body" style="padding:0;">
            <img
              srcset="
              <%= image['thumb-large-src'] %> 1024w,
              <%= image['thumb-src'] %> 768w"
              src="<%= image['thumb-src'] %>"
              alt="<%= image['alt_title'] %>"
            >
            <div class="card-footer">
              <h3 class="card-title"><%= image['image_short_description'] %></h3>
            </div>
          </div>
        </div>
        <div class="card-back">
          <div class="card-body" style="background-color: <%= image['album_color'] %>;color: <%= image['album_card_text_color'] %>;">
            <h3 class="card-title"><%= image['image_short_description'] %></h3>
            <%= image['image_description'] %></h3>
            <div class="card-button-group">
              <a href="<%= image['link_to_show'] %>" class="btn btn-secondary view" onclick="window.location.hash = '<%= image['link_to_show'] %>';GalleryTheater();return false;">
                <i class="fa fa-link" aria-hidden="true"></i>
              </a>
              <a href="<%= image['src'] %>" data-toggle="lightbox" data-gallery="gallery" class="btn btn-secondary preview" data-title="<%= image['alt_title'] %>" data-type="image" target="_blank">
                <i class="fa fa-eye" aria-hidden="true"></i>
              </a>
            </div>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>
<% elsif @layout_type==2 %>
<script type="text/javascript">
  if (window.location.hash==''){
    window.location.hash = '#page='+window.location.href.split(/\/|-/).slice(-1)[0].split('#')[0]
  }
  function set_gallery_height(){
    var h = $('.gallery-thumb-container').height()+$('.gallery-image.gal-active').height()+$('.gallery-actions').height()+$('.theaterButton').height()+20
    $('.show-gallery-2.gallery').css('height',h)
  }
  $(window).resize(function(){
    set_gallery_height()
  })
</script>
<% end %>
<% OrbitHelper.render_css_in_head(["theater.css"]) %>
<%= javascript_include_tag "jquery.touchSwipe.min" %>
<%= javascript_include_tag "theater" %>
<% OrbitHelper.render_meta_tags([{"name" => "mobile-web-app-capable","content" => "yes"},{"name" => "apple-mobile-web-app-status-bar-style","content" => "black-translucent"}]) %>
<div id="gallery-theater-stage">
   <div class="<%= @layout_type==2 ? 'show-gallery-2 ' : '' %>gallery" style="margin-top: 2.4em;">
    <div class="gallery-loader">
      <div class="spinner">
          <div class="rect1"></div>
          <div class="rect2"></div>
          <div class="rect3"></div>
          <div class="rect4"></div>
          <div class="rect5"></div>
      </div>
    </div>
    <div class="gallery-actions">
      <div class="gallery-show-original gallery-actions-btn">
        <a title="<%= t('gallery.show_original_image') %>"><i class="fa fa-image"></i></a>
      </div>
      <div class="gallery-toggle-desc gallery-actions-btn">
        <i class="fa fa-comment"></i>
      </div>
      <div class="gallery-theme-switch gallery-actions-btn">
        <i class="fa fa-circle"></i>
      </div>
       <div class="gallery-close gallery-actions-btn">
         <i class="fa fa-times"></i>
       </div>
    </div>
    <div class="image-container" id="image-container"></div>
    <div class="gallery-thumb-toggle gallery-thumb-line">
      <i class="fa fa-angle-double-up"></i>
    </div>
    <div class="gallery-thumb-container">
        <div class="gallery-thumb-navs">
          <div class="gallery-thumb-prev gallery-thumb-nav">
            <i class="fa fa-arrow-circle-o-left"></i> 
          </div>
          <div class="gallery-thumb-next gallery-thumb-nav">
            <i class="fa fa-arrow-circle-o-right"></i> 
          </div>
        </div>
        <ul class="gallery-thumb-wrap">
        </ul>
    </div>
    <div class="gallery-img-desc">
      <div class="gallery-img-desc-inner">
      </div>
    </div>
    </div>
</div>

<script type="text/javascript">
if(typeof Modernizr == "undefined"){
  var script = $("<script>");
  script.attr("src","/assets/modernizr.js");
  $("head").append(script);
}
var gt = new GalleryTheater();

</script>