Проста галерея на jquery. Красива галерея з сортуванням на JQuery. javascript галерея для перегляду на мобільних пристроях «PhotoSwipe»

1. jQuery галерея з ефектом перегортання сторінки

Подібне рішення можна використовувати для виведення останніх статей в блозі або для презентації товарів.

Унікальний спосіб відобразити ваші фотографії у вигляді jQuery незвичайної галереї.

3. jQuery галерея зображень для товару, плагін «slideJS»

jQuery плагін відмінно підійде для реалізації сторінки продукту з декількома зображеннями. Перехід між зображеннями може здійснюватися за допомогою мініатюр, або за допомогою стрілок навігації.

Зображення збільшується при наведенні на нього курсора миші.

5. Елегантна Lightbox галерея «ppGallery»

6. Міні-галерея jQuery «Touch-Gallery»

7. Нова jQuery галерея зі слайдами

Професійна jQuery галерея 2011 року.

8. jQuery плагін «Nivo Zoom»

Ще один якісний jQuery плагін від розробників Nivo слайдера. Збільшення зображення після натискання на мініатюру.

9. jQuery галерея «3d Wall Gallery»

Нова jQuery галерея 2011 року. Стрічка зображень розтягнута на всю ширину екрану. Навігація між фотографіями здійснюється трьома способами: за допомогою колеса миші, за допомогою прокрутки зверху галереї і з допомогою блоку зі слайдами знизу. Галерея виглядає дуже ефектно.

Зображення в галереї випадковим чином збільшуються і знову зменшуються створюючи ефект бульбашок.

11. Незвичайне відображення зображень в jQuery галереї

За допомогою повзунка зверху можна змінити відстань між зображеннями в стосі. При натисканні на зображення воно повертається.

12. Плагін jQuery галереї «MB.Gallery»

13. jQuery галерея, що розтягується на весь екран

Плагін 2011 року. Нова галерея з описом зображень, розтягується на всю область вікна браузера незалежно від його розмірів. Цікаво реалізовані мініатюри зображень. Перехід між фотографіями здійснюється за допомогою стрілок близько мініатюри і з допомогою колеса миші.

14. Легка jQuery галерея

Плагін автоматично сканує папку і створює зменшені копії зображень.

16. Стильна галерея з використанням бібліотек jQuery і Raphael

Цікавий ефект при наведенні курсору миші на мініатюру.

17. Нова версія jQuery плагіна «Supersized» версія 3.1

Зовсім недавно я вже згадував про це jQuery вирішенні для створення повноекранних галерей. Сьогодні хочу вам представити останню версію цього професійного плагіна. Скрипт повністю переписаний, зараз галерея працює ще швидше, при цьому додані деякі цікаві настройки, наприклад, навігація за допомогою клавіатури, змінна швидкість зміни зображень, розмір екрану і інші.

18. jQuery плагін «Galleria 1.2.2»

Нова jQuery галерея для ваших проектів.

Галерея випливає на сторінці після натискання на кнопку. Мініатюри відображаються навколо збільшеного зображення. Можна керувати автоматичною зміною зображень. Використовувані технології: jQuery, CSS, PHP.

20. Плагін «Timer Gallery»

jQuery галерея. Реалізовано автоматичне зміна слайдів і прокрутка мініатюр, якщо їх занадто багато.

Плагін галереї зображень на jQuery.

22. javascript галерея для перегляду на мобільних пристроях «PhotoSwipe»

Галерея зображень, оптимізована для перегляду на мобільних пристроях (Телефонах або планшетах).

23. javascript галерея з 3D ефектом

24. Галерея «jQuery morphing gallery»

Новий jQuery слайдер. Кілька класних анімованих ефектів при зміні слайдів.

25. jQuery плагін «Galleria 1.2.3»

26. jQuery галерея зображень «Image Wall»

Оригінальна галерея у вигляді розкиданих по екрану мініатюр різних розмірів, Стилізованих під картини. При натисканні на мініатюру з'являється область з описом зображення і при повторному натисканні спливає оригінальне велике зображення.

27. CSS3 галерея

Цікавий ефект при наведенні.

28. Галерея зі слайдами «TN3 Gallery»

jQyery галерея зі слайдами. Реалізована можливість перегляду в компактному вікні і в вікні на весь екран, а також можливість відключати / включати автоматичну зміну слайдів.

29. Сітка зображень «Grid-Gallery»

Сітка зображень розтягується в залежності від ширини вікна браузера. Цікавий ефект при наведенні: підсвічується активний ряд і колонка.

30. jQuery галерея «Swap Gallery»

Легка галерейка jQuery в кілька рядків коду.

Демонстраційна сторінка представлено кілька варіантів випадають мега меню, в різних стильових оформленнях. У цьому меню можна налаштовувати: ефект випадання, швидкість випадання, а також робити вибір між випаданням при натисканні або по наведенню мишки на пункт.

31. Галерея зображень jQuery

jQuery галерея з підписом зображень. Кілька ефектів зміни слайдів. Навігації між зображеннями здійснюється або за допомогою стрілок, або після натискання на мініатюру.

Зображення та його мініатюри виконані у вигляді кіл.

33. jQuery плагін портфоліо фотографа «Portfolio Image Navigation»

Оригінальна javascript рішення для оформлення портфоліо фотографа. Навігація між зображеннями здійснюється за допомогою стрілок вгору / вліво / вправо і за допомогою міні-квадратів (імітація переміщення в 2D просторі). Можна згрупувати фотографії з різних фото сесій в різні вертикальні ряди і пересуватися по ньому за допомогою елементів навігації. Дивіться демонстрацію.

34. Плагін «jmFullZoom»

Плагін для перегляду зображень, розтягуються на весь розмір вікна браузера. Можна використовувати для показу робіт з портфоліо.

35. Фото-карта

Галерея інтегрована з Google картою. Можна розгорнути на весь екран, натиснувши на іконку в правому нижньому кутку. Відмінно підійде для туристичних сайтів.

36. Галерея зображень зі слайдами

jQuery галерея зі слайдами.

37. jQuery галерея «Galleriffic»

Слайд-шоу зі слайдами.

38. jQuery CSS3 плагін «Wave Display Effect»

Хвилеподібний уявлення зображень і вмісту на сторінці. При натисканні на мініатюру все зображення збільшуються і з'являється їх назва. Наступне натискання розкривається блок з описом фотографії.

Багато варіантів відображення і налаштувань.

42. Plogger

43. Простенька симпатична галерея, зроблена на CSS, без використання скриптів

Красиво виглядає і відмінно працює в усіх сучасних браузерах

Можна керувати автоматичним показом слайдів (старт / стоп), перемикання слайдів за допомогою стрілок клавіатури, автоматичне постраничное розбиття назв слайдів, якщо їх багато, підтримується кілька галерей на одній сторінці, підписи до слайдів, підтримка API і можливість створювати свої ефекти переходу слайдів

46. \u200b\u200bГалерея у вигляді стопки фотографій

Ось так повинен буде виглядати результат галереї, яку ми з вами створимо. Ви можете подивитися демо і при бажанні завантажити вже остаточний результат галереї.

Привіт, шановні читачі a! У цьому уроці я покажу Вам, як створити минималистичную, але в той же час зручну і функціональну фото галерею на jQuery, Або галерею зображень, кому як зручно. У галереї є можливість створювати категорії, з подальшою фільтрацією. Так само є можливість запуску слайд-шоу. Галерея працює у всіх браузерах, так що проблем з адаптацією не буде.

Для створення цієї галереї будуть використані дві безкоштовні бібліотеки: Quicksandі PrettyPhoto. Вони значно спрощують створення галереї. Як завжди результат роботи Ви можете побачити на демонстраційній сторінці, а також завантажити архів з працюючою галерей і все вихідні файли. Єдиним мінусом, якщо можна так сказати, є створення в ручну мініатюр для великих зображень. А в усьому іншому ця галерея варта уваги. Так само як і !

HTML розмітка

Спочатку розберемо панельку зі списком категорій, це маркований список ul. Причому у кожного елемента списку повинно бути унікальне ім'я класу.

1
2
3
4
5
6
7
8

<ul class \u003d "portfolio-categ filter"\u003e
<li\u003eкатегорії:</ Li\u003e
<li class \u003d "all active"\u003e Усе</ A\u003e
<li class \u003d "cat-item-1"\u003e Категорія 1</ A\u003e
<li class \u003d "cat-item-2"\u003e Категорія 2</ A\u003e
<li class \u003d "cat-item-3"\u003e Категорія 3</ A\u003e
<li class \u003d "cat-item-4"\u003e Категорія 4</ A\u003e
</ Ul\u003e

1
2
3
4
5
6
7
8
9
10
11

Назва картинки

опубліковано діє до: 2012

Як говорилося вище, елементи списку це зображення в галереї. Кожен елемент списку включає складові. Це безпосередньо саме зображення, точніше його мініатюра, а також опис. Мініатюра являє собою посилання на основне зображення. Атрибут rel необхідний для виклику javascript і відкриття основного зображення.

Не забувайте також про 2 важливі речі, у елемента списку li атрибут data-id повинен бути унікальним. Атрибут data-type містить клас категорії, список яких я описував вище. Про розмітці начебто все.

стилі CSS

Особливо загострювати увагу на стилях не буду, так як використовуємо ми вже готову бібліотеку PrettyPhoto, Яка відповідає за збільшення зображення, і css коду досить багато. Однак варто зауважити передбачено 5 варіантів оформлення збільшеного зображення, хоча в ідеалі всього 3, так як в двох варіантах лише забирається закруглення.

Тому, покажу лише CSS стилі для мініатюр ну і списку категорій.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Portfolio-categ (margin-bottom: 30px;)
.portfolio-categ li (
display: inline;
margin-right: 10px;
}
.image-block (
display: block;
position: relative;
}
.image-block img (
border: 1px solid # d5d5d5;
border-radius: 4px 4px 4px 4px;
background: #FFFFFF;
padding: 10px;
}
.image-block img: hover (
border: 1px solid # A9CF54;
box-shadow: 0 0 5px # A9CF54;
}
.portfolio-area li (
float: left;
margin: 0 12px 20px 0;
overflow: hidden;
width: 245px;
padding: 5px;
}
.home-portfolio-text (margin-top: 10px;)
li.active a (text-decoration: underline;)

В принципі, зі стилями має бути все зрозуміло. Щоб категорії вишикувалися в ряд властивості display надається значення inline. Для того щоб надати ефект обведення зображення, задається фоновий колір (білий) і відступ в 10 пікселів. Розміри елементів списку задаються в .portfolio-area li.

jQuery

Ну і наостанок найважливіше, то заради чого весь урок. Це jQuery код. Почнемо з фільтрації картинок, за категоріями.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// Вибираємо все дочірні елементи portfolio-area і записуємо в змінну
var $ data \u003d $ ( ". portfolio-area") .clone ();

$ ( ". Portfolio-categ li") .click (function (e) (
$ ( ". Filter li") .removeClass ( "active");

var filterClass \u003d $ (this) .attr ( "class") .split ( "") .slice (- 1) [0];

if (filterClass \u003d\u003d "all") (
var $ filteredData \u003d $ data.find ( ".portfolio-item2");
) Else (
var $ filteredData \u003d $ data.find ( ".portfolio-item2");
}
$ ( ". Portfolio-area") .quicksand ($ filteredData, (
duration: 600,
adjustHeight: "auto"
), Function () (

LightboxPhoto ();
} ) ;
$ (This) .addClass ( "active");
return false;
} ) ;

C допомогою методу clone () і селектора, вибираємо всі дочірні елементи у .portfolio-area і записуємо їх в змінну $ data. Далі відстежуємо клік по одній з категорій, елемент li у списку з класом .portfolio-categ. Робимо все категорії неактивними, за допомогою видалення removeClass ( «active»), якщо цього не робити то з часом все категорії будуть активними і фільтрація зупинитися.

Так як ми натискаємо по елементу списку, то в селекторі this міститься елемент списку тобто li, у нього ми беремо значення атрибута class і за допомогою методу split розбиваємо назву класу на кілька частин, межею є пробіл (тобто якщо клас був « all active »то після розбиття ми отримуємо масив з« all »і« active »). А вже далі методом slice вибираємо перший елемент масиву (в нашому випадку «all»), і записуємо отриманий результат в змінну filterClass. Якщо пробілу не було то назва класу не змінитися.

Далі перевіряємо якщо у змінній filterClass рядок all, То методом .find вибираємо всі елементи з класом portfolio-item2 з масиву $ data, який ми розглядали вище. Вибрані елементи (а це все елементи списку, тобто всі картинки) поміщаємо в змінну filteredData.

В іншому випадку, якщо filterClass не дорівнює all, То в змінну filterData помістимо в повному обсязі елементи списку, а лише ті у яких атрибут data-type збігається з класом категорії. Коротше кажучи елементи тільки однієї категорії.

І в кінцевому підсумку отриману змінну передаємо в бібліотеку jquery quicksand, Яка і виробляє фільтрацію картинок. Це все що стосується фільтрації.

Тепер, що стосується збільшення зображення в спливаючому вікні. Тут все набагато простіше.

1
2
3
4
5
6
7

jQuery ( "a") .prettyPhoto ((
animationSpeed: "fast",
slideshow: 5000,
theme: "facebook",
show_title: false,
overlay_gallery: false
} ) ;

Відстежується клік по посиланню, у якій атрибут rel починається з prettyPhoto. Після чого в справу вступає бібліотека prettyPhoto, І зображення чудесним чином збільшується. До речі, ми також передаємо кілька параметрів. Такі як швидкість анімації - швидка, затримка у слайд шоу - 5 секунд, тема оформлення Facebook (всього 5 тим вони знаходяться в папці images / prettyPhoto), а також забороняємо показ назви картинки і збільшення картинки при наведенні миші. Повну документацію по prettyPhoto можна знайти

Щоб залишатися в курсі свіжих статей і уроків підписуйтесь на

Today, responsive design has become number one choice for designers and developers, as more and more people want their websites to run on smart devices. Responsive design draws mobile user's attention and helps you to generate leads and sales which take your business to another level.

Nowadays, you can create responsive layout for almost everything such as menu, grid, column and even pictures and images. If you want to display your website content, images and videos in a responsive gallery style then the following jQuery Image gallery plugins might help you out with it.

This article includes some of the Best Responsive jQuery Image Gallery pluginswhich will not only enable you to create responsive image galleries for your websites but also display them in elegant styles to make your website more beautiful and visually stunning.

Below is the list of Best Responsive jQuery Image Gallery Plugins worth considering in 2016.

Bootstrap Photo Gallery is a simple jQuery plugin that will create a Bootstrap based responsive Photo Gallery for your images.
This plugin supports variable height for the images and captions. An optional "modal" box with "next" and "previous" paging is also included.
Demo & Download

2. JK Responsive YouTube and Image Gallery

It is a modern, lightbox style gallery for displaying images and YouTube videos on your site. The gallery interface is fully responsive and works beautifully across all devices big or small.
Demo & Download

3. Faba

FABA is responsive Facebook albums and photos gallery jquery plugin that will load all the albums and photos from selected Facebook Page.

There are around 90 options you can edit and you can customize almost everything: animations, hover effects, every part of hover animations, text's, behaviours, and many more. You can integrate beautiful albums into your project, or web page.

xGallerify is a lightweight, responsive gallery plugin which allows you to create beautiful image galleries for your websites. This plugin is lightweight (3kb of file size), Easy to use and comes with number of customizable options and styles.
Demo & Download

Instagram Element is a premium Instagram plugin for bloggers, photographers, models, and anyone looking to increase their presence on Instagram.
This plugin is fully responsive and allows you to easily manage 50+ options and lets you display your photos beautifully on any device.

SnapGallery is a simple jQuery plugin that turns an ugly list of differently sized images into a beautiful, customizable gallery with one line of JavaScript.

It's completely responsive, customizable and allows you to select the spacing between images, the minimum width allowed before stacking and the maximum number of columns, with more options on the way!
Demo & Download

Eagle Gallery this is modern gallery with image zoom functionality. To manage the gallery you can use gestures or control buttons. This is a fully responsive gallery which has support touch screen and was created for mobile devices, laptops and desktops.

With this gallery you can easily create a product gallery on your internet shop for detailed view and customize it with help of options.

The Unite Gallery is multipurpose JavaScript gallery based on jQuery library. It's built with a modular technique with a lot of accent of ease of use and customization. It's very easy to customize the gallery, changing its skin via css, and even writing your own theme. Yet this gallery is very powerful, fast and has the most of nowadays must have features like responsiveness, touch enabled and even zoom feature, it's unique effect.
Demo & Download

jQuery lightGallery is a lightweight jQuery lightbox gallery for displaying image and video gallery.

Lightgallery supports touch and swipe navigation on touchscreen devices, as well as mouse drag for desktops. This allows users to navigate between slides by either swipe or mouse drag.

Lightgallery comes with a numerous number of options, which allow you to customize the plugin very easily. You can easily customize the look and feel of the gallery by updating SASS variables.
Demo & Download

This is another great jQuery image gallery plugin which allows you to create grid layout gallery for your pictures and videos. This plugins is fully responsive and bundled with number of features like social sharing, infinite scrolling, css3 animations, filters and much more.

blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.

It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading and can be extended to display additional content types.
Demo & Download

nanoGALLERY is a touch enabled and responsive image gallery with justified, cascading and grid layout. It supports self hosted images and pulling in Flickr, Picasa, Google+ and SmugMug photo albums.

Featuring multi-level navigation in albums, combinable hover effects on thumbnails, responsive thumbnail sizes, multiple layouts, slideshow, fullscreen, pagination, image lazy load and much more.
Demo & Download

flipGallery is a free jQuery powered photo gallery with sleek flipping transitions between thumbnails and lightbox enlargements. Other features include dynamic image streaming, auto pagination, auto cropping and transparent image overlay.

This plugin also has a premium version which comes with few nifty features and certainly includes responsiveness.
Demo & Download

Fancy Gallery is responsive jQuery image gallery plugin which allows you to display your images and videos in fancy style. This plugins has lots of customization options and you can add unlimited albums, videos, pictures and much more.

The plugin comes with different hover effects for the thumbnails and titles, which can also be adjusted. You can choose between 7 predefined color themes or just create your own color theme easily.

Balanced Gallery is a jQuery plugin that evenly distributes photos across rows or columns, making the most of the space provided. Photos are scaled based on the size of the 'container' element by default, making Balanced Gallery a good choice for responsive websites.
Demo & Download

16. S Gallery

S Gallery makes use of HTML5's Full Screen API, and relies heavily on CSS3 animations goodness and CSS3 transforms, so it will work only in browsers that support these features.
Demo & Download

17. Ultimate Grid Responsive Gallery

This is a HTML | CSS | JQuery Grid with a Lightbox, you can specify thumbnails for the grid and when you click on it to open the lightbox it will load the normal image, you can specify the text for the captions and for the lightbox. Also you do not have to load all the images at once (for performance purposes) so you can specify the number of images to load when it first loads and the number of images to load when you click the "load more images" button.

Responsive Thumbnail Gallery is a jQuery plugin for creating image galleries that scale to fit their container.
Demo & Download

SuperBox is a jQuery plugin that takes the whole 'image' and 'lightbox' one step further, reducing the JavaScript and image load dependence to make lightboxing a thing of the past! Using HTML5 data- * attributes, responsive layouts and jQuery.

SuperBox works wonders as a static image gallery, which you can click to reveal a full version of the image.
Demo & Download

The Ultimate Thumbnail gallery is fully responsive image gallery plugin comes in two layout types (grid and line, vertical and horizontal), with scroll (jScrollPane) or button navigation. Thumbnail boxes support any HTML element inside them.

1. Реалізація портфоліо з використанням jQuery галереї

Мініатюри проектів прокручуються при зміні положення курсора миші в лівій колонці. В області вмісту відображається збільшене зображення з назвою проектів, описом і списком використовуваних технологій. При переході між слайдами інформація про проекти змінює один одного з приголомшливим анімованим ефектом. При натисканні на зображення на сторінці з описом, воно збільшується також з використанням jQuery анімації. Ще хочеться відзначити приголомшливий елегантний зовнішній вигляд всій сторінки портфоліо. Дивіться демо.

2. Супер реалізація сайту-портфоліо з використанням CSS і jQuery

Чудова реалізація сайту-портфоліо фотографа. При натисканні на пункт меню з розкиданих по екрану квадратів збирається область з контентом фіксованою висоти і ширини. Для того, щоб помістити більше інформації в фіксовану область, передбачена прокрутка вмісту. Незвично реалізована реалізація показу робіт з портфоліо: при кліці по мініатюрі фотографія відображається у вигляді фонового зображення, яке автоматично масштабується при зміні розміру вікна браузера.

3. Стіна-портфоліо на jQuery

Оригінальне рішення для створення онлайн-портфоліо. Блоки проектів (мініатюри і короткий опис з посиланням) відображаються по кілька в ряд, при зміні вікна браузера блоки перерозподіляються рівномірно на сторінці з анімованим ефектом. У кожного проекту може бути декілька зображень-мініатюр, перехід між якими здійснюється за допомогою стрілок. При натисканні на посилання відкривається сторінка з повним описом, на якій текст поміщений на напівпрозорому блоці фіксованою висоти з прокруткою. В якості фону сторінки використовується масштабується зображення проекту. Виглядає прикольно - дивіться демонстрацію.

4. Плавне jQuery прокрутка сторінок

Реалізація вертикальної і горизонтальної прокрутки.

5. Плагін jQuery «Draggable Image Boxes Grid»

Перетягувати сітка, що складається з блоків з вмістом і зображень. Сітку можна перетягувати за допомогою мишки (натиснути будь-яку кнопку миші і тягнути в потрібну сторону). При кліці на мініатюру основне зображення розгортається на всю ширину екрану. При кліці темний блок з текстом, розкривається область з більш детальним описом.

6. Односторінковий сайт портфоліо

Односторінковий сайт з анімованої зміною вмісту. Демонстраційна сторінка пройдіться по вкладках меню, щоб побачити ефект.

7. Перемикання виду відображення блоків на jQuery

За допомогою цього jQuery плагіна «Switch Display Options» можна реалізувати перемикач на сторінці, за допомогою якого відвідувач буде переходити від табличного відображення інформації до повного перегляду з описом блоків. Відмінно підійде для реалізації портфоліо.

8. Шаблон для сайту ресторану з jQuery галереєю і картою від Google

Оригінальна jQuery рішення, створене для сайту кафе. У шаблоні реалізована цікава jQuery галерея для показу страв з меню. Зображення в галереї масштабируются в залежності від розміру вікна браузера. Спершу, в галереї відображаються зменшені зображення з назвою і коротким описом страв, при цьому повнорозмірна фотографія відображається затемненій на задньому тлі. Навігація між доступними фотографіями здійснюється за допомогою стрілок або колеса миші. Клік миші в режимі галереї прибере мініатюри з описом і дасть можливість розглянути оригінальні великі зображення, розтягнуті на всю ширину вікна. Для повернення в меню сайту з галереї необхідно натиснути на посилання у правому верхньому куті. Крім шикарною jQuery галереї в шаблон дуже ефектно інтегрована карта від Google.

9. Плагін Plasm The Wall

Для створення своєрідних «стін» з фотографій або HTML блоків, які за допомогою мишки можна перетягувати по екрану в межах фіксованої області.

10. Плагін для відображення елементів по колу

Відображення на сторінці різних елементів по колу заданого діаметра.

11. Сторінка-заглушка «Сайт в розробці»

На сторінці реалізована можливість відправити е-мейл адресу, який записується в базу даних і на який можна буде вислати повідомлення про відкриття сайту. Також сторінка прикрашена невеликим слайд-шоу, реалізованому на базі jQuery плагіна Nivo Slider v. 2.3.

12. Плагін QuickFlip 2

З його допомогою ви зможете зробити цікавий ефект повертається візитної картки при натисканні на посилання.

13. JQuery карта кліків

Ідея полягає у відстеженні кліків користувачів. Для того щоб подивитися плагін в роботі на демонстраційній сторінці, покликавши мишкою, а потім натисніть кнопку «Аналіз». І на напівпрозорому фоні з'являться точки, де ви кликали мишею.

Реалізація симпатичною екранної клавіатури. Хіба мало, для чогось вам стане в нагоді.

15. Записки jQuery

Реалізація листків з записками. Текст можна редагувати, а самі записки видаляти або переміщати по екрану. Щоб подивитися приклад, перейдіть на демонстраційній сторінці на вкладку «Demo».

16. Рейтинг на jQuery

17. HoverAttribute

Цікаве оформлення посилань: при наведенні на посилання змінюється її анкор. Виглядає прикольно.

18. jQuery Fancy капча для форми реєстрації

Реалізація капчи для форми реєстрації. Плагін являє собою набір цифр, які необхідно шляхом перетягування виставити в порядку зростання. Досить цікавий спосіб для підтвердження того, що реєстрацію проходить жива людина, а не робот.

Внизу екрана відображаються кнопки, які можна використовувати для плавної прокрутки сторінки вгору або вниз.

20. Перекладач. jQuery плагін «jTextTranslate»

Плагін використовує Google Language API і може перекладати текст на будь-які мови, що надаються Google. Для переказу необхідно натиснути на значок поруч з абзацом і зі списку вибрати мову, на який необхідно перевести.

21. jQuery плагін для посторінкового навігації

Відмінна реалізація прокручуються посилань для посторінкового навігації. Реалізовано з використанні jQuery.

22. jQuery плагін «Нотатки»

Цей jQuery плагін дозволить реалізувати «паперові» замітки на вашому сайті.

23. jQuery плагін «Catch404»

24. jQuery плагін jBreadCrumb

Плагін для створення анімованої ланцюжка навігації «Хлібні крихти»

25. Плагін «Reel»

26. jQuery плагін «Dance Floor»

jQuery плагін для реалізації сторінки з товарами. При натисканні на зображення товару з'являється його опис.

27. jQuery плагін «3D хмара міток»

28. Об'ємні CSS кнопки

29. Анимированная горизонтальна прокрутка сторінки

jQuery ефект вертикальною прокруткою сторінки. Відмінно підійде для реалізації односторінкових сайтів і сайтів-портфоліо. Для перегляду ефекту натисніть на пункт меню на демонстраційної сторінки.

30. jQuery плагін «Rating System»

jQuery ефект для реалізації оцінки чого-небудь. Колір гуртків і текст під ними змінюється в залежності від того, на якій з них наведений курсор миші.

31. jQuery Panel Magic

Плагін, який реалізує навігацію по сайту. При цьому ваш сайт представлений в якості сітки документів, між якими здійснюється перехід з цікавим jQuery ефектом.

Ви можете легко використовувати цей плагін для створення невеликих сайтів і веб-додатків. Так само він не погано виглядатиме на сайтах-портфоліо.

32. Індикатор завантаження на Mootools, плагін «MoogressBar»

Ефектний індикатор завантаження.

33. Mootools плагін «CwComplete»

При заповненні поля, плагін підкаже можливі варіанти для заповнення з використанням Ajax, при цьому він відфільтрує і покаже тільки ті варіанти, які задовольняють вже введеному в поле тексту.

34. Відмінний ajax-чат із застосуванням jQuery і CSS3

Перед тим як почати спілкування відвідувач повинен ввести свій нік і e-mail. У правій колонці показано, скільки людина авторизовані в чаті. Використовувані технології: PHP, MySQL, jQuery, CSS.

35. Реалізація сторінки «Запропонувати за проектом»

Відвідувачі можуть додати нову пропозицію або проголосувати за вже існуюче. Відмінне рішення для тих, хто хоче дізнатися думку своєї аудиторії про сайті. Також цю сторінку можна використовувати щоб накопичити нові ідеї для подальшого розвитку вашого проекту. Використовувані технології: PHP, MySQL, jQuery, CSS

36. Реалізація голосування / опитування за допомогою PHP і jQuery

37. Голосування на Ajax «TinyEditor»

Акуратна реалізація опитувань на сайті. Використовувані технології: JQuery, Ajax, PHP і MySQL.

Дуже цікаве рішення для реалізації голосування на сайті. Перетягуючи вгору і вниз блоки, схопивши мишкою за зображення, можна розташувати їх на сторінці в будь-якій послідовності. Чим вище ви залишите блок, тим краще його оцінили і, відповідно, якщо блок розмістити в самому низу, значить, він менше всього вам сподобався. Після того, як ви розставите блоки в потрібній послідовності, необхідно натиснути на кнопку «Submit poll», щоб голос був врахований. На сторінці з результатами відображаються результати голосування і кількість тих, хто проголосував відвідувачів. Використовувані технології: CSS, PHP, MySQL, jQuery.

Проста система коментування на Ajax з перевіркою правильності введення інформації. Коментарі зберігаються в базі даних. Реалізовано з використанням: PHP, MySQL, CSS, jQuery.

40. Лічильник кількості завантажень файлу

41. Нотатки на сторінці з використанням PHP

Використані технології: PHP, jQuery, CSS.

При переході по пунктах меню вміст завантажується без перезавантаження сторінки. Використовувані технології: PHP, jQuery, CSS.

43. jQuery пошук по сайту з використанням технології від Google

Реалізація пошуку по сайту з використанням API Google AJAX Search. Ви зможете надати можливість відвідувачеві зробити пошук як на вашому сайті, так і в інтернеті. При цьому пошук можна здійснювати не тільки по сторінках сайту, але і по зображеннях і мультимедійних файлів.

44. jQuery ефект накладення опису на зображення

Дуже цікавий ефект, може бути використаний в реалізації портфоліо. При натисканні на зображення воно затемнюється напівпрозорим фоном, і з'являється напис з описом того, на що слід звернути увагу.

45. Реалізація сторінки «Питання-відповідь» за допомогою jQuery

jQuery реалізація сторінки FAQ на сайті. Вгорі сторінки відображається список питань. При натисканні на питання сторінка плавно прокручується до вибраного вами, і активний питання з відповіддю на нього підсвічується іншим кольором. Так само в полі активного відповіді з'являється посилання для повернення до списку питань.

46. \u200b\u200bСайт на Ajax. Вміст подгружается без перезавантаження сторінки

47. Зміна кольору фону і тексту за допомогою jQuery

Колір змінюється при наведенні курсору миші. Можна зробити так, щоб колір змінювався випадковим чином.

48. Путівник по сайту з використанням jQuery

За допомогою цього цікавого плагіна можна познайомити відвідувача з основними функціями вашого сайту, якщо він потрапив на нього вперше. При завантаженні сторінки у верхньому правому куті виїжджає блок з пропозицією провести екскурсію по сайту. Якщо відвідувач вперше зайшов на ваш сайт, він може за допомогою невеликого путівника познайомитися з основними функціями. При цьому сторінка затемнений і необхідні блоки на кожному кроці позначаються позначкою. Якщо ж відвідувач вже був раніше на вашому сайті, він просто може закрити вікно з пропозицією екскурсії по сайту.

49. Віртуальний тур по сайту «Joyride Kit»

За допомогою цього плагіна можна познайомити відвідувача з основними функціоналом сторінки. Робиться це в вигляді послідовного спливаючого опису елементів. Відвідувач може подивитися всі підказки, натискаючи на кнопку Next, або закрити онлайн-тур (якщо він вже не вперше потрапляє на цю сторінку) скориставшись хрестиком.

Вибирайте, який з цих елементів ідеально впишеться в ваш проект.

1. Bootstrap Slider

Bootstrap Slider - безкоштовний, оптимізований під мобільні пристрої слайдер зображень з прокруткою дотиком і змахування. Він буде приголомшливо виглядати на будь-якому екрані і в будь-якому браузері. Ви можете завантажити в слайдери зображення, відео, текст, мініатюри і кнопки.