2013-05-30 1 views
0

재 설계 한 rijks 박물관 사이트에서 우연히 만났고 여기에 몇 가지 놀라운 기능이 있습니다. 하나는 특히 이미지 줌입니다. 내 프로젝트 중 하나에서 이와 같은 것을하고 싶지만 그것을 해부 할 수는 없습니다.이 확대 이미지 갤러리는 어떻게 생성됩니까?

어떻게했는지 또는 어떤 플러그인을 사용했는지에 대한 아이디어가 있습니까? 어떤 통찰력도 크게 감사 할 것입니다.

https://www.rijksmuseum.nl/en/explore-the-collection/overview/rembrandt-harmensz-van-rijn/objects#/SK-C-597,3

https://www.rijksmuseum.nl

감사합니다! Danny

답변

0

동일하게 구현하는 데 도움이되는 여러 jquery 라이브러리/플러그인이 있습니다.

모든 JQuery와 이미지 줌 라이브러리가 백그라운드에서 추가, 큰 이미지를로드 및 호버에 그것의 작은 부분을 표시하는 경우는,이 ​​post

+0

감사합니다. 좋은 링크. 대부분은 마우스를 올리면 확대되고 이미지의 일부분 만 확대됩니다. 나는 그들이 이미지 오버레이와 함께 [leafletjs] (http://www.leafletjs.com)를 사용하고 있다고 생각한다. 그것을 재창조하는 jsFiddle을 발견했습니다 : [jsfiddle.net/tDGXr/](http://jsfiddle.net/tDGXr/). –

+0

많은 사이트에서 압축 도구를 사용하기 때문에 어떤 라이브러리를 사용했는지 파악하기가 어려워졌습니다. 그러나 철학이 같을 것이라고 생각합니다. 행운을 빕니다 – karthikr

0

대부분 볼 수 있습니다. 이것은 잘 확장되지 않습니다 - 아주 가까이에서 확대하려면 다중 메가 픽셀 이미지를 미리로드해야합니다.

무엇 국립 미술관 (뿐만 아니라 aforementioned JSfiddle 등)이 때로는 깊은 줌이라고하지 : 그것은 비 지리적 이미지로 온라인지도 네비게이션 (예를 들어, Google지도)의 개념을 적용합니다.

불행히도이 방법을 사용하려면 몇 가지 추가 작업이 필요합니다. 원본 이미지를 다른 줌 레벨로 미리 타일로 분할해야하며이 파일을 픽셀 좌표계와 연결해야합니다. a script-based approach with Leaflet.js에 대한 안내를 참조하십시오.

관련 문제