깃허브 블로그(7) jekyll blog 이미지 확대기능 추가

플러그인 관련 링크 https://dimsemenov.com/plugins/magnific-popup/
jQuery 또는 Zepto.js를 사용하는 사용자에게 반응형 팝업 및 다이얼로그를 처리할 수 있는 성능에 초점을 맞춘 플러그인 이다.
사용자의 PC,모바일 모든 디바이스에서 동작한다.
모듈식으로 가벼운 플러그인이다. online build tool로 사용할 js를 컴파일 할 수 있다.

magnific-popup document에 build tool을 이용해서 Maginific Popup javascript 및 CSS 컴파일 하거나 github 레포지토리의 dist/ 디렉토리 에서 가져온다.

build tool 링크

빌드 할 목록을 선택하고 Generate build 버튼을 클릭해서 빌드해서 복사하여 js 파일을 만들어 사용한다.

css 코드 내용도 복사해서 파일을 생성한 뒤 사용한다.

html 문서에 CSS,javascript 파일과 initialization 코드를 포함시킨다.

<html>
  <head></head>
  <body>
    <link rel="stylesheet" href="magnific-popup.css">
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="jquery.magnific-popup.min.js"></script>

원하는 경로에 js 및 css 파일을 위치 시켜서 html 문서에 포함 한다.

magnific popup 사용 테스트
테스트 프로젝트 github repository 링크

jekyll minimal-mistakes 블로그에서 사용하기

minimal-mistakes 에서는 이미 magnific-popup 관련 모듈이 포함되어있다.

markdown 문서에 아래와 같이 이미지에 링크만 걸어주고 이미지를 클릭하면 확대된다.

[![](https://shellcode777.github.io/assets/images/myimage.png)](https://shellcode777.github.io/assets/images//myimage.png)

공유하기

Twitter Facebook LinkedIn