[Rails] Implementation of image enlargement function using lightbox2

Target

ezgif.com-video-to-gif.gif

Development environment

・ Ruby: 2.5.7 Rails: 5.2.4 ・ Vagrant: 2.2.7 -VirtualBox: 6.1 ・ OS: macOS Catalina

Premise

The following has been implemented.

Slim introductionImplementation of posting function

Implementation

1. Edit ʻapplication.html.slim`

slim:application.html.slim


doctype html
html
  head
    title
      | Bookers2
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    /Postscript
    link href='https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css' rel='stylesheet'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
    /Postscript
    script src='https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js' type='text/javascript'

2. Edit ʻimage_tag`

slim:books/show.html.slim


= link_to @book.image.url, 'data-lightbox': @book.image do
  = image_tag @book.image.to_s

Recommended Posts

[Rails] Implementation of image enlargement function using lightbox2
[Rails] Implementation of image slide show using Bootstrap 3
Implementation of image preview function
[Rails] Implementation of category function
[Rails] Implementation of tutorial function
[Rails] Implementation of like function
[Rails] Implementation of multi-layer category function using ancestry "Preparation"
[Rails] Implementation of multi-layer category function using ancestry "seed"
[Rails] About implementation of like function
[Rails] Implementation of user withdrawal function
[Rails] Implementation of CSV export function
[Rails] Implementation of multi-layer category function using ancestry "Creation form"
Implementation of user authentication function using devise (1)
Implementation of user authentication function using devise (3)
[Ruby on rails] Implementation of like function
[Rails] Implementation of coupon function (with automatic deletion function using batch processing)
[Rails] Implementation of tag function using acts-as-taggable-on and tag input completion function using tag-it
Implementation of search function
[Rails] I will explain the implementation procedure of the follow function using form_with.
Implementation of pagination function
[Rails] Implementation of PV number ranking using impressionist
Implementation of like function (Ajax)
Implementation of category pull-down function
[Rails] Implement image posting function
Rails sorting function implementation (displayed in order of number of like)
Implementation of validation using regular expressions
[Rails] Implementation of many-to-many category functions
[Rails] gem ancestry category function implementation
[Ruby on Rails] Comment function implementation
[Rails] Comment function implementation procedure memo
Implementation of like function in Java
[Rails] [jQuery] Asynchronous like function implementation using remote: true and js.erb
Rails Addition of easy and easy login function
[Ruby on Rails] Follow function implementation: Bidirectional
[Ruby on Rails] Image slideshow using Skippr
Rails Basic CRUD function implementation procedure scaffold
Implementation of tabs using TabLayout and ViewPager
How to implement image posting using rails
[Rails] Implementation of validation that maintains uniqueness
[Rails / devise] Implementation of account information editing function / Procedure for changing redirect destination
[Rails] Display of multi-layered data using select boxes
[Rails] Schedule management using Full Calendar Yesterday's implementation
Flow to implement image posting function using ActiveStorage
[JQuery] Implementation procedure of AutoComplete function [Java / Spring]
[Rails] I made a draft function using enum
[Nuxt / Rails] POST implementation using axios and devise_token_auth
Try similar search of Image Search using Java SDK [Search]
Ruby on Rails Email automatic sending function implementation
Implementation of search function Learning memo (portfolio creation)
Implementation of delete function (if you have foreign_key)
Rails follow function
[Rails] Notification function
Continued ・ Flow to implement image posting function using ActiveStorage
[Ruby on Rails] Post image preview function in refile
Using PAY.JP API with Rails ~ Implementation Preparation ~ (payjp.js v2)
Rails6: Input the initial data of ActionText using seed
Rails CRUD function implementation ① (new addition, deletion this time)
Try using the query attribute of Ruby on Rails
Explanation of Ruby on rails for beginners ⑦ ~ Flash implementation ~