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

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "gallery" %>
  <%= stylesheet_link_tag "lib/tags-groups" %>
<% end %>
<!-- <div class="topnav clearfix">
  <ul class="breadcrumb text-info pull-left">
    <li><a href="/orbit_4.0.1/admin/dashboards/dashboards.shtml">Dashboard</a> <span class="divider">/</span></li>
    <li><a href="<%#= panel_gallery_back_end_albums_path %>">Gallery</a> <span class="divider">/</span></li>
    <li class="active"><%#= @album.name %></li>
  </ul>
</div> -->
<!-- Bottom Nav -->
<div class="order-edit-notification">Images re-ordering enabled.</div>
<div class="bottomnav clearfix">
  <div class="action pull-left">
    <a href="<%= admin_galleries_path %>" class="btn btn-small"><i class="icons-back"></i> Back</a>
  </div>
  <div class="action pull-right">
    <a href="#" class="btn btn-inverse btn-small deselect hide">Deselect</a>
    <% if can_edit_or_delete?(@album) %>
      <a href="#dialog" data-toggle="modal" class="btn btn-warning btn-small deletephoto hide"><i class="icons-cross-3"></i> Delete Photo</a>
      <a href="#view-photo-tags" class="btn btn-primary btn-small addtags open hide" for="batch"><i class="icons-tag"></i> Add Tags</a>
      <a href="<%= edit_admin_gallery_path(@album.id) %>" class="btn btn-small btn-success"><i class="icon-edit"></i> Edit</a>
      <a href="#" class="btn btn-small btn-info order-btn-class" id="edit-order-btn">Edit Order</a>
      <b class="divider"></b>
     
      <a href="#" class="add-imgs btn btn-small btn-primary"><i class="icons-plus"></i> Add Image</a>
    <% end %>
  </div>
  <form action="<%= admin_galleries_upload_image_path %>", id='fileupload'>
    <!-- Redirect browsers with JavaScript disabled to the origin page -->
    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
    <div class="fileupload-buttonbar">
      <div class="navbar">
        <div class="navbar-inner">
          <ul class="nav">
            <li>
              <div class="fileinput-button add-photo">
                <i class="icon-plus icon-white"></i>
                <span>Add files...</span>
                <input type="file" name="files[]" multiple>
              </div>
                <input type="hidden" value="<%= @album.id.to_s %>" name="album_id" id="fileupload_aid" />
            </li>
            <li>
              <button type="submit" class="start add-photo">
                <i class="icon-upload icon-white"></i>
                <span>Start upload</span>
              </button>
            </li>
            <li>
              <button type="reset" class="cancel add-photo">
                <i class="icon-ban-circle icon-white"></i>
                <span>Cancel upload</span>
              </button>
            </li>
            <!-- <li>
              <button type="button" class="delete">
                <i class="icons-trash icon-white"></i>
                <span>Delete</span>
              </button>
            </li> -->
          </ul>
        </div>
      </div>
      <!-- The global progress information -->
      <div class="fileupload-progress">
          <!-- The global progress bar -->
          <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
              <div class="bar" style="width:0%;"></div>
          </div>
          <!-- The extended global progress information -->
          <div class="progress-extended"></div>
      </div>
    </div>
    <!-- Drop Zone -->
    <div id="dropzone" class="drop">
      <div data-icons="&#xe0a3;"></div>
      Drop files here
    </div>
    <!-- The loading indicator is shown during file processing -->
    <div class="fileupload-loading"></div>
    <!-- The table listing the files available for upload/download -->
    <div id="file-list" class="nano">
      <div class="content">
        <ul role="presentation" class="files clearfix">
        </ul>
      </div>
    </div>
  </form>
</div>

<div class="rgbody">
  <div class="gallery-info">
    <h3><%= @album.name %></h3>
    <p class="muted"><%= @album.description.html_safe %></p>
  </div> 
  <ul id="imgholder" class="gallery clearfix" data-gallery-id="<%= @album.id.to_s %>">
    <% @images.each do |image| %>
      <%= render :partial=>"image", :object=>image %>
    <% end %>
  </ul>
</div>
 <div id="dialog" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Delete item" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3>Delete Photo?</h3>
    </div>
    <div class="modal-body">
      <span class="text-warning text-center">This action can not be restored, are you sure you want to delete?</span>
      <div class="spinning">
        <i class="icon-spinner icon-spin icon-4x"></i>
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
      <button class="delete-item btn btn-danger" id="delete_selected_photos_btn">Delete</button>
    </div>
  </div>
 <div id="view-photo-tags" class="nano" style="display:none">
      <div class="content">
        <form>
          <fieldset>
           <legend>Tags</legend>
            <ul class="tags-groups">
              <% @tags.each do |tag| %>
              <li class="filter-item">
                <p class="card pull-left">
                  <input type="checkbox" value="<%= tag.id.to_s %>">
                </p>
                <a>
                  <% @site_in_use_locales.each_with_index do |locale, i| %>
                    <span class="tag"><%= tag.name_translations[locale] %></span>
                    <% if @site_in_use_locales.count-1 != i %>
                      /
                    <% end %>  
                  <% end %>
                </a>
              </li>
              <% end %>
            </ul>
            <div class="form-actions">
              <a href="javascript:$.pageslide.close()" class="btn btn-small">Cancel</a>
              <input type="submit" value="Save" class="btn btn-primary" />
            </div>
          </fieldset>
        </form>
      </div>
    </div>

    <div id="view-photo-depiction" class="nano" style="display:none">
      <div class="content">
        <form for="description" method="post" data-remote="true" action="/admin/galleries/update_image">
          <fieldset>
            <legend>Description</legend>
             <% @site_in_use_locales.each_with_index do |locale, i| %>
                <label><%= t(locale.to_s) %></label>
                <textarea rows="10" name="album_image[description_translations][<%= locale %>]" for="<%= locale %>"></textarea>
            <% end %>
            <div class="form-actions">
              <a href="javascript:$.pageslide.close()" class="btn btn-small">Cancel</a>
              <input type="submit" value="Save" class="btn btn-primary" />
              <input type="hidden" value="" name="image_id" />
            </div>
          </fieldset>
        </form>
      </div>
    </div>

<script type="text/javascript">
  var photosData = <%= @photos_data.html_safe %>;
</script>

<% content_for :page_specific_javascript do %>
  <%= javascript_include_tag "lib/jquery-ui-1.10.0.custom.min" %>
  <%= javascript_include_tag "jquery.masonry.min.js" %>
  <%= javascript_include_tag "jquery.lite.image.resize.js" %>
  <%= javascript_include_tag "lib/checkbox.card" %>
  <%= javascript_include_tag "file-upload/vendor/jquery.ui.widget.js" %>
  <%= javascript_include_tag "file-upload/tmpl.min.js" %>
  <%= javascript_include_tag "file-upload/load-image.min.js" %>
  <%= javascript_include_tag "file-upload/canvas-to-blob.min.js" %>
  <%= javascript_include_tag "file-upload/jquery.iframe-transport.js" %>
  <%= javascript_include_tag "file-upload/jquery.fileupload.js" %>
  <%= javascript_include_tag "file-upload/jquery.fileupload-fp.js" %>
  <%= javascript_include_tag "file-upload/jquery.fileupload-ui.js" %>
  <%= javascript_include_tag "file-upload/drop-zone.js" %>
  <%= javascript_include_tag "gallery" %>
<% end %>
 <!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
      <li class="template-upload fade">
        <ul class="clearfix">
            <li class="action-bnt">
              {% if (o.files.valid && !i) { %}
                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
                  <div class="bar" style="width:0%;"></div>
                </div>
                {% if (!o.options.autoUpload) { %}
                  <button class="btn btn-primary start">
                    <i class="icon-upload icon-white"></i>
                  </button>
                {% } %}
              {% } %}
              {% if (!i) { %}
                <button class="btn btn-warning cancel">
                  <i class="icon-ban-circle icon-white"></i>
                </button>
              {% } %}
            </li>
            <li class="preview pull-left"><span class="fade"></span></li>
            <li class="name-size">
              <p>{%=file.name%}</p>
              {% if (file.error) { %}
                <p class="error"><span class="label label-important">Error</span> {%=file.error%}</p>
              {% } else if (o.files.valid && !i) { %}
                <p class="label label-info">{%=o.formatFileSize(file.size)%}</p>
              {% } %}
            </li>
          </ul>
      </li>
    {% } %}
  </script>
  <!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
  {% for (var i=0, file; file=o.files[i]; i++) { %}
    <li class="template-download fade">
      <ul class="clearfix">
        {% if (file.error) { %}
          <li class="name-size">
            <p>{%=file.name%}</p>
            <p class="error"><span class="label label-important">Error</span> {%=file.error%}</p>
          </li>
        {% } else { %}
          <li class="preview">
            {% if (file.thumbnail_url) { %}
              <a href="{%=file.url%}" title="{%=file.name%}" data-gallery="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
            {% } %}
          </li>
          <li class="name-size">
            <p><a href="{%=file.url%}" title="{%=file.name%}" data-gallery="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a></p>
            <p ><span class="label label-success">Success</span> File uploaded successfully!</p>
            <p class="label label-info">{%=o.formatFileSize(file.size)%}</p>
          </li>
        {% } %}
      </ul>
    </li>
  {% } %}
</script>