이미지를 웹페이지에 표시할 때 대개는 썸네일 이미지를 보여 주고 원하는 이미지를 클릭할 때 큰 이미지를 보여주는 방식으로 구현한다.
이 글에서는 레일스 프로젝트에서 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'} %>
선생님 안녕하세요. 일본에서 루비온레일즈로 서비스를 개발하고있는 직장인입니다. 한국에 루비나 레일즈커뮤니티가 있는지 문득 궁금해져서 알아보던 중에 rorlab.org를 알게되었습니다. 최근에 유지보수가 잘 되어지고 있지 않은지 회원가입이 안되더라구요. 사이트가 지금 비활성상태라고 보아야할까요??
점검해 보겠습니다.