이미지 팝업 기능
입문
오리지널 프로그램 제작에 이미지의 팝업 기능을 설치했기 때문에 비망록으로 싣고 싶습니다.
이번 구현은 Lightbox2(이미지 등을 클릭하면 팝업 창에서 이미지가 확대되는 스크립트)를 사용하여 이루어졌다.
1. 파일 가져오기
응용 프로그램은 Lightbox2의 코드를 읽는 데 사용됩니다.html.erb의 제목에 기술합니다.
app/views/application.html.erb
<!DOCTYPE html>
<html>
<head>
<!--中略-->
<!-- 以下3行を追記する -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
</head>
<body>
<%= yield %>
</body>
</html>
2. 뷰 편집
팝업 이미지를 표시하려는 곳에 코드를 기술합니다.
표시할 뷰 파일
<%= link_to hoge-image, "data-lightbox": hoge-image do %>
<%= image_tag hoge-image, class:"img"%>
<% end %>
<!-- hoge-imageとしている箇所に、表示させたい画像ファイル名を記述する -->
구현 완료
팝업 기능이 구현되었습니다.
마지막
팝업 기능은 설치하기 전에 난이도가 높다고 생각했지만lightbox2를 사용하면 간단하게 진행할 수 있습니다.
Reference
이 문제에 관하여(이미지 팝업 기능), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/weeksmtwtfs737/items/a814c305764b2d664e88텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
