En el blog de diseño de designer terminal publicaron una lista de 18 galerías en jquery para los sitios web, una buena colección. Cada una viene con su link del tutorial y su demo
Image galleries and sliders are very popular in modern web designing from past 2 or 3 years. Not only image galleries, but jQuery is also very popular nowadays because it is very fast and accurate JS library, which helps to simplify different difficult event handling and smooth animation. Developers are making extensive use of jQuery in every field of web design to make it versatile and sleek. Many jQuery plugins are developed for creating powerful and attractive image galleries, sliders and slideshows; today I have collected 18 best jQuery Slider/Image Gallery Tutorials and Plugins for you. Enjoy creating beautiful galleries with these excellent jQuery resources.
1. Supersized
Supersized is a Full Screen Background/Slideshow jQuery plugin which resizes images to fill browser while maintaining image dimension ratio. It also cycles images via slideshow with transitions and preloading. Navigation controls enables you to pause/play and forward/back.
2. Galleriffic
Galleriffic is a jQuery plugin that handled high volumes of photos while economizing bandwidth and provide flawless gallery browsing experience. It supports keyboard navigation and image captions. Multiple galleries can be created per page with very easy configuration.
3.GalleryView
GalleryView is a content-gallery plugin which can display any HTML content in an animated gallery view. It requires jQuery Timers plugin to facilitate timing of animation events. You can add title, caption and description if you want to explain what the image is all about.
4. Thumbnails Navigation Gallery
This tutorial will demonstrate how to create an elegant gallery with scrollable thumbnails that slide out from a navigation. jQuery and CSS3 will be used to create a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked, the thumbnail container will scroll automatically on mouse hover.
5. Full Page Image Gallery with jQuery
In this tutorial you will learn to create a full-page gallery with scrollable thumbnails and a scrollable full screen preview. The thumbnail bar at the bottom of the page will scroll automatically when user moves the mouse.
6. Galleria
The process of creating visually appealing image galleries for the web and mobile devices made easy with this image gallery framework, which is written in JS.
7. Hover Slide Effect with jQuery
In this tutorial you will create an image area with several images that slide out when you hover over them, revealing other images on random basis.
8. Parallax Slider with jQuery
In this tutorial you will create a vibrant image slider using parallax principle to move different backgrounds when you slide to an image in order to create some nice perspective.
9. Slider Gallery with jQuery
This tutorial will demonstrate how to create an expanding thumbnails area which opens once an album is chosen. The thumbnails will scroll to the end and move back to the first image. The user can scroll through the thumbnails by using the slider controls. When a thumbnail is clicked, it moves to the center and the full image preview opens. Navigating though the images will make them slide in and out from the sides, moving the underlying thumbnails container. When the preview is closed, the full image will fade back to the thumbnail.
10. AD Gallery
Ad Gallery is another jQuery gallery plugin having many diverse features. You can customize whether you want image to slide in or fade in, use keyboard arrows to move back and forth, click on the edge of the big image to go to the next one and many more. It is compatible with all major browsers.
11. PikaChoose
Pikachoose is an easy to use and lightweight jQuery plugin that make presentation of photos very comfy. Photos can be demonstrated as slideshows, navigation buttons and auto play. It can be installed and customize with ease, also, it comes with very advance features that come up with other complex gallery plugins.
12. Fresh Sliding Thumbnails Gallery with jQuery and PHP
This is another tutorial showing how to create a full image gallery with nice thumbnail area that scrolls automatically on mouse hover, but it will allow the user to slightly zoom into picture by clicking on it. The thumbnails bar will slide down and the image will get resize according to the screen size.
13. SIDEWAYS
Sideways is an excellent full screen image galley created using jQuery framework and simple CSS which supports looping and loading new image with different dimensions updates. The script utilizes native browser scrollbars and click to open panel mode, extremely suitable for touch devices.
14. prettyPhoto
prettyPhoto is a jQuery lightbox clone supporting almost every kind of media including flash, iframes and videos. It is very easy and flexible to setup and customize providing support for all major web browsers even IE6. Useful APIs enables it to be launched from nearly anywhere including Flash.
15. Beautiful Photo Stack Gallery with jQuery and CSS3
In this tutorial you will create an album as a slider and when an album is chosen, the images of the album will be shown as beautiful photo stack. Using photo stack view, you can browse through the images by putting the top most images behind the entire stack with a slick animation.
16. Multimedia Gallery for Images, Video and Audio
Using this gallery tutorial you can integrate video and audio as exhibit pieces along images. An XML file for defining the items in the gallery will be used along with a PHP class with an XSL Style sheet to transform the data. For video files you can define a link to a YouTube video.
17. YoxView
YoxView is a free and open source media and image viewer jQuery plugin which work just like a Lightbox. It is extremely easy to integrate, supports images, inline content, iframes, flash and online video playing via YouTube and Vimeo. Different skins are available to customize according to the viewer’s mood. It is search engine friendly and compatible with every major browser.
18. Minimalistic Slideshow Gallery with jQuery
In this tutorial you will learn to create a simple and minimalistic slideshow gallery, which will have a container with slideshow and the options to view a grid of thumbnails, pause the slideshow and navigate through the pictures. The thumbnail grid will slide out from the top and enable user to navigate through all the thumbnails.
Fuente: Blog de Designer Terminal
No hay comentarios.:
Publicar un comentario