웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] jquery 3D Wall Gallery 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] jquery 3D Wall Gallery

해피CGI윤실장 2021. 9. 15. 09:32

* juqery 3D Wall Gallery


3D 효과가 있는 jquery 갤러리
- 이미지를 가리키면 설명을 볼 수 있습니다

- 상단의 jQuery UI 슬라이더를 사용하여 이미지를 슬라이드합니다

- 마우스 휠을 사용하여 이미지를 스크롤 합니다

- 하단의 썸네일 미리보기를 사용하여 이미지 선택

- URL에 있는 이미지에 대한 해시 앵커를 사용하여 직접 가져올 수 있습니다

 







* 적용방법

첨부된 압축파일을 다운로드 하여 원하는 웹경로에 업로드합니다

 

적용하고자 하는 웹문서에 css 파일을 호출합니다

 

 

아래와 같이 이미지 태그와 앵커를 각각 지정해줍니다

 

 

아래와 같이 각 앵커 이미지에 맞는 썸네일 이미지도 지정해줍니다

 

 

그리고 하단에 제공되는 js 파일 및 jquery 파일을 호출합니다

 

 

 

적용된 화면은 아래와 같습니다

 

첨부된 압축파일에 있는 index.html 파일을 참고하시면 도움이 되실겁니다

 

 

 

 

Comments