홈페이지 » 툴킷 » 이미지를 매체와 같이 확대하는 방법

    이미지를 매체와 같이 확대하는 방법

    블로깅 플랫폼 매체는 사용자 정의 이미지 확대 / 축소 효과 그들의 블로그 페이지에. 사용자가 이미지를 클릭 할 때마다 자동으로 더 큰 크기로 확대됩니다..

    매체에 큰 영향을 미치고 확실히 독특하지만, 쉽게 복사 할 수있는 것이 아닙니다..

    이제, MediumLightbox 스크립트, 그 어느 때보 다 쉬워졌습니다. 이 JS 스크립트는 가볍고 어떤 웹 사이트 나 블로그에도 쉽게 추가 할 수 있습니다..

    이것이 어떻게 작동하는지보고 싶으시면 라이브 데모 페이지 창조자 Davide Calignano 주최.

    그는 잠시 동안 정확한 전환 및 맞춤 애니메이션 효과를 중간 이미지의 거울 이미지 만들기 zoom. 전체 도서관은 순수한 자바 스크립트로 작성, 그래서 그것은 어떤 3에 의존하지 않습니다.rd jQuery와 같은 타사 스크립트.

    그것을 설정하기 위해 약간의 JS를 알아야 할 것입니다.하지만 전문가가 될 필요는 없습니다..

    각 이미지는 데이터 - * 속성 전체 크기의 높이와 너비를 설정하기위한 것입니다. 역동적으로 끌어 들였다. 라이트 박스 플러그인에서. 설치 코드는 매우 간단하며 이미지 자체를 목표로 삼다., 또는 용기는

    요소.

    다음은 플러그인을 실행하는 데 필요한 단일 코드 스 니펫입니다.

     MediumLightbox ( 'figure.zoom-effect'); 

    함수 내부에서 선택기를 건네 준다. 모든 요소 (예 :.

    ) 와 더불어 .확대 / 축소 효과 수업. 이 클래스는 구체적으로 정의 된 MediumLightbox 스타일 시트에서 페이지에서도이 방법을 사용하는 것이 가장 좋습니다..

    그리고 설정이 완료되면 모든 설정이 완료됩니다.!

    페이지 콘텐츠 영역에서 모든 이미지를

    태그를 호출합니다. 그들은이 사랑스러운 Medium Click-to-Zoom 효과를 자동으로 얻습니다. 데스크톱 및 모바일 사용자 모두에게.

    이 스크립트의 사본을 다운로드하고 시작하려면 기본 GitHub 저장소를 방문하십시오. 여기에서 코드 스 니펫과 함께 문서화 복사를하면 빠르게 설정 될 수 있습니다..