[링크] jQuery 이미지 슬라이드 갤러리/뷰어 모음

[플러그인] 이미지 갤러리/슬라이드쇼 플러그인 25개 : 2011-08-02 추가

분류를 잘 보고 사용해야 한다

막 갖다 모으는 중이었는데 어느 날 이런 생각이 들었다.

“ie6에서는 돌아갈까?”

역시나 몇 개는 돌아가지 않았다. 그리고 살펴 보니, tutorial(연습용 예제)과 plugin은 분명한 차이가 있다.

tutorial은 보고 따라하는 거다. 재사용성이 좋을 수도 있지만 안 좋을 수도 있다. 즉, tutorial 이라는 제목이 붙은 놈을 갖다 쓰는 건 까다로울 수 있다. 혼자 공부하는 용도로는 좋다.

tutorial이 아닌 경우는 api가 잘 정리돼 있고 ie6 호환성도 잘 유지되는 놈일 게다.

즉, 막 갖다 사용하지 말고 반드시 ie6에서도 돌아가는지 테스트 해 보고 사용해야 한다는 거다.

내가 테스트해 본 몇 개는 ie6 호환이 되는지 써 놨는데 그렇지 않은 경우가 더 많다. 그러니까 알아서 테스트해 보고 사용하기 바란다.

[플러그인] Nivo Slider(IE6 작동)

MIT 라이센스므로 안심하고 사용해도 될 듯. 다소 무거워 보이는 게 흠이다.

IE6에서는 테스트 안 했다고 써 있는데 돌려 보니까 돌아는 간다. 좀 버벅대면서 말이다.

http://nivo.dev7studios.com/

[튜토리얼] Slick Slideshow Using jQuery(IE6 작동)

얘는 내가 실제로 활용해 본 놈인데 썩 어렵지는 않았다. IE6에서도 깔끔하게 돌아간다.

튜토리얼 : http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/

데모 : http://sixrevisions.com/demo/slideshow/final.html

[프로그램] WOW Slider (상업적 이용인 경우 유료 49$, 69$)

이놈은 jQuery 플러그인도 아니다. 윈도우와 맥용 프로그램이 있고 그 프로그램을 사용해 슬라이드 코드를 짜 주는 놈이다. 비상업적 용도로는 무료고, 상업적 사용은 유료(49$, 69$)다.

웹사이트 : http://wowslider.com/automatic-jquery-slider-noir-squares-demo.html

[튜토리얼] 사진으로 가득한 벽(IE6 작동)

화면 전체를 썸네일로 채우고 클릭하면 슬라이드 쇼가 나오게 하는 튜토리얼이다. IE6에서 해 보니 잘 돌아간다.

http://tympanus.net/codrops/2010/05/14/sliding-panel-photo-wall-gallery-with-jquery/

[플러그인] jQuery 슬라이드 쇼 갤러리 14개

http://blueprintds.com/2009/01/20/top-14-jquery-photo-slideshow-gallery-plugins/

[튜토리얼] 콘텐트 슬라이더 튜토리얼 11개

http://blueblots.com/tutorials/11-helpful-jquery-content-slider-tutorials/

[플러그인] 디자인을 향상시켜 주는 jQuery 플러그인 30개

http://line25.com/articles/30-awesome-design-enhancing-jquery-plugins

[플러그인] 이미지 갤러리/슬라이드쇼 플러그인 25개

25 jQuery image galleries and slideshow plugins

[튜토리얼] 가로 스크롤바가 있는 갤러리 튜토리얼(ie6 호환 안 됨)

http://tympanus.net/codrops/2010/10/07/slider-gallery/

[튜토리얼] 쌔끈한 모양의 갤러리 – rotating image slider(ie6,7에서 작동함)

http://tympanus.net/codrops/2011/04/28/rotating-image-slider/

[플러그인] 미리 보기가 지원되는 동영상 최적화 슬라이더 – 유료(12$)

http://pixelentity.com/previews/components/estro/

[플러그인] 터치에 최적화된 플러그인 jQuery TouchTouch – 무료(MIT), IE8 이상

IE7에선 제대로 작동하지 않았다.

CSS3를 사용해 미끄러지는 효과를 낸다. 따라서 IE8,9 모두에서 미끄러지는 효과가 나오지 않는다.

소개 : http://tutorialzine.com/2012/04/mobile-touch-gallery/

다운로드 : https://github.com/martinaglv/touchTouch

[플러그인] 반응형, 모바일 친화적 라이트박스, jQuery Flare – 유료(10$), IE7 이상(6는 테스트 안 해 봤음)

소개와 데모 : http://pixelentity.com/previews/components/flare/

갤러리 타입인 경우, 하단에 갤러리 내비게이션을 자동으로 만들어 주는 게 좋다. IE7까지는 잘 돌아간다. (단, 7에서 하단 갤러리 내비게이션 높이가 약간 어그러진다.) IE6에서는 테스트해 보지 않았다.

[플러그인] 첫화면에 제품 특징 소개 같은 거 할 때 적합해 보이는 슬라이드 플러그인. Sequence.js – 무료(MIT+GPL), IE7 이상

CSS3 트렌지션을 사용한다. 파폭과 크롬에선 미려한 효과가 나온다. IE7~9에서는 일반적 슬라이드로 작동한다. 이미지 슬라이더로 사용할 수 있는지는 모르겠고, 제품 소개 같은 거 할 때 사용하면 아주 좋을 것 같다. (아마 이미지 슬라이더로도 사용할 수 있을 텐데, 적합한지는 모르겠다.)

웹사이트 가기

[튜토리얼] 애플 스타일의 멋진 아이템 슬라이드. – IE7 작동 확인.

아이템이 샤샤샥하고 튀어나온다. 튜토리얼이다. 튜토리얼이니 알아서 적용하면 될 거다.

튜토리얼 | 데모

55 Best jQuery Carousel Plugins

2012-12-18 작성된 영어 글이다. http://www.tripwiremagazine.com/2012/12/jquery-carousel.html

[플러그인] bxSlider, 반응형 만능 슬라이드 – IE7 지원. WTFPL 라이센스.

갤러리 슬라이드, 여러 아이템 슬라이드, 썸네일 슬라이드 등 거의 모든 기능이 있는 슬라이드다. FAQ에 보면 IE7,8에서 테스트했고 괜찮다고 한다. 하지만 IE8 이하에서 작업해야 한다면 불쌍하다고.

WTFPL 라이센스는 Do What the Fuck You Want to Public License의 약자로, 한마디로 “니 맘대로 하세요” 라이센스다.

웹사이트 가기 | 여러 아이템 슬라이드는 여기를 보면 된다.

[플러그인] rcarousel, 반응형은 아니지만 만능 슬라이드 – IE7 지원. MIT 라이센스.

갤러리 슬라이드, 여러 아이템 슬라이드 등 거의 모든 기능이 다 있는 슬라이드다. 예전에 알았다면 환호했겠지만, bxSlide와 함께 발견한 탓에 환호를 하진 않았다. IE7 이상을 지원한다고 밝혀 놓고 있다.

웹사이트 가기 | 여러 아이템 슬라이드는 여기를 보면 된다.

[플러그인] Animated Responsive Image Grid – 갤러리는 아니고, 이미지를 격자로 늘어 놓고 애니메이션으로 전환. IE7 지원. CC BY 2.0 라이센스.(상업용 사용 가능)

라이센스는 CC BY 2.0(한글)이다. 사용할 때 저작자를 반드시 표시해야 한다. 슬라이드 갤러리는 아니지만 꽤 인상적으로 이미지들을 표시해 주기 때문에 갈무리한다. 동영상은 데모3과 데모5다.

웹사이트 | 데모 | GitHub

[플러그인] jGallery. IE9 이상. 상업용 사용 가능.

웹사이트 | 데모

대표글

“[링크] jQuery 이미지 슬라이드 갤러리/뷰어 모음”에 대한 12개의 응답

  1. […] 있는 내용은 jQuery 슬라이드 뷰어 모음으로 옮겼다. 앞으로 내가 아는 모든 슬라이드를 그쪽으로 집중할 […]

  2. […] 관련 링크들은 [링크] jQuery 이미지 슬라이드 갤러리/뷰어 모음 으로 모으고 있다. 거기 가면 유용한 정보를 좀더 얻을 수 있을 거다. 이 […]

  3. 정리 고맙습니다~! 이중에 하나 써야겠어요 ^^

    1. 감사합니다. ^^

  4. 좋은 정보 감사드립니다.

    1. 네 ^^ 댓글 감사합니다.

  5. 잘 보고 갑니다. 즐겨찾기 해놔야겠네요^^

    1. 네 ^^ 감사합니다.

  6. 정리 잘 해주셨네요~^^ 감사합니다~!!!

    1. 감사합니다. ^^

  7. 좋아요 ^^

    1. 네 ㅋ

녹풍 에 응답 남기기응답 취소