Fancybox alternative to Lightbox

이미지를 웹페이지에 표시할 때 대개는 썸네일 이미지를 보여 주고 원하는 이미지를 클릭할 때 큰 이미지를 보여주는 방식으로 구현한다.

이 글에서는 레일스 프로젝트에서 Fancybox3를 이용하여 이미지 갤러리 기능을 구현하는 방법을 간략하게 설명한다.

레일스 5.2에서 ActiveStorage를 이용하여 이미지 업로드를 구현한 것으로 가정한다.

1. Gem 준비

Gemfile :

gem 'fancybox3', github: 'fobiasmog/fancybox3'

2. Javascript 추가

application.js :

···
//= require fancybox.min
···

3. Stylesheet 추가

application.scss :

···
@import "fancybox.min";
···

4. Fancybox 활성화

assets/javascripts/fancy box_init.coffee :

$(document).on 'turbolinks:load', ->
  $('[data-fancybox="gallery"]').fancybox {
    # options
  }

5. View 파일 작성

views/[resource-name]/show.html.erb :

<%= link_to image_tag(picture.variant(resize: '200x200^', extent: '200x200')), url_for(picture), data: { fancybox: 'gallery'} %>

6. Options

https://fancyapps.com/fancybox/3/docs/