jquery를 이용한 GIF 미리보기, 동영상처럼 제어하기

다음포털이나 페이트북에 간혹 이런효과 보신적 있으실겁니다.

gif 이미지를 동영상 플레이버튼 누르면 실행되듯이 구현효과 입니다.

jqGifPreview  설명

GIF 이미지는 많은 프레임으로 구성되어 있으므로 GIF 이미지의 크기는 일반 이미지와 비교할 때 많습니다. 

GIF 이미지를 먼저로드하는 것은 좋지 않으며 모든 GIF 이미지에 대해 하나의 일반 미리보기 이미지를 유지하는 것이 좋습니다. 

다운로드 경로

https://github.com/SodhanaLibrary/jqGifPreview

사용방법

jQuery 추가합니다.

<script  src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

jqGifPreview의 CSS 및 JS 추가합니다.

<link  rel="stylesheet"  href="jqGifPreview/jqGifPreview.css" />
<script  src="jqGifPreview/jqGifPreview.js"> </script>

HTML마크업

<img class="myImg" src="sample_first_frame.png" data-gif="sample_giphy.gif" />

data-gif : gif 이미지 경로가 들어갑니다.

src : gif 미리보기 이미지 경로가 들어갑니다.

JS코드

$(".myImg").jqGifPreview();

간단하게 gif 미리보기 이미지 만들수 있는 사이트입니다.

gif를 1번에 드래그해서 업로드하면 2번다운로드하면 미리보기이미지를 다운 받을수 있습니다.

주소는 http://flaticon.sodhanalibrary.com/get_first_frame_of_gif_image_online.html 입니다.

너무 이쁜 :) 샘플예제입니다.