목록#gallery (4)

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

[해피CGI][cgimall] 반응형 이미지 갤러리 GammaGallery

반응형 이미지 갤러리로 클릭시 모달창으로 이미지가 표시되며,제한된 그림 요소에 대해 유사한 반응 이미지 방식을 사용하는 이미지 갤러리를 만들어 줍니다. 브라우저 크기에 따라 반응형으로 이미지 갤러리가 정렬됩니다. 클릭시 이미지 썸네일이 슬라이딩으로 처리되는 형태의 모달창으로 구현됩니다. 핵심소스인 와 하단에 소스 및 설정 스크립트 부분을 설정하여 제어가 가능합니다.
웹프로그램밍 자료실/JAVA 자료 2020. 5. 19. 09:07
[해피CGI][cgimall] Touch-friendly Carousel & Gallery - jQuery isystkSlider

isystkSlider 는 다양한 기능들을 지원하는 이미지 슬라이더 프로그램 입니다. 다운로드 받은 파일의 압축을 해제한후 나오는 dist/index.html 파일을 웹브라우저로 열어보면 데모를 확인이 가능합니다. 위 예제는 단순한 이미지 슬라이더의 예제입니다. 이미지 슬라이더 + 갤러리 형태의 예제입니다. 모바일에서 사용하면 좋을만한 예제입니다. 샘플용 HTML파일의 소스코드를 열어보면 이미지 슬라이더를 만들기 위한 HTML태그들을 어떻게 구성해야 하는지 확인이 가능합니다 슬라이더를 작동시키는 다양한 옵션들이 존재하네요.
웹프로그램밍 자료실/JAVA 자료 2020. 4. 22. 09:09
[해피CGI][cgimall] Justified Image Grid With Lightbox - jQuery Flex Photo Gallery

jQuery 와 CSS flexbox 로 만들어진, 반응형의 사진 갤러리 입니다. 첨부된 파일의 압축을 풀어서 나오는example/index.html 파일을 웹브라우저 열어보면 데모를 확인이 가능합니다. 반응형이어서, 화면의 크기에 맞게 이미지의 배열이 적당하게 조절이 됩니다. 이미지를 클릭해보면 해당 이미지가 light box 로 팝업이 됩니다. 좌우 화살표를 이용해서 다음 이미지나, 이전 이미지로 슬라이드도 됩니다. 위 그림 처럼 index.html 파일의 소스코드도 상당히 간단합니다.
웹프로그램밍 자료실/JAVA 자료 2020. 3. 30. 09:13
[해피CGI][cgimall] Javascript & CSS 를 이용한 갤러리

Simple Responsive Lightbox Gallery with CSS & jQuery 를 소개 합니다. 사이트의 설명에는 jQuery 를 사용했다고 나와 있지만 실제 코드를 보면 jQuery 를 사용하고 있진 않습니다. ^^ 생각보다 가벼운 Script 와 CSS 를 사용하여 플러그인 반응이 빠릅니다. 이미지 출력 방식은 팝업 모달 방식으로 이미지를 표시합니다. 반응형코드로 모바일에서도 작동하는데 문제가 없습니다. 저는 index.html 을 이용하여 확인해 보았습니다. 생각보다 소스는 간단 합니다. CSS 호출 2개와 jQuery 호출 1개가 끝입니다. ^^
웹프로그램밍 자료실/JAVA 자료 2019. 7. 31. 09:09
Prev 1 Next