javascript - How to enlarge images in Ruby on Rails? -

i have working ruby on rails app. users exchange photos , messages(microposts). users see enlarge photos clicking on them.

it supposed similar wordpress when users click on dimension indicated (for ex. 3024 *4032), see bigger photos.

i think achieve goal need use java script.

right if user post big picture, program makes smaller(see file below indication size).

i keep option @ same time add new one: enlarge photo after clicking on it.

is possible user click on adjusted photo , make larger in ruby on rails?

files related below:

// app/models/micropost.rb

class micropost < activerecord::base   belongs_to :user   default_scope -> { order(created_at: :desc) }   mount_uploader :picture, pictureuploader   validates :user_id, presence: true   validates :content, presence: true, length: { maximum: 3440 }   validate  :picture_size    private      # validates size of uploaded picture.     def picture_size       if picture.size > 5.megabytes         errors.add(:picture, "should less 5mb")       end     end end   // app/assets/javascripts/application.js   // manifest file that'll compiled application.js, include files // listed below. // // javascript/coffee file within directory, lib/assets/javascripts, vendor/assets/javascripts, // or plugin's vendor/assets/javascripts directory can referenced here using relative path. // // it's not advisable add code directly here, if do, it'll appear @ bottom of // compiled file. // // read sprockets readme (https://github.com/rails/sprockets#sprockets-directives) details // supported directives. // //= require jquery //= require jquery_ujs //= require ckeditor-jquery //= require bootstrap  //= require_tree .  /* global $ */ $('.ckeditor').ckeditor({   // optional config });    // app/assets/javascripts/microposts.coffee   # place behaviors , hooks related matching controller here. # logic automatically available in application.js. # can use coffeescript in file: http://coffeescript.org/ 

// edited 1

what changes/if need make in files below enlarged photos?

/app/views/microposts/_micropost.html.erb

<li id="micropost-<%= micropost.id %>">  <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>  <span class="user"><%= link_to micropost.user.name, micropost.user %></span>  <span class="content">    <%= micropost.content.html_safe %>    <%= image_tag micropost.picture.url if micropost.picture? %>  </span>  <span class="timestamp">    posted <%= time_ago_in_words(micropost.created_at) %> ago.    <% if current_user?(micropost.user) ||  current_user.admin? %>     <%= link_to "delete", micropost, method: :delete,                                       data: { confirm: "you sure?" } %>       <%= link_to "edit", edit_micropost_path(micropost.id) %>     <% end %>  </span> </li>   /app/views/microposts/edit.html.erb  <%= form_for(@micropost, html: { multipart: true }) |f| %>   <%= render 'shared/error_messages', object: f.object %>    <div class="field">   <%= f.text_area :content, data: { 'no-turbolink'=>true}, :class => 'ckeditor', placeholder: "edit micropost..." %> </div>    <%= f.submit "post", class: "btn btn-primary" %>    <span class="picture">     <%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %>   </span> <% end %>  <script type="text/javascript">   $('#micropost_picture').bind('change', function() {     var size_in_megabytes = this.files[0].size/1024/1024;     if (size_in_megabytes > 5) {       alert('maximum file size 5mb. please choose smaller file.');     }   }); </script>    // app/views/shared   <%= form_for(@micropost) |f| %>   <%= render 'shared/error_messages', object: f.object %>   <div class="field">     <%= f.text_area :content, placeholder: "compose new micropost..." %>   </div>   <%= f.submit "post", class: "btn btn-primary" %>   <span class="picture">     <%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %>   </span> <% end %>  <script type="text/javascript">   $('#micropost_picture').bind('change', function() {     var size_in_megabytes = this.files[0].size/1024/1024;     if (size_in_megabytes > 5) {       alert('maximum file size 5mb. please choose smaller file.');     }   }); </script>   // gemfile  source 'https://rubygems.org'  gem 'rails',                   '5.0.0.1' gem 'bcrypt',                  '3.1.11' gem 'faker',                   '1.6.3' gem 'carrierwave',             '0.11.2' gem 'mini_magick',             '4.5.1' gem 'fog',                     '1.38.0' gem 'will_paginate',           '3.1.0' gem 'bootstrap-will_paginate', '0.0.10' gem 'bootstrap-sass',          '3.3.6' gem 'puma',                    '3.4.0' gem 'sass-rails',              '5.0.6' gem 'uglifier',                '3.0.0' gem 'coffee-rails',            '4.2.1' gem 'jquery-rails',            '4.1.1' gem 'turbolinks',              '5.0.1' gem 'jbuilder',                '2.4.1' gem 'ckeditor_rails'   group :development, :test   gem 'sqlite3', '1.3.11'   gem 'byebug',  '9.0.0', platform: :mri end  group :development   gem 'web-console',           '3.1.1'   gem 'listen',                '3.0.8'   gem 'spring',                '1.7.2'   gem 'spring-watcher-listen', '2.0.0' end  group :test   gem 'rails-controller-testing', '0.1.1'   gem 'minitest-reporters',       '1.1.9'   gem 'guard',                    '2.13.0'   gem 'guard-minitest',           '2.4.4' end  group :production   gem 'pg',   '0.18.4' end  # windows not include zoneinfo files, bundle tzinfo-data gem gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] 

// edited 2: follow link https://github.com/fat/zoom.js/

//layouts/application.html.erb

 <!doctype html>     <html>       <head>         <title><%= full_title(yield(:title)) %></title>         <%= stylesheet_link_tag "application", media: "all",                                                "data-turbolinks-track" => true %>         <%= javascript_include_tag "application", "data-turbolinks-track" => true %>         <%= csrf_meta_tags %>         <%= render 'layouts/shim' %>  <link href="css/zoom.css" rel="stylesheet">   <script src="js/zoom.js"></script>            <script src="js/transition.js"></script>      </head>        <body>         <body>         <%= render 'layouts/header' %>         <div class="container">           <% flash.each |message_type, message| %>             <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>           <% end %>           <%= yield %>           <%= render 'layouts/footer' %>           <%= debug(params) if rails.env.development? %>         </div>       </body>     </html>       <% flash.each |message_type, message| %>             <%= content_tag(:div, message, class: "alert alert-#{message_type}") %>           <% end %> enter code here 

// app/views/microposts/_micropost.html.erb (adding action "zoom")

<li id="micropost-<%= micropost.id %>">  <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %>  <span class="user"><%= link_to micropost.user.name, micropost.user %></span>  <span class="content">    <%= micropost.content.html_safe %>    <%= image_tag micropost.picture.url data-action="zoom" if micropost.picture? %>  </span>  <span class="timestamp">    posted <%= time_ago_in_words(micropost.created_at) %> ago.    <% if current_user?(micropost.user) ||  current_user.admin? %>     <%= link_to "delete", micropost, method: :delete,                                       data: { confirm: "you sure?" } %>       <%= link_to "edit", edit_micropost_path(micropost.id) %>     <% end %>  </span> </li> 

i believe there 2 parts question.

part a - "how allow user enlarge image in ui?"

check out nice, lightweight javascript library -

https://github.com/fat/zoom.js/

demo of here.

part b has fact sounds server-side reducing size of user-submitted content.

you can reduce size of user-submitted photo. cannot enlarge small photo uploads without degrading quality.

my suggestion is, when uploads photo , want reduce size optimization, retain original size well, separate copy. gems paperclip support kind of flow.

wiki