홈페이지 » UI / UX » jqGifPreview가 포함 된 Facebook처럼 애니메이션 GIF 포함

    jqGifPreview가 포함 된 Facebook처럼 애니메이션 GIF 포함

    트위터와 페이스 북에는 많은 사람들이 있습니다. 애니메이션 GIF 공유 매일. 이들이 모두 자동으로 재생되는 경우 피드에서 끔찍할 수 있습니다..

    두 네트워크 모두 클릭 투 프리뷰 기능 모든 GIF 용. 이를 통해 사용자는 그들이보고 싶은 애니메이션 애니메이션 시작 / 정지 시점 선택.

    와 더불어 jqGifPreview 플러그인, 이 기능을 웹 사이트에 가져올 수 있습니다..

    무료 jQuery 플러그인 페이지의 모든 GIF에서 작동하거나 원하는 것을 구체적으로 타겟팅 할 수 있습니다. 환상적인 리소스이지만 설정하는 데 조금 시간이 걸립니다..

    일시 중지 된 GIF는 실제로 방금입니다. 애니메이션의 한 프레임, 페이지에 표시.

    불행히도,이 플러그인 하지 않습니다 GIF에서 정적 사진을 자동으로 가져옵니다. 너를 위해서. 그러나 PHP 나 다른 백엔드 언어를 사용하여이 작업을 수행 할 수 있으므로 약간의 코드로 자동화 할 수 있습니다.

    이 플러그인은 data- * 속성을 사용하여 GIF 이미지 위치 저장. 사용자가 이미지를 클릭하면 이미지가 자동으로 src 이미지의 속성 및 화면에 표시.

    간단하고, 효과적이고, 명확하게 청초한 효력! 필요한 것은이 플러그인을위한 CSS / JS 파일입니다. GitHub에서 직접 가져 오기. 그리고 물론, 당신은 jQuery 사본이 필요하다., 너무.

    거기에서 다음과 같이 이미지를 설정합니다.

      

    메인 src 속성은 정적 인 그림이 들어있다.. 생성하기위한 스크립트를 만들거나 각 GIF에 대한 정적 샷을 수동으로 편집 및 업로드 할 수 있습니다.

    그만큼 데이터 gif 속성 실제 움직이는 GIF를 보유하고있다. 클릭하면 전환됩니다. 주 이미지 클래스를 대상으로 삼다. (이 경우에는 .myImg). 이제는 jQuery 한 줄만 있으면됩니다.

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

    확실히, 이번 달에 본 가장 멋진 jQuery 플러그인 중 하나이며 설치가 매우 쉽습니다..

    더 많은 정보를 얻으려면 GitHub 페이지 그리고 또한 라이브 데모 미리보기 개발자 웹 사이트에서 호스팅.