Google 이미지와 같이 미리보기 이미지를 확장하는 방법
Google 이미지는 고유 한 UI를 다양한 웹 사이트의 미리보기 이미지 미리보기. 이 썸네일 중 하나를 클릭하면 세부 정보와 그림이 더 확대 된 화면이 펼쳐집니다..
그것은 내가 지금까지 사용해 왔던 최고의 이미지 갤러리 기능 중 하나입니다., Gridder.js로 복제 할 수 있습니다..
이 무료 jQuery 플러그인은이 효과와 일치하는 플러그인을 만들어서 Google의 놀라운 UX의 발자취를 따라 간다. 너는 할 수있다. 사진 갤러리를 Google 이미지 스타일 갤러리로 전환하십시오. 모든 동일한 애니메이션 및 디스플레이 기능.
나는 유쾌 하게이 플러그인과 함께 제공되는 사용의 속도와 용이성에 놀랐습니다. 미리보기 이미지를 클릭하면됩니다. 즉시 더 큰 샷을 표시합니다. 애니메이션은 매우 깨끗합니다..
이미지들 설명 텍스트를위한 섹션 포함 당신이 사진과 관련있는 약간의 세부 또는 링크를 추가하고 싶은 경우에 대비하여. 이것은 이미지에 초점을 맞추는 목표를 가진 단순한 포트폴리오 사이트에서 특히 잘 작동합니다..
그 위에, 당신은 할 수있다. Ajax를 통해 콘텐츠 가져 오기. 이렇게하면 동적 축소판 만들기 다른 웹 사이트 또는 API를 통해 콘텐츠를 가져옵니다..
각 클릭 이벤트 콜백 메소드를 제공합니다., 그래서 다른 플러그인이나 JavaScript 기능을 Gridder와 함께 실행할 수도 있습니다. 옵션이 너무 많기 때문에 실제로 전체 그리드 프레임 워크처럼 느껴집니다.!
Gridder 이후 jQuery에서 실행된다., 최신 버전이 종속성으로 필요합니다. 그러나 Gridad.js 파일과 함께 필요한 모든 기능을 제공하며 몇 줄의 HTML 만 있으면 그리드를 부드럽게 실행할 수 있습니다..
당신은 GitHub 페이지를 체크 아웃해야합니다. 전체 설정 지침 하지만 여기에 빠른 미리보기 HTML의 모습 :
모든 콘텐츠 자바 스크립트를 통해 가져옵니다., 원하는대로로드 할 수 있습니다..
옵션이 포함 된 매우 다양한 플러그인입니다. 애니메이션 속도 변경, 여유 시간 단축, 닫기 버튼 스타일 및 스크롤 오프셋 위치 사용자가 새 축소판을 클릭 할 때.
초보 개발자와 프로 개발자 모두이 플러그인에서 많은 가치를 발견 할 것입니다. 그러나 이것이 당신에게 적합한 지 확신 할 수 없다면, 라이브 Gridder 데모 페이지를보고 놀아라..
