144 lines
5.3 KiB
Plaintext
144 lines
5.3 KiB
Plaintext
<%
|
|
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">
|
|
<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> |