Mobile Rails API with Devise

1. Add column in User table

   rails g migration AddAuthenticationtokenToUsers authentication_token:string

2.  rails generate controller Api/V1/Api

3. User.rb
 
   before_save :ensure_authentication_token
   def ensure_authentication_token
    if authentication_token.blank?
      self.authentication_token = generate_authentication_token
    end
  end

  private
  def generate_authentication_token
 loop do
   token = Devise.friendly_token
   break token unless User.find_by(authentication_token: token)
 end
  end

4.  ApiController

  class Api::V1::ApiController < ApplicationController
  def create
  end

  def destroy
  end
  respond_to :json
helper_method :current_user
def getting_started
end
def current_user
 @current_user ||= User.where(authentication_token: request.headers['User-Token']).first
end
def authenticate_user!
 return render json:{error:'401 Unauthorized!'},status: 401 unless current_user
end
end

5.  application controller with user over
 
  before_action :configure_permitted_parameters, if: :devise_controller?

  protected
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up) do |user|
      user.permit(:email, :password,:password_confirmation, :remember_me)
    end
    devise_parameter_sanitizer.permit(:sign_in) do |user|
      user.permit(:email, :password)
    end
    devise_parameter_sanitizer.permit(:account_update) do |user|
      user.permit(:email, :password,:password_confirmation, :current_password)
    end
  end


routes.rb

namespace :api do
    namespace :v1 do
      devise_scope :user do
        post "/sign_in", :to => 'sessions#create'
        post "/sign_up", :to => 'registrations#create'
        put '/change_password', to: 'registrations#change_password'
        get "/profile", :to => 'registrations#profile'
        post "/update_account", :to => 'registrations#update'
        # delete "/sign_out", :to => 'sessions#destroy'
        # get "/reset_password", :to => 'registrations#reset_password'
        # get "/reset_password_link", :to => 'registrations#reset_password_link'
      end
    end
  end

6. Apipie Doc

  gem 'apipie-rails'

 bundle install
 rails g apipie:install

config/initializers/apipie.rb

Apipie.configure do |config|
  config.translate = false
  config.app_name                = "project_name"
  config.api_base_url            = ""
  config.doc_base_url            = "/apipie"
  # where is your API defined?
  config.api_controllers_matcher = ["#{Rails.root}/app/controllers/*/*/*.rb", "#{Rails.root}/app/controllers/*/*.rb", "#{Rails.root}/app/controllers/*.rb"]
  config.authenticate = Proc.new do
    authenticate_or_request_with_http_basic do |username, password|
      username == "admin" && password == "password"
    end
  end
end



Doc URL:

 https://jee-appy.blogspot.in/2016/03/how-to-make-rest-api-in-rails.html

Nested form

Question to answer


1. Gem file: 
          gem "nested_form"

 application.js:
         //= require jquery_nested_form


2. Question controller:
         params.require(:question).permit(:question_type, :body, answers_attributes: [:id, :question_id, :body, :_destroy])

3. Question.rb:
        has_many :answers, dependent: :destroy
        accepts_nested_attributes_for :answers, :allow_destroy => true

4. answer.rb:
       belongs_to :question

5. question form: 

     <table id="tasks">
    <%= form.fields_for :answers do |answer_form| %>
      <div class="row">
          <%= answer_form.text_area :body  ,class: "form-control mynewinput1", placeholder: "Question" %>
          <%= answer_form.link_to_remove "Remove", class: "btn btn-danger" %>
      </div>
    <% end %>
  </table>
<p><%= form.link_to_add "Add a Answer", :answers, :data => { :target => "#tasks" } %></p>

Social login facebook,twitter ..

Gemfile:

gem "oauth"
gem "oauth2"
gem 'omniauth-oauth2'
gem 'omniauth-facebook'
gem 'omniauth-twitter'
gem 'omniauth-google-oauth2'
gem 'omniauth-linkedin'
gem 'omniauth-github'
gem 'omniauth-pinterest'

--------------------------------------------------

Model generate:

 rails g model authentication provider:string uid:string user_id:integer token:text token_expired_at:datetime

--------------------------------------------------

app/model/authentication.rb:

class Authentication < ApplicationRecord
belongs_to :user
def self.from_omniauth(auth)
    authenticate = where(provider: auth['provider'], :uid=>auth['uid']).first_or_initialize
    register_user = User.find_by(email: auth.info.email)
    if authenticate.user
      return authenticate.user
    elsif register_user
      register_user.authentications.create(provider: auth['provider'], :uid=>auth['uid'])
      return register_user
    else
      user = User.new(
        email: auth.info.try(:email),                      
        password: Devise.friendly_token.first(8)
      )
      if user.email.blank?
        user.email=auth.extra.raw_info.id.to_s+"@gmail.com"
      end
      user.save!(:validate => false)
      user.authentications.create(provider: auth['provider'], :uid=>auth['uid'],token: auth["credentials"]["token"])
      return user
   end
  end
end

-------------------------------------------

User.rb

before_create :confirmation_token
has_many :authentications, dependent: :destroy
validates :email, :uniqueness => {:allow_blank => true}

-------------------------------------------

config/intializers/omniauth.rb:

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :facebook, "#{ENV['FACEBOOK_APP_ID']}", "#{ENV['FACEBOOK_APP_SERCRET']}", :scope => 'email, user_friends, manage_pages, pages_show_list'
  provider :google_oauth2, "#{ENV['GOOGLE_APP_ID']}", "#{ENV['GOOGLE_APP_SERCRET']}", scope: 'userinfo.profile,youtube,email', provider_ignores_state: true, prompt: :consent
  provider :twitter, "#{ENV['Twitter_APP_ID']}", "#{ENV['Twitter_APP_SERCRET']}"
  provider :linkedin, "#{ENV['Linkedin_APP_ID']}", "#{ENV['Linkedin_APP_SERCRET']}"
  provider :github, "#{ENV['Github_APP_ID']}", "#{ENV['Github_APP_SERCRET']}", :scope => 'email'
  provider :pinterest, "#{ENV['Pinterest_APP_ID']}", "#{ENV['Pinterest_APP_SERCRET']}", :scope => 'read_public,write_public'
end

--------------------------------------------
application.yml:

default:
  DATABASE_ADAPTER: postgresql
  DATABASE_USER: root
  DATABASE_PASSWORD: root
  DATABASE_NAME: go_foot_ball
  DATABASE_HOST: localhost
  DOMAIN: localhost
  FACEBOOK_APP_ID: xxxxxxxxxx
  FACEBOOK_APP_SERCRET: xxxxxxxxxxxxxxxxxxx
  TWITTER_CONSUMER_KEY: xxxxxxxxxxxxxxxxx
  TWITTER_CONSUMER_SECRET: xxxxxxxxxxxxxxxxx
  INSTAGRAM_APP_ID: xxxxxxxxxxxxxxxxxxxxxxxxx
  INSTAGRAM_APP_SERCRET: xxxxxxxxxxxx
  # AWS_ACCESS_KEY_ID: xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  # AWS_SECRET_ACCESS_KEY:xxxxxxxxxxxxxxxxxxxxxxxxxx
  # REGION: 'us-west-2'
  # AWS_BUCKET_NAME: xxxxxxxxxxxx
  # FACEBOOK_APP_VERSION: 'v2.8'

development:
  DATABASE_ADAPTER: postgresql
  DATABASE_USER: root
  DATABASE_PASSWORD: root
  DATABASE_NAME: go_foot_ball
  DATABASE_HOST: localhost
  DOMAIN: localhost
  FACEBOOK_APP_ID: xxxxxxxxxxxx
  FACEBOOK_APP_SERCRET: xxxxxxxxxxxxxxxxx
  TWITTER_CONSUMER_KEY: xxxxxxxxxxxxxxxxxx
  TWITTER_CONSUMER_SECRET: xxxxxxxxxxxxxxxxxx
  INSTAGRAM_APP_ID: xxxxxxxxxxxxxxxxxxxxxxxx
  INSTAGRAM_APP_SERCRET: xxxxxxxxxxxxxxxxxxxxxx

testing:
  DATABASE_ADAPTER: postgresql
  DATABASE_USER: root
  DATABASE_PASSWORD: root
  DATABASE_NAME: go_foot_ball
  DATABASE_HOST: localhost
  DOMAIN: localhost

production:
  DATABASE_ADAPTER: postgresql
  DATABASE_USER: root
  DATABASE_PASSWORD: root
  DATABASE_NAME: go_foot_ball
  DATABASE_HOST: localhost
  DOMAIN: localhost

----------------------------------------------

routes:

  match '/auth/:provider/callback', :to => 'pages#create', via: [:get, :post]
  match '/auth/failure', :to => 'pages#failure', via: [:get, :post]

---------------------------------------------

app/controller/pages_controller.rb:

def create
    user = Authentication.from_omniauth(request.env["omniauth.auth"])
    if user
      flash[:notice] = "Authentication successful."
     sign_in :user, user
     redirect_to root_path
    else
        flash[:notice] = "Authentication Failed."
        redirect_to "/users/sign_up"
    end
  end
  def failure
  end
  

How To: Add :confirmable to Users

Modifying the User Model

First, add devise :confirmable to your models/user.rb file

devise :registerable, :confirmable

Create a New Migration

Then, do the migration as:

rails g migration add_confirmable_to_devise

Will generate db/migrate/YYYYMMDDxxx_add_confirmable_to_devise.rb. Add the following to it in order to do the migration.

class AddConfirmableToDevise < ActiveRecord::Migration
  # Note: You can't use change, as User.update_all will fail in the down migration
  def up
    add_column :users, :confirmation_token, :string
    add_column :users, :confirmed_at, :datetime
    add_column :users, :confirmation_sent_at, :datetime
    # add_column :users, :unconfirmed_email, :string # Only if using reconfirmable
    add_index :users, :confirmation_token, unique: true
    User.all.update_all confirmed_at: DateTime.now
  end

  def down
    remove_columns :users, :confirmation_token, :confirmed_at, :confirmation_sent_at
  end
end
You can also generate the corresponding Devise views if they have not yet been created:

rails generate devise:views users
Do the migration rake db:migrate

Restart the server.

If you are not using :reconfirmable (i.e leave the commented out lines as they are in the change method described above), update the configuration in config/initializers/devise.rb

config.reconfirmable = false

SMTP Setting:

config.action_mailer.raise_delivery_errors = true
  config.action_mailer.perform_deliveries = true
  config.action_mailer.delivery_method = :smtp
  config.action_mailer.smtp_settings = {
    :address => "smtp.gmail.com",
    :port => "587",
    :domain => "localhost",
    :user_name => "zz.zz@gmail.com",
    :password => "zzzzzzzzzz",
    :authentication => "plain",
    :enable_starttls_auto => true
  } 

How to add Admin panel in rails application

Add column:

rails g migration AddRoleToUsers role:string is_admin:boolean is_active:boolean

role, default: "member"

1. application controller with user over
 
class ApplicationController < ActionController::Base
  protect_from_forgery with: :exception
  before_action :user_admin, expect:[:after_sign_in_path_for]
  include ApplicationHelper
  layout :set_layout
  before_action :configure_permitted_parameters, if: :devise_controller?
  # before_action :check_subscription
  def after_sign_in_path_for(resource)
    resource.is_admin? ? admin_root_path : root_path
  end

def user_admin
    if request.fullpath.split("/")[1] == "admin"
      if current_user.role != 'admin'
        redirect_to root_path
      else
        request.url
      end
    else
    end
  end

  protected
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:email, :password, :password_confirmation, :role, :first_name, :last_name, :image, :is_active, :is_admin])
    devise_parameter_sanitizer.permit(:account_update, keys: [:email, :password, :password_confirmation, :role, :first_name, :last_name, :image, :is_active, :is_admin])

  end

def authentication_admin!
      unless current_user.is_admin?
        flash[:alert] = "You are not authorized to perform this action."
        redirect_to(request.referrer || root_path)
      end
  end

end

2. admin_controller

class AdminController < ApplicationController
  layout 'admin'
  before_action :authentication_admin!

  def index
  end
end

3. ApplicationHelper
 
module ApplicationHelper

def is_namespace_admin
begin
return false if !(request.base_url && request.url)
request.url.split(request.base_url)[1].split("/")[1] == "admin"
rescue => error
return false
end
end
  def is_not_namespace_admin
    !is_namespace_admin
  end
  def set_layout
  is_namespace_admin ? "admin" : "application"
  end

end

4. routes

 namespace :admin, module: nil  do
    root "admin#index"
    resources :users
  end

5. layout
6. config/initializers/assets.rb

  Rails.application.config.assets.precompile += %w( admin.css admin.js )

7.User.rb

def is_admin?
  return true if self.role =="admin"
  end

----------------------------------------------------

Heroku Pg backup

1. git remote add heroku heroku URL
2.  heroku pg:backups capture
3. pg_restore --verbose --clean --no-acl --no-owner -h localhost -U Username -d Databasename latest.dump

Flash messages

views/layouts/application.html.erb:-

<div class="FlashNotice">

  <% flash.each do |key, value| %>

    <div class="<%= flash_class(key) %> fade in">

      <a href="#" data-dismiss="alert" class="close">×</a>

      <%= value %>

    </div>

  <% end %>

</div>

<style>

.FlashNotice .alert{

margin-bottom: 0px;

}

</style>

application_helper.rb:-

def flash_class(level)

    case level

    when 'notice' then "alert alert-info"

    when 'success' then "alert alert-success"

    when 'error' then "alert alert-error"

    when 'alert' then "alert alert-error"

    end

  end

application.js:-

setTimeout(function() {

    $('.FlashNotice').fadeOut('fast');

}, 5000);

Active Admin CKediter

Add it to your Gemfile

gem 'activeadmin_ckeditor'

--------------------------------------------------------------------

Follow the instructions for galetahub/ckeditor (gem, mount in routes and rails generate for your file uploads if wanted), then add the following to /config/initializers/active_admin.rb

# To load a javascript file:
config.register_javascript 'ckeditor/init.js'

-----------------------------------------------------------------

In your resource you'll need to add to your form:

form do |f|
  f.inputs do
    f.input :foo
    f.input :bar, :as => :ckeditor
  end
  f.actions
end
--------------------------------------------------------------

I've also found it necessary to add to app/assets/stylesheets/active_admin.css.scss to fit it to on the form:

.cke_chrome {
  width: 79.5% !important;
  overflow: hidden;
}
-------------------------------------------------------------
index do
    selectable_column
    id_column
    column :descrption.html_safe
    column :body.html_safe
end
----------------------------------------------------------------
URL: https://github.com/activeadmin/activeadmin/wiki/Ckeditor-integration

jQuery Phone Number Mask

HTML:
     <input type="text" id="phone" />

-------------------------------------------------------------------------------------------
JS:- include

   File name:-  jquery.maskedinput-1.3.min.js     

   JS application.js:-
  
   //= jquery.maskedinput-1.3.min

-------------------------------------------------------------------------------------------
/*!
 * jQuery Browser Plugin v0.0.6
 * https://github.com/gabceb/jquery-browser-plugin
 *
 * Original jquery-browser code Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors
 * http://jquery.org/license

 * Modifications Copyright 2013 Gabriel Cebrian
 * https://github.com/gabceb
 *
 * Released under the MIT license
 *
 * Date: 2013-07-29T17:23:27-07:00

 https://github.com/gabceb/jquery-browser-plugin/blob/master/dist/jquery.browser.js
 */

(function( jQuery, window, undefined ) {
  "use strict";

  var matched, browser;

  jQuery.uaMatch = function( ua ) {
    ua = ua.toLowerCase();

  var match = /(opr)[\/]([\w.]+)/.exec( ua ) ||
  /(chrome)[ \/]([\w.]+)/.exec( ua ) ||
  /(version)[ \/]([\w.]+).*(safari)[ \/]([\w.]+)/.exec( ua ) ||
  /(webkit)[ \/]([\w.]+)/.exec( ua ) ||
  /(opera)(?:.*version|)[ \/]([\w.]+)/.exec( ua ) ||
  /(msie) ([\w.]+)/.exec( ua ) ||
  ua.indexOf("trident") >= 0 && /(rv)(?::| )([\w.]+)/.exec( ua ) ||
  ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec( ua ) ||
  [];

  var platform_match = /(ipad)/.exec( ua ) ||
  /(iphone)/.exec( ua ) ||
  /(android)/.exec( ua ) ||
  /(windows phone)/.exec( ua ) ||
  /(win)/.exec( ua ) ||
  /(mac)/.exec( ua ) ||
  /(linux)/.exec( ua ) ||
  /(cros)/i.exec( ua ) ||
  [];

  return {
  browser: match[ 3 ] || match[ 1 ] || "",
  version: match[ 2 ] || "0",
  platform: platform_match[ 0 ] || ""
  };
  };

  matched = jQuery.uaMatch( window.navigator.userAgent );
  browser = {};

  if ( matched.browser ) {
  browser[ matched.browser ] = true;
  browser.version = matched.version;
  browser.versionNumber = parseInt(matched.version);
  }

  if ( matched.platform ) {
  browser[ matched.platform ] = true;
  }

  // These are all considered mobile platforms, meaning they run a mobile browser
  if ( browser.android || browser.ipad || browser.iphone || browser[ "windows phone" ] ) {
  browser.mobile = true;
  }

  // These are all considered desktop platforms, meaning they run a desktop browser
  if ( browser.cros || browser.mac || browser.linux || browser.win ) {
  browser.desktop = true;
  }

  // Chrome, Opera 15+ and Safari are webkit based browsers
  if ( browser.chrome || browser.opr || browser.safari ) {
  browser.webkit = true;
  }

  // IE11 has a new token so we will assign it msie to avoid breaking changes
  if ( browser.rv )
  {
  var ie = "msie";

  matched.browser = ie;
  browser[ie] = true;
  }

  // Opera 15+ are identified as opr
  if ( browser.opr )
  {
  var opera = "opera";

  matched.browser = opera;
  browser[opera] = true;
  }

  // Stock Android browsers are marked as Safari on Android.
  if ( browser.safari && browser.android )
  {
  var android = "android";

  matched.browser = android;
  browser[android] = true;
  }

  // Assign the name and platform variable
  browser.name = matched.browser;
  browser.platform = matched.platform;


  jQuery.browser = browser;
})( jQuery, window );

/*
Masked Input plugin for jQuery
Copyright (c) 2007-2011 Josh Bush (digitalbush.com)
Licensed under the MIT license (http://digitalbush.com/projects/masked-input-plugin/#license)
Version: 1.3
  https://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.min.js
*/
(function(a){var b=(a.browser.msie?"paste":"input")+".mask",c=window.orientation!=undefined;a.mask={definitions:{9:"[0-9]",a:"[A-Za-z]","*":"[A-Za-z0-9]"},dataName:"rawMaskFn"},a.fn.extend({caret:function(a,b){if(this.length!=0){if(typeof a=="number"){b=typeof b=="number"?b:a;return this.each(function(){if(this.setSelectionRange)this.setSelectionRange(a,b);else if(this.createTextRange){var c=this.createTextRange();c.collapse(!0),c.moveEnd("character",b),c.moveStart("character",a),c.select()}})}if(this[0].setSelectionRange)a=this[0].selectionStart,b=this[0].selectionEnd;else if(document.selection&&document.selection.createRange){var c=document.selection.createRange();a=0-c.duplicate().moveStart("character",-1e5),b=a+c.text.length}return{begin:a,end:b}}},unmask:function(){return this.trigger("unmask")},mask:function(d,e){if(!d&&this.length>0){var f=a(this[0]);return f.data(a.mask.dataName)()}e=a.extend({placeholder:"_",completed:null},e);var g=a.mask.definitions,h=[],i=d.length,j=null,k=d.length;a.each(d.split(""),function(a,b){b=="?"?(k--,i=a):g[b]?(h.push(new RegExp(g[b])),j==null&&(j=h.length-1)):h.push(null)});return this.trigger("unmask").each(function(){function v(a){var b=f.val(),c=-1;for(var d=0,g=0;d<k;d++)if(h[d]){l[d]=e.placeholder;while(g++<b.length){var m=b.charAt(g-1);if(h[d].test(m)){l[d]=m,c=d;break}}if(g>b.length)break}else l[d]==b.charAt(g)&&d!=i&&(g++,c=d);if(!a&&c+1<i)f.val(""),t(0,k);else if(a||c+1>=i)u(),a||f.val(f.val().substring(0,c+1));return i?d:j}function u(){return f.val(l.join("")).val()}function t(a,b){for(var c=a;c<b&&c<k;c++)h[c]&&(l[c]=e.placeholder)}function s(a){var b=a.which,c=f.caret();if(a.ctrlKey||a.altKey||a.metaKey||b<32)return!0;if(b){c.end-c.begin!=0&&(t(c.begin,c.end),p(c.begin,c.end-1));var d=n(c.begin-1);if(d<k){var g=String.fromCharCode(b);if(h[d].test(g)){q(d),l[d]=g,u();var i=n(d);f.caret(i),e.completed&&i>=k&&e.completed.call(f)}}return!1}}function r(a){var b=a.which;if(b==8||b==46||c&&b==127){var d=f.caret(),e=d.begin,g=d.end;g-e==0&&(e=b!=46?o(e):g=n(e-1),g=b==46?n(g):g),t(e,g),p(e,g-1);return!1}if(b==27){f.val(m),f.caret(0,v());return!1}}function q(a){for(var b=a,c=e.placeholder;b<k;b++)if(h[b]){var d=n(b),f=l[b];l[b]=c;if(d<k&&h[d].test(f))c=f;else break}}function p(a,b){if(!(a<0)){for(var c=a,d=n(b);c<k;c++)if(h[c]){if(d<k&&h[c].test(l[d]))l[c]=l[d],l[d]=e.placeholder;else break;d=n(d)}u(),f.caret(Math.max(j,a))}}function o(a){while(--a>=0&&!h[a]);return a}function n(a){while(++a<=k&&!h[a]);return a}var f=a(this),l=a.map(d.split(""),function(a,b){if(a!="?")return g[a]?e.placeholder:a}),m=f.val();f.data(a.mask.dataName,function(){return a.map(l,function(a,b){return h[b]&&a!=e.placeholder?a:null}).join("")}),f.attr("readonly")||f.one("unmask",function(){f.unbind(".mask").removeData(a.mask.dataName)}).bind("focus.mask",function(){m=f.val();var b=v();u();var c=function(){b==d.length?f.caret(0,b):f.caret(b)};(a.browser.msie?c:function(){setTimeout(c,0)})()}).bind("blur.mask",function(){v(),f.val()!=m&&f.change()}).bind("keydown.mask",r).bind("keypress.mask",s).bind(b,function(){setTimeout(function(){f.caret(v(!0))},0)}),v()})}})})(jQuery);

/*     My Javascript      */

$(function(){
 
  $("#phone").mask("(999) 999-9999");


  $("#phone").on("blur", function() {
      var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );

      if( last.length == 5 ) {
          var move = $(this).val().substr( $(this).val().indexOf("-") + 1, 1 );

          var lastfour = last.substr(1,4);

          var first = $(this).val().substr( 0, 9 );

          $(this).val( first + move + '-' + lastfour );
      }
  });
});

-------------------------------------------------------------------------------------


jQuery Phone Number Mask:-

URL:- https://codepen.io/SweetTomato/pen/qnLcJ


jQuery
Mask Plugin:-

URL:- https://igorescobar.github.io/jQuery-Mask-Plugin/

CKEditor for rails asset pipeline

1. Include ckeditor_rails in Gemefile

  gem 'ckeditor_rails'

2. Add to your app/assets/javascripts/application.js after //= require jquery_ujs to work with jQuery

//= require ckeditor-jquery

3. Add ckeditor class to text area tag

<%= f.text_area :content, :class => 'ckeditor' %>

4. Initialize CKEditor in Javascript file

<script type="text/javascript"> 
  $('.ckeditor').ckeditor({
     width: '735',
     height: '0',
     // optional config
  });
</script>


Add to ck-editor in HTML:

1. <textarea name="editor1" id="editor1" rows="10" cols="80"></textarea>
<script type="text/javascript">
  CKEDITOR.replace('editor1')
</script>

Image zoom Simple-jQuery-Image-Magnifier-Enlargement-Plugin-imagezoom.html

Basic Usage:

Js: 

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

2	<script src="imagezoom.js"></script>

HTML:

<img src="<%= @product.image %>" data-imagezoom="true" data-magnification="3" data-zoomviewsize="[270,330]" class="simpleLens-big-image img-responsive" style="width: 270px; height: 330px">

Css:

.tgl {

  display: none;

}

.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {

  box-sizing: border-box;

}

.tgl::-moz-selection, .tgl:after::-moz-selection, .tgl:before::-moz-selection, .tgl *::-moz-selection, .tgl *:after::-moz-selection, .tgl *:before::-moz-selection, .tgl + .tgl-btn::-moz-selection {

  background: none;

}

.tgl::selection, .tgl:after::selection, .tgl:before::selection, .tgl *::selection, .tgl *:after::selection, .tgl *:before::selection, .tgl + .tgl-btn::selection {

  background: none;

}

.tgl + .tgl-btn {

  outline: 0;

  display: block;

  width: 4em;

  height: 2em;

  position: relative;

  cursor: pointer;

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;

}

.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {

  position: relative;

  display: block;

  content: "";

  width: 50%;

  height: 100%;

}

.tgl + .tgl-btn:after {

  left: 0;

}

.tgl + .tgl-btn:before {

  display: none;

}

.tgl:checked + .tgl-btn:after {

  left: 50%;

}

.tgl-ios + .tgl-btn {

  background: #fbfbfb;

  border-radius: 2em;

  padding: 2px;

  -webkit-transition: all .4s ease;

  transition: all .4s ease;

  border: 1px solid #e8eae9;

}

.tgl-ios + .tgl-btn:after {

  border-radius: 2em;

  background: #fbfbfb;

  -webkit-transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;

  transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease, margin 0.3s ease;

  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 0 rgba(0, 0, 0, 0.08);

}

.tgl-ios + .tgl-btn:hover:after {

  will-change: padding;

}

.tgl-ios + .tgl-btn:active {

  box-shadow: inset 0 0 0 2em #e8eae9;

}

.tgl-ios + .tgl-btn:active:after {

  padding-right: .8em;

}

.tgl-ios:checked + .tgl-btn {

  background: #86d993;

}

.tgl-ios:checked + .tgl-btn:active {

  box-shadow: none;

}

.tgl-ios:checked + .tgl-btn:active:after {

  margin-left: -.8em;

}

URL: 

http://www.jqueryscript.net/zoom/Simple-jQuery-Image-Magnifier-Enlargement-Plugin-imagezoom.html