PDA

View Full Version : [Share] 25 jQuery Image Gallery/Slider Tutorials and Plugins (cực cool)



bavuongduongpho
18-04-2011, 11:15 PM
jQuery image galleries and sliders (http://ketnoia2.tk) rất phổ biến trên các trang web danh mục đầu tư và cũng hữu ích cho bất kỳ loại khác của trang web để hiển thị hình ảnh (http://ketnoia2.tk). May mắn thay, thêm một thư viện jQuery không phải là khó khăn, ngay cả khi bạn không có nhiều kinh nghiệm với JavaScript và jQuery. (http://ketnoia2.tk) Trong bài này chúng ta sẽ thấy các hướng dẫn và bổ sung có thể cung cấp cho bạn những nguồn tài nguyên mà bạn cần để có được một bộ sưu tập của thanh trượt trên trang web của bạn.

Create an Image Rotator with Description (CSS/jQuery) (http://designm.ag/tutorials/image-rotator-css-jquery/)
http://vandelaydesign.com/images/0709/jquery/16.jpg (http://designm.ag/tutorials/image-rotator-css-jquery/)
jQuery Image Gallery/News Slider with Caption (http://www.queness.com/post/443/jquery-image-gallerynews-slider-with-caption-tutorial)
http://vandelaydesign.com/images/0709/jquery/1.jpg (http://www.queness.com/post/443/jquery-image-gallerynews-slider-with-caption-tutorial)
Full Screen Image Gallery Using jQuery and Flickr (http://devkick.com/blog/full-screen-image-gallery-using-jquery-and-flickr/)
http://vandelaydesign.com/images/0709/jquery/12.jpg (http://devkick.com/blog/full-screen-image-gallery-using-jquery-and-flickr/)
Create a Slick and Accessible Slideshow Using jQuery (http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/)
http://vandelaydesign.com/images/0709/jquery/20.jpg (http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/)
Fancy Thumbnail Hover Effect with jQuery (http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/)
http://vandelaydesign.com/images/0709/jquery/23.jpg (http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/)
Simple jQuery Image Slideshow with Semi Transparent Caption (http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption)
http://vandelaydesign.com/images/0709/jquery/11.jpg (http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption)



http://s3.buysellads.com/1240727/17641-1267634813.jpg (http://stats.buysellads.com/click.go?z=1240727&b=324847&g=&s=&sw=1024&sh=768&br=firefox,4,win&r=0.29084407281817126&link=http://www.wix.com/start/matrix?utm_campaign=ma_vandelaydesign.com&experiment_id=vandelaydesign.com1)

25 jQuery Image Gallery/Slider Tutorials and Plugins

Published August 6th, 2009 in Web Development (http://vandelaydesign.com/blog/category/web-development/) jQuery image galleries and sliders are very common on portfolio sites and are also useful for any other type of site for displaying images and photos. Fortunately, adding a jQuery gallery does not have to be difficult, even if you don’t have much experience with JavaScript and jQuery. In this post we’ll see tutorials and plugins that can provide you with the resources that you need to get a gallery of slider on your site.
jQuery Image Gallery/Slider Tutorials:

Create an Image Rotator with Description (CSS/jQuery) (http://designm.ag/tutorials/image-rotator-css-jquery/)
http://vandelaydesign.com/images/0709/jquery/16.jpg (http://designm.ag/tutorials/image-rotator-css-jquery/)
jQuery Image Gallery/News Slider with Caption (http://www.queness.com/post/443/jquery-image-gallerynews-slider-with-caption-tutorial)
http://vandelaydesign.com/images/0709/jquery/1.jpg (http://www.queness.com/post/443/jquery-image-gallerynews-slider-with-caption-tutorial)
Full Screen Image Gallery Using jQuery and Flickr (http://devkick.com/blog/full-screen-image-gallery-using-jquery-and-flickr/)
http://vandelaydesign.com/images/0709/jquery/12.jpg (http://devkick.com/blog/full-screen-image-gallery-using-jquery-and-flickr/)
Create a Slick and Accessible Slideshow Using jQuery (http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/)
http://vandelaydesign.com/images/0709/jquery/20.jpg (http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/)
Fancy Thumbnail Hover Effect with jQuery (http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/)
http://vandelaydesign.com/images/0709/jquery/23.jpg (http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/)
Simple jQuery Image Slideshow with Semi Transparent Caption (http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption)
http://vandelaydesign.com/images/0709/jquery/11.jpg (http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption)

Slider Gallery (http://jqueryfordesigners.com/slider-gallery/)
http://vandelaydesign.com/images/0709/jquery/5.jpg (http://jqueryfordesigners.com/slider-gallery/)
Building a jQuery Image Scroller (http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-image-scroller/)
http://vandelaydesign.com/images/0709/jquery/8.jpg (http://net.tutsplus.com/tutorials/javascript-ajax/building-a-jquery-image-scroller/)
Sliding Boxes and Captions with jQuery (http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/)
http://vandelaydesign.com/images/0709/jquery/9.jpg (http://buildinternet.com/2009/03/sliding-boxes-and-captions-with-jquery/)
Create Beautiful jQuery Slider (http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html)
http://vandelaydesign.com/images/0709/jquery/10.jpg (http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html)
How to: Create a Fancy Image Gallery with jQuery (http://www.catswhocode.com/blog/how-to-create-a-fancy-image-gallery-with-jquery)
http://vandelaydesign.com/images/0709/jquery/19.jpg (http://www.catswhocode.com/blog/how-to-create-a-fancy-image-gallery-with-jquery)
Coda Slider Effect (http://jqueryfordesigners.com/coda-slider-effect/)
http://vandelaydesign.com/images/0709/jquery/25.jpg (http://jqueryfordesigners.com/coda-slider-effect/)
jQuery Image Gallery/Slider Plugins:


Supersized (http://www.buildinternet.com/project/supersized/)
http://vandelaydesign.com/images/0709/jquery/7.jpg (http://www.buildinternet.com/project/supersized/)
Galleria (http://devkick.com/lab/galleria/)
http://vandelaydesign.com/images/0709/jquery/4.jpg (http://devkick.com/lab/galleria/)
Gallery View (http://plugins.jquery.com/project/galleryview)
http://vandelaydesign.com/images/0709/jquery/2.jpg (http://plugins.jquery.com/project/galleryview)
jQuery lightBox (http://leandrovieira.com/projects/jquery/lightbox/)
http://vandelaydesign.com/images/0709/jquery/3.jpg (http://leandrovieira.com/projects/jquery/lightbox/)



Nguồn: http://ketnoia2.tk/Blog/-Share-25-jQuery-Image-Gallery-Slider-Tutorials-and-Plugins-cuc-cool-KetNoiA2-TK/ (http://ketnoia2.tk)

bavuongduongpho
18-04-2011, 11:16 PM
Gallerific (http://www.twospy.com/galleriffic/#1)
http://vandelaydesign.com/images/0709/jquery/6.jpg (http://www.twospy.com/galleriffic/#1)
Easy Slider 1.5 (http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding)
http://vandelaydesign.com/images/0709/jquery/13.jpg (http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding)
Pikachoose (http://pikachoose.com/)
http://vandelaydesign.com/images/0709/jquery/14.jpg (http://pikachoose.com/)
S3 Slider – jQuery Image Gallery (http://www.visual-blast.com/javascript/s3slider-jquery-image-gallery-plugin/)
http://vandelaydesign.com/images/0709/jquery/15.jpg (http://www.visual-blast.com/javascript/s3slider-jquery-image-gallery-plugin/)
Sliding Image Gallery (http://plugins.jquery.com/project/SlidingGallery)
http://vandelaydesign.com/images/0709/jquery/17.jpg (http://plugins.jquery.com/project/SlidingGallery)
Flickr Gallery (http://plugins.jquery.com/project/flickrGallery)
http://vandelaydesign.com/images/0709/jquery/18.jpg (http://plugins.jquery.com/project/flickrGallery)
Simple Controls Image Gallery (http://plugins.jquery.com/project/simplecontrolsgallery)
http://vandelaydesign.com/images/0709/jquery/21.jpg (http://plugins.jquery.com/project/simplecontrolsgallery)
Popeye (http://plugins.jquery.com/project/popeye)
http://vandelaydesign.com/images/0709/jquery/22.jpg (http://plugins.jquery.com/project/popeye)
Smooth Div Scroll (http://plugins.jquery.com/project/SmoothDivScroll)
http://vandelaydesign.com/images/0709/jquery/24.jpg (http://plugins.jquery.com/project/SmoothDivScroll)