ГалСрСя адаптивная – Как создаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS Grid галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ для сайта: ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹ΠΉ процСсс Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ

Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

7 Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ слайдСра

Jquery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: 7 Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ слайдСра

БСгодня Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒ Π±Ρ‹ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠΎΠΉ jQuery Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ слайдСра. Когда я Π½Π°Ρ‡ΠΈΠ½Π°Π» ΠΏΠΎΠ΄Π³ΠΎΡ‚Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π» для этой ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠΈ, Π΄ΡƒΠΌΠ°Π», Ρ‡Ρ‚ΠΎ качСствСнного ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π»Π° Π±ΡƒΠ΄Π΅Ρ‚ просто Π΄Π²Π΅ бСсконСчности, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρ‚Π΅ΠΌΠ° Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ стара ΠΊΠ°ΠΊ ΠΌΠΈΡ€ ΠΈ ΠΎΡ‡Π΅Π½ΡŒ вострСбованная. ΠœΠΎΠ΅ΠΌΡƒ ΡƒΠ΄ΠΈΠ²Π»Π΅Π½ΠΈΡŽ Π½Π΅ Π±Ρ‹Π»ΠΎ ΠΏΡ€Π΅Π΄Π΅Π»Π°, ΠΊΠΎΠ³Π΄Π° с ΠΊΠ°ΠΆΠ΄ΠΎΠΉ вновь ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΎΠΉ Π΄Π΅ΠΌΠΊΠΎΠΉ Π½Π°Π΄Π΅ΠΆΠ½Π° Π½Π°ΠΉΡ‚ΠΈ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ ΠΏΡ€ΠΈΠ»ΠΈΡ‡Π½ΠΎΠ΅ таяла Π½Π° Π³Π»Π°Π·Π°Ρ…. Π’ связи с этим ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ»Π°ΡΡŒ Π½Π΅ большая Π½ΠΎ, ΠΏΠΎ ΠΌΠΎΠ΅ΠΌΡƒ, с довольно интСрСсными экзСмплярами. Π‘Ρ€Π΅Π΄ΠΈ Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ ΠΊΠ°ΠΊ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Ρ‚Π°ΠΊ ΠΈ полноэкранныС Π³Π°Π»Π΅Ρ€Π΅ΠΈ.
ΠšΡΡ‚Π°Ρ‚ΠΈ, Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΌ Ρ‚ΠΎΠΏΠΈΠΊΠ΅ я Π΄Π΅Π»Π°Π» ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΡƒ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Π³Π°Π»Π΅Ρ€Π΅ΠΉ для WordPress Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Ссли Ρƒ вас Π΅ΡΡ‚ΡŒ сайт Π½Π° WordPress Π΄ΡƒΠΌΠ°ΡŽ ΠΎΠ½Π° Π²Π°ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ ΠΊΡ€Π°ΠΉΠ½Π΅ интСрСсна.

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅:
18 Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

1. Unite Gallery
БСсплатная, адаптивная Ρ„ΠΎΡ‚ΠΎ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ галСрСя Π½Π° основС Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ jQuery. ΠŸΡ€ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ Π°ΠΊΡ†Π΅Π½Ρ‚ дСлался Π½Π° простоту использования ΠΈ настройки. ΠŸΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ΡΡ с довольно большим количСством качСствСнных Ρ‚Π΅ΠΌ оформлСния, Π° Ρ‚Π°ΠΊ ΠΆΠ΅, Ρ‡Ρ‚ΠΎ Π½Π΅ΠΌΠ°Π»ΠΎΠ²Π°ΠΆΠ½ΠΎ, Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΈΡΠ°Ρ‚ΡŒ собствСнныС Ρ‚Π΅ΠΌΡ‹ оформлСния.

Jquery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: 7 Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ слайдСра

2. Responsive Image Gallery with Thumbnail Carousel
Адаптивная галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ карусСли ΠΏΡ€Π΅Π²ΡŒΡŽΡˆΠ΅ΠΊ. ΠŸΠΎΠ΄ΡΡ‚Ρ€Π°ΠΈΠ²Π°Π΅Ρ‚ΡΡ ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€ вашСго экрана, Π΅ΡΡ‚ΡŒ ΠΏΡ€Π΅Π»ΠΎΠ°Π΄Π΅Ρ€ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Jquery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: 7 Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ слайдСра

3. Fotorama
ΠžΡ‚Π»ΠΈΡ‡Π½Π°Ρ полноэкранная галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с Ρ‚Π°Ρ‡ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ. Для ΠΏΠΎΠΊΠ°Π·Π° доступны Π²ΠΈΠ΄Π΅ΠΎ ΠΈ html ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. Из ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ доступно большоС количСство Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ. Π’Π°ΠΊ ΠΆΠ΅ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ WordPress ΠΈ Ruby on Rails Π½Π° основС этого скрипта.

Jquery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: 7 Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ слайдСра

4. Full Page Image Gallery with jQuery
Π•Ρ‰Π΅ ΠΎΠ΄Π½Π° полноэкранная галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π•Π΅ ΠΎΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΡŒΡŽ ΠΈ β€œΠΈΠ·ΡŽΠΌΠΈΠ½ΠΊΠΎΠΉβ€ Π΅ΡΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½ΠΎΠ³ΠΎ полноэкранного изобраТСния Π² зависимости ΠΎΡ‚ полоТСния ΠΌΡ‹ΡˆΠΊΠΈ.
Π‘Π°Ρ€ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ Π² Π½ΠΈΠΆΠ½Π΅ΠΉ части экрана прокручиваСтся автоматичСски ΠΊΠΎΠ³Π΄Π° ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Π΅Ρ‚ ΠΌΡ‹ΡˆΡŒ.

Jquery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: 7 Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ слайдСра

5. Slider Gallery With jQuery
ИдСально ΠΏΠΎΠ΄ΠΎΠΉΠ΄Π΅Ρ‚ для Ρ€Π°Π·Π±ΠΈΠ²ΠΊΠΈ Π³Π°Π»Π΅Ρ€Π΅ΠΉ Π½Π° Π°Π»ΡŒΠ±ΠΎΠΌΡ‹. ΠŸΡ€ΠΈ Π²Ρ‹Π±ΠΎΡ€Π΅ альбома Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠΊΠ°Π·Π°Π½Ρ‹ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹ со слайдСром ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Jquery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: 7 Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ слайдСра

6. Galleria
Π­Ρ‚ΠΎ Ρ…ΠΎΡ€ΠΎΡˆΠΎ спроСктированная адаптивная галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, способная ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ· Flickr, Picasa, YouTube ΠΈ Π΄Ρ€. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Π² полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ΅. Π•ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ отобраТСния подписСй. Π•ΡΡ‚ΡŒ ΠΏΠ»Π°Ρ‚Π½Ρ‹Π΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹, ΠΈΠ· ΠΊΠΎΡ€ΠΎΠ±ΠΊΠΈ поставляСтся с ΠΎΠ΄Π½ΠΎΠΉ бСсплатной Ρ‚Π΅ΠΌΠΎΠΉ.

Jquery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: 7 Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ слайдСра

7. Fullscreen Slideshow With HTML5 Audio and jQuery
ΠŸΡ€Π΅Π²ΠΎΡΡ…ΠΎΠ΄Π½Π°Ρ полноэкранная адаптивная галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ способная Π½Π΅ просто ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ изобраТСния Π½ΠΎ ΠΈ ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ эмоции Π·Π° счСт возмоТности Π°ΠΊΡ‚ΠΈΠ²Π°Ρ†ΠΈΠΈ воспроизвСдСния Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ Π°ΡƒΠ΄ΠΈΠΎ.

Jquery ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: 7 Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ слайдСра

АдаптивныС слайдСры ΠΈ Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

ΠžΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½ являСтся сСйчас горячСй Ρ‚Π΅ΠΌΠΎΠΉ, Π° Ссли Π²Ρ‹ занимались Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… сайтов, Ρ‚ΠΎ, навСрняка, ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°Π»ΠΈΡΡŒ с ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ слайдСра или Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ ΡƒΡΠ»ΠΎΠΆΠ½ΡΡ‚ΡŒ ΠΈ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ всё с нуля, вСдь Π² сСти ΡƒΠΆΠ΅ сущСствуСт мноТСство Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным кодом.

Elastislide

ElastislideΒ Β β€” это адаптивная ΠΊΠ°Ρ€ΡƒΡΠ΅Π»ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.Β  Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΈΠ·ΠΌΠ΅Π½ΡΡŽΡ‚ свой Ρ€Π°Π·ΠΌΠ΅Ρ€, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° Π² зависимости ΠΎΡ‚ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ экрана. Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ Π΅Π³ΠΎ моТно здСсь.

Unoslider

UnosliderΒ Β β€” это адаптивная галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, которая Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя ΠΌΠ½ΠΎΠ³ΠΎ настроСк ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ ΠΈΠ· 12 Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Ρ‚Π΅ΠΌΡ‹. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ‚Π°Ρ‡-скрин для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ…Β ΡƒΡΡ‚Ρ€ΠΎΠΉΡΡ‚Π².

ResponsiveSlides.js

Если Π²Ρ‹ ΠΈΡ‰Π΅Ρ‚Π΅ простоС Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ слайд-ΡˆΠΎΡƒ, Ρ‚ΠΎ ResponsiiveSlides.jsΒ β€” ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎΒ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ! Π”ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Ρ‹ ΠΈΠΌΠ΅ΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΌΠ΅ΠΆΠ΄Ρƒ страницами Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, эффСктами ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°, Ρ€Π°Π½Π΄ΠΎΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈ ΠΈ ΠΌΠ½ΠΎΠ³ΠΈΠΌ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. И Π΅Ρ‰Ρ‘ этот слайдСр мало вСсит.

jQuery Responsive Thumbnail GalleryΒ Plugin

jQuery Responsive Thumbail Gallery PluginΒ β€” большС, Ρ‡Π΅ΠΌ просто Π΄Π»ΠΈΠ½Π½ΠΎΠ΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅, это ΡƒΠ΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠΉ Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Он Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΊΠ°ΠΊ самая простая галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π°ΠΌΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π½ΠΎ адаптивная ΠΈΠΌΠ΅Π΅Ρ‚ ΠΏΠ»Π°Π²Π½Ρ‹Π΅Β ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹.

PhotoΒ Swipe

Photo Swipe — это бСсплатная галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ разработанная ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈΒ  HTML, CSS, JavaScript ΠΈΒ  ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π° для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств. Π­Ρ‚Π° галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ совмСстима с ΠΎΠΏΠ΅Ρ€Π°Ρ†ΠΈΠΎΠ½Π½ΠΎΠΉ систСмы IOS Apple Mobile, устройствами Android, BlackBerry ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌΠΈ устройствами. Π•Ρ‘ Π»Π΅Π³ΠΊΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ, Π»Π΅Π³ΠΊΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, ΠΈ ΠΌΠΎΠΆΠ½ΠΎ настроит Π΅Ρ‘ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π²Π°ΠΌΒ Ρ…ΠΎΡ‚Π΅Π»ΠΎΡΡŒΒ Π±Ρ‹.

Responsive ImageΒ Gallery

Responsive Image GalleryΒ β€” Ρ„Π΅Π½ΠΎΠΌΠ΅Π½Π°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΈΠΌΠ΅ΡŽΡ‚ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π²Ρ‹Π±ΠΎΡ€Π° просмотра Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ с ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Β ΠΈΠ»ΠΈ Π±Π΅Π·Β Π½ΠΈΡ…

Seamless Responsive PhotoΒ Grid

Seamless Responsive Photo GridΒ β€” интСрСсный ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ ΠΊ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ большого количСства ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ страницС. ГалСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ большС ΠΏΠΎΡ…ΠΎΠΆΠ° Π½Π° ΠΊΠΎΠ»Π»Π°ΠΆ. ВсС ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Π½ΠΎ Π² ΠΎΠ΄ΠΈΠ½ красивый массив. Π­Ρ‚ΠΎ забавная опция для случайных ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ², ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΠ»ΠΈΒ Π±Ρ‹ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π²Ρ€ΠΎΠ΄Π΅ этого, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° всСх основных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΈ ΠΎΡ‡Π΅Π½ΡŒ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ. Π‘ΠΊΠ°Ρ‡ΠΈΠ²Π°ΠΉΡ‚Π΅Β Π·Π΄Π΅ΡΡŒ

Elastic ImageΒ Slideshow

Elastic Image SlideshowΒ β€” ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ²Π½ΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для сайта. ΠœΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹ ΠΈ подписи ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΏΠ»Π°Π²Π½ΠΎ, создавая интСрСсный эффСкт. БущСствуСт Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ автопроигрывания. Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ моТно здСсь

Flexslider

FlexsliderΒ Β β€” Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ слайдСра ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ΡΡ всСми основными Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, ΠΈΠΌΠ΅Π΅Ρ‚ мноТСство настроСк.

Blueberry

BlueberryΒ Β β€” Π²ΠΎΡΡ…ΠΈΡ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉΒ  слайдСр Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» написан ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π­Ρ‚ΠΎ ΡΠΊΡΠΏΠ΅Ρ€ΠΈΠΌΠ΅Π½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹ΠΌ исходным ΠΊΠΎΠ΄ΠΎΠΌ. Π’ΠΎΡ‚ Ρ„Π°ΠΊΡ‚, Ρ‡Ρ‚ΠΎ этот слайдСр Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π°Β JQuery ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ BlueberryΒ  Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с Blackberry, Π½ΠΎ ΠΈ с Apple.

Автор — webdesigndev

Π‘Π²ΠΎΠ±ΠΎΠ΄Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Β β€”Β Π”Π΅ΠΆΡƒΡ€ΠΊΠ°

ο»Ώ

ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ

ΠžΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΎΡ‚Π²Π΅Ρ‚

ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

Π‘Π»ΡƒΡ‡Π°ΠΉΠ½Ρ‹Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

ВСрстка Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ CSS Π³Π°Π»Π΅Ρ€Π΅ΠΈ

<!DOCTYPE html>

<html>

<head>

<meta charset=»utf-8″>

<meta http-equiv=»X-UA-Compatible» content=»IE=edge»>

<title>ГалСрСя Π½Π° CSS</title>

<link rel=»stylesheet» href=»css/style.css»>

</head>

<body>

<div>

<section>

<ul>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°»>

<h4>ОписаниС</h4>

<p>Π”ΡƒΡˆΠ° моя ΠΎΠ·Π°Ρ€Π΅Π½Π° Π½Π΅Π·Π΅ΠΌΠ½ΠΎΠΉ Ρ€Π°Π΄ΠΎΡΡ‚ΡŒΡŽ, ΠΊΠ°ΠΊ эти чудСсныС вСсСнниС ΡƒΡ‚Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ я наслаТдаюсь ΠΎΡ‚ всСго сСрдца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°»>

<h4>ОписаниС</h4>

<p>Π”ΡƒΡˆΠ° моя ΠΎΠ·Π°Ρ€Π΅Π½Π° Π½Π΅Π·Π΅ΠΌΠ½ΠΎΠΉ Ρ€Π°Π΄ΠΎΡΡ‚ΡŒΡŽ, ΠΊΠ°ΠΊ эти чудСсныС вСсСнниС ΡƒΡ‚Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ я наслаТдаюсь ΠΎΡ‚ всСго сСрдца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°»>

<h4>ОписаниС</h4>

<p>Π”ΡƒΡˆΠ° моя ΠΎΠ·Π°Ρ€Π΅Π½Π° Π½Π΅Π·Π΅ΠΌΠ½ΠΎΠΉ Ρ€Π°Π΄ΠΎΡΡ‚ΡŒΡŽ, ΠΊΠ°ΠΊ эти чудСсныС вСсСнниС ΡƒΡ‚Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ я наслаТдаюсь ΠΎΡ‚ всСго сСрдца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°»>

<h4>ОписаниС</h4>

<p>Π”ΡƒΡˆΠ° моя ΠΎΠ·Π°Ρ€Π΅Π½Π° Π½Π΅Π·Π΅ΠΌΠ½ΠΎΠΉ Ρ€Π°Π΄ΠΎΡΡ‚ΡŒΡŽ, ΠΊΠ°ΠΊ эти чудСсныС вСсСнниС ΡƒΡ‚Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ я наслаТдаюсь ΠΎΡ‚ всСго сСрдца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°»>

<h4>ОписаниС</h4>

<p>Π”ΡƒΡˆΠ° моя ΠΎΠ·Π°Ρ€Π΅Π½Π° Π½Π΅Π·Π΅ΠΌΠ½ΠΎΠΉ Ρ€Π°Π΄ΠΎΡΡ‚ΡŒΡŽ, ΠΊΠ°ΠΊ эти чудСсныС вСсСнниС ΡƒΡ‚Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ я наслаТдаюсь ΠΎΡ‚ всСго сСрдца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°»>

<h4>ОписаниС</h4>

<p>Π”ΡƒΡˆΠ° моя ΠΎΠ·Π°Ρ€Π΅Π½Π° Π½Π΅Π·Π΅ΠΌΠ½ΠΎΠΉ Ρ€Π°Π΄ΠΎΡΡ‚ΡŒΡŽ, ΠΊΠ°ΠΊ эти чудСсныС вСсСнниС ΡƒΡ‚Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ я наслаТдаюсь ΠΎΡ‚ всСго сСрдца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°»>

<h4>ОписаниС</h4>

<p>Π”ΡƒΡˆΠ° моя ΠΎΠ·Π°Ρ€Π΅Π½Π° Π½Π΅Π·Π΅ΠΌΠ½ΠΎΠΉ Ρ€Π°Π΄ΠΎΡΡ‚ΡŒΡŽ, ΠΊΠ°ΠΊ эти чудСсныС вСсСнниС ΡƒΡ‚Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ я наслаТдаюсь ΠΎΡ‚ всСго сСрдца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°»>

<h4>ОписаниС</h4>

<p>Π”ΡƒΡˆΠ° моя ΠΎΠ·Π°Ρ€Π΅Π½Π° Π½Π΅Π·Π΅ΠΌΠ½ΠΎΠΉ Ρ€Π°Π΄ΠΎΡΡ‚ΡŒΡŽ, ΠΊΠ°ΠΊ эти чудСсныС вСсСнниС ΡƒΡ‚Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ я наслаТдаюсь ΠΎΡ‚ всСго сСрдца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°»>

<h4>ОписаниС</h4>

<p>Π”ΡƒΡˆΠ° моя ΠΎΠ·Π°Ρ€Π΅Π½Π° Π½Π΅Π·Π΅ΠΌΠ½ΠΎΠΉ Ρ€Π°Π΄ΠΎΡΡ‚ΡŒΡŽ, ΠΊΠ°ΠΊ эти чудСсныС вСсСнниС ΡƒΡ‚Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ я наслаТдаюсь ΠΎΡ‚ всСго сСрдца.</p>

</a>

</li>

<li>

<a href=»»>

<img src=»img/8.jpg» alt=»ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°»>

<h4>ОписаниС</h4>

<p>Π”ΡƒΡˆΠ° моя ΠΎΠ·Π°Ρ€Π΅Π½Π° Π½Π΅Π·Π΅ΠΌΠ½ΠΎΠΉ Ρ€Π°Π΄ΠΎΡΡ‚ΡŒΡŽ, ΠΊΠ°ΠΊ эти чудСсныС вСсСнниС ΡƒΡ‚Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ я наслаТдаюсь ΠΎΡ‚ всСго сСрдца.</p>

</a>

</li>

</ul>

</section>

</div>

</body>

</html>

МСню, Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈ Π΅Ρ‰Ρ‘ нСсколько ΠΊΠ»Ρ‘Π²Ρ‹Ρ… jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ²

ЗдравствуйтС, Π΄ΠΎΡ€ΠΎΠ³ΠΈΠ΅ Π΄Ρ€ΡƒΠ·ΡŒΡ. Π’ΠΎΡ‚ ΠΈ снова Π²Ρ‹ΡˆΠ»Π° свСТайшая ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° самых Ρ€Π°Π·Π½ΠΎΠΎΠ±Ρ€Π°Π·Π½Ρ‹Ρ… ΠΈ ΠΊ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ…Β jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ². Π­Ρ‚Π° ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠ° бСсплатна, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ практичСски ΠΊΠΎ всСм ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌ прилагаСтся Π΄Π΅ΠΌΠΎ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ всС ΠΈΡ… Π’Ρ‹ смоТСтС ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π² дСйствии. Π’ΡƒΡ‚ Π’Ρ‹ смоТСтС Π²ΡΡ‚Ρ€Π΅Ρ‚ΠΈΡ‚ΡŒ нСсколько лайтбоксов, мСню ΠΈ Π΅Ρ‰Ρ‘ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΊΡ€ΡƒΡ‚Ρ‹Ρ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ².

Бпасибо http://codevisually.com И Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΏΡ€ΠΎΡˆΠ»Ρ‹Π΅ ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠΈ:

Адаптация Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΡˆΡ€ΠΈΡ„Ρ‚Π° ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана с jQuery

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Адаптивная jQuery галСрСя для сайта

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π—Π°Π³Π½ΡƒΡ‚Ρ‹Π΅ ΡƒΠ³Π»Ρ‹ с Ρ‚Π΅Π½ΡŒΡŽ с использованиСм jQuery

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

jQuery ΠΏΠ»Π°Π³ΠΈΠ½ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Ρ‚Π°Π±Π»ΠΈΡ†

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Плавная ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° со слайдСром

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Плагин для просмотра ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° сайтС

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠšΡ€Π°ΡΠΈΠ²ΠΎΠ΅, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²ΠΎΠ΅ мСню Π½Π°Β jQuery

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠšΡ€Π°ΡΠΈΠ²Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° с Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠ΅ΠΉ

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠœΠ½ΠΎΠ³ΠΎΡƒΡ€ΠΎΠ²Π½Π΅Π²Π°Ρ ΠΈ адаптивная навигация для сайта

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

JQuery ΠΏΠ»Π°Π³ΠΈΠ½ для ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠΉ высоты Π±Π»ΠΎΠΊΠ°

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΠΎΠ»ΡƒΠΊΡ€ΡƒΠ³Π»Π°Ρ полоса Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ с ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°ΠΌΠΈ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

JQuery ΠΏΠ»Π°Π³ΠΈΠ½ для ΠΎΠ±Ρ€Π΅Π·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Плагин, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ тСкст Π² ΠΊΠΎΠ»ΠΎΠ½ΠΊΠ΅ Π·Π° счёт Ρ€Π°Π·ΠΌΠ΅Ρ€Π°

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠšΠ°Π»ΡŒΠΊΡƒΠ»ΡΡ‚ΠΎΡ€ с использованиСм jQuery

Π”Π΅ΠΌΠΎ ΠΈ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

jQuery ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ Π²ΠΈΠ±Ρ€Π°Ρ†ΠΈΡŽ Π½Π° мобильном устройствС ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ

Π”Π΅ΠΌΠΎ (ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π½Π° мобильном устройствС)Β Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Облака Π½Π° Ρ„ΠΎΠ½Π΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽΒ HTML5

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

JQuery ΡˆΠΏΠ°Ρ€Π³Π°Π»ΠΊΠ°

ΠŸΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ

ΠŸΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠ° ΠΊ Π½ΡƒΠΆΠ½ΠΎΠΌΡƒ мСсту Π½Π° сайтС

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π›ΠΈΠΏΠΊΠΎΠ΅ ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ Π½Π° сайт

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

JQuery Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° для сСнсорных прикосновСний

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π€ΠΈΠ»ΡŒΡ‚Ρ€ для Π±Π»ΠΎΠΊΠΎΠ²

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Π’Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π½Π°Β jQuery

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Иконки Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ…

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

ΠŸΠΎΠ΄Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΏΡ€ΠΈ Π½Π°ΠΆΠ°Ρ‚ΠΈΠΈ ΠΊΠ½ΠΎΠΏΠΊΠΈ

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Адаптивный ΠΈ красивый лайтбокс

Π”Π΅ΠΌΠΎΒ Ξ™ Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ

Image Gallery Π‘Ρ‚ΠΈΠ»ΡŒΠ½Π°Ρ адаптивная галСрСя WordPress – INFO-EFFECT

На Ρ‡Ρ‚Π΅Π½ΠΈΠ΅ 3 ΠΌΠΈΠ½. ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½ΠΎ

ΠŸΡ€ΠΈΠ²Π΅Ρ‚! ΠœΡ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅ΠΌ Ρ€Π°Π·Π±ΠΈΡ€Π°Ρ‚ΡŒ самыС интСрСсныС ΠΈ самыС ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Π΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ для сайта WordPress! БСгодня Π²Ρ‹ ΡƒΠ·Π½Π°Π΅Ρ‚Π΅ ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π° свой сайт ΡΡ‚ΠΈΠ»ΡŒΠ½ΡƒΡŽ ΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΡƒΡŽ Ρ„ΠΎΡ‚ΠΎ Π³Π°Π»Π΅Ρ€Π΅ΡŽ. Π’ Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ изобраТСния ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ Π΄Ρ€ΡƒΠ³ ΠΎΡ‚ Π΄Ρ€ΡƒΠ³Π°, Π° ΠΌΠΎΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ изобраТСния ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ ΠΊΠ°ΠΊ ΠΎΠ΄Π½ΠΎ Ρ†Π΅Π»ΠΎΠ΅. МоТно Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ эффСкт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. МоТно Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ для просмотра ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² лайтбокс ΠΎΠΊΠ½Π΅. МоТно Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π’Ρ‹ смоТСтС ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ количСство ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ Π² Π³Π°Π»Π΅Ρ€Π΅ΠΈ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ устройства, ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°, ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°, мобильного устройства. ΠžΡ‡Π΅Π½ΡŒ простой ΠΈ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½!

Β 

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π³Π°Π»Π΅Ρ€Π΅ΠΈ с Π³Ρ€Π°Π½ΠΈΡ†Π°ΠΌΠΈ.

Β 

Image Gallery

Β 

Лайтбокс ΠΎΠΊΠ½ΠΎ для просмотра ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. МоТно ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ всС изобраТСния Π² лайтбокс ΠΎΠΊΠ½Π΅.

Β 

Image Gallery

Β 

ГалСрСя с изобраТСниями Π±Π΅Π· Π³Ρ€Π°Π½ΠΈΡ†, 6 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.

Β 

Image Gallery

Β 

ГалСрСя с изобраТСниями Π±Π΅Π· Π³Ρ€Π°Π½ΠΈΡ†, 4 ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ.

Β 

ГалСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

Β 

Π£ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½Β Image Gallery Π²Ρ‹ смоТСтС прямо ΠΈΠ· Π°Π΄ΠΌΠΈΠ½-ΠΏΠ°Π½Π΅Π»ΠΈ WordPress. ΠŸΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° страницу: ΠŸΠ»Π°Π³ΠΈΠ½Ρ‹ – Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½ΠΎΠ²Ρ‹ΠΉ, Π²Π²Π΅Π΄ΠΈΡ‚Π΅ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Π° Π² Ρ„ΠΎΡ€ΠΌΡƒ поиска, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Enter, установитС ΠΈ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΏΠ»Π°Π³ΠΈΠ½.

Β 

Image Gallery

Β 

Π”Π°Π»Π΅Π΅, послС установки ΠΈ Π°ΠΊΡ‚ΠΈΠ²Π°Ρ†ΠΈΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Π°, ΠΏΠ΅Ρ€Π΅ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° страницу: NewΒ Image Gallery. Π—Π΄Π΅ΡΡŒ Ρƒ вас Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ всС созданныС Π³Π°Π»Π΅Ρ€Π΅ΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π½ΠΎΠ²ΡƒΡŽ Π³Π°Π»Π΅Ρ€Π΅ΡŽ, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π²Π²Π΅Ρ€Ρ…Ρƒ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ – Add Image Gallery.

Β 

Image Gallery

Β 

Π”Π°Π»Π΅Π΅, Π½Π° страницС создания Π³Π°Π»Π΅Ρ€Π΅ΠΈ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π½Π°Π·Π²Π°Π½ΠΈΠ΅ для Π³Π°Π»Π΅Ρ€Π΅ΠΈ. Π§Ρ‚ΠΎΠ±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ изобраТСния Π² Π³Π°Π»Π΅Ρ€Π΅ΡŽ, Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ, Π·Π΅Π»Ρ‘Π½ΡƒΡŽ ΠΊΠ½ΠΎΠΏΠΊΡƒ –

Add Image. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ изобраТСния Π½Π°Π·Π²Π°Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π² лайтбокс ΠΎΠΊΠ½Π΅.

Β 

галСрСя WordPress ΠΏΠ»Π°Π³ΠΈΠ½

Β 

Π Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ настройки:

– Gallery Thumbnail Size, Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

– Colums On Large Desktops, ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ количСство ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ для Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранов, ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ΠΎΠ².

– Colums On Desktops, количСство ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ для стандартных ПК.

– Colums On Tablets, количСство ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ для ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚ΠΎΠ².

– Colums On Phones, количСство ΠΊΠΎΠ»ΠΎΠ½ΠΎΠΊ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.

– Light Box Style, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² лайтбокс ΠΎΠΊΠ½Π΅.

– Image Hover Effect Type, ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ эффСкт ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π»ΠΈΠ±ΠΎ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ.

– Hide Thumbnails Spacing, Ссли Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ β€œYes” галСрСя Π±ΡƒΠ΄Π΅Ρ‚ Π±Π΅Π· Π³Ρ€Π°Π½ΠΈΡ†, Ссли Π²Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ β€œNo” галСрСя Π±ΡƒΠ΄Π΅Ρ‚ с Π³Ρ€Π°Π½ΠΈΡ†Π°ΠΌΠΈ.

– Gallery Thumbnail Order, ΠΌΠΎΠΆΠ½ΠΎ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Ρ‚ΠΈΠΏ сортировки ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

– Custom CSS, ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ свои CSS стили для Π³Π°Π»Π΅Ρ€Π΅ΠΈ.

Β 

ПослС настройки Π³Π°Π»Π΅Ρ€Π΅ΠΈ, Π²Π²Π΅Ρ€Ρ…Ρƒ страницы справа Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ – ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒ. ПослС Ρ‡Π΅Π³ΠΎ скопируйтС ΡˆΠΎΡ€Ρ‚ΠΊΠΎΠ΄ Π³Π°Π»Π΅Ρ€Π΅ΠΈ.

Β 

ΡˆΠΎΡ€Ρ‚ΠΊΠΎΠ΄ Π³Π°Π»Π΅Ρ€Π΅ΠΈ

Β 

Π”Π°Π»Π΅Π΅, Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΡˆΠΎΡ€Ρ‚ΠΊΠΎΠ΄ Π½Π° страницу создания записи ΠΈΠ»ΠΈ страницы. ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ ΠΈΠ»ΠΈ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΡƒΠΉΡ‚Π΅ страницу.

Β 

ΡˆΠΎΡ€Ρ‚ΠΊΠΎΠ΄ галСрСя страница

Β 

Всё Π³ΠΎΡ‚ΠΎΠ²ΠΎ! На вашСм сайтС Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ Π‘Ρ‚ΠΈΠ»ΡŒΠ½Π°Ρ галСрСя!

Β 

ΠžΡΡ‚Π°Π»ΠΈΡΡŒ вопросы? Напиши ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ! Π£Π΄Π°Ρ‡ΠΈ!

Β 

Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π³Π°Π»Π΅Ρ€Π΅ΠΉ для сайта

ΠŸΡ€ΠΈΠ²Π΅Ρ‚, Π΄Ρ€ΡƒΠ·ΡŒΡ. БСгодня Π±ΡƒΠ΄Π΅Ρ‚ достаточно ΠΏΡ€ΠΎΡΡ‚Π΅Π½ΡŒΠΊΠ°Ρ ΡΡ‚Π°Ρ‚ΡŒΡ ΠΏΡ€ΠΎ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ Π³Π°Π»Π΅Ρ€Π΅ΠΈ для сайта, Π² нашСм случаС, для ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠ³ΠΎ Π»Π΅Π½Π΄ΠΈΠ½Π³Π°. Π’ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв ΠΌΡ‹ Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… CMS ΠΏΡ€ΠΈ создании посадочных страниц ΠΈ Π½ΠΎΠ²ΠΈΡ‡ΠΊΠΎΠ² Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚ слоТности ΠΏΡ€ΠΈ создании ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π°.

Π― ΡƒΠΆΠ΅ писал ΠΎ слайдСрах, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡΡŒ, Π½ΠΎ Π½Π΅Π΄Π°Π²Π½ΠΎ ΠΌΠ½Π΅ написал ΠΎΠ΄ΠΈΠ½ ΠΈΠ· Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ, Π² Ρ€Π°Π·Π΄Π΅Π» «ваши прСдлоТСния», с вопросом ΠΊΠ°ΠΊ ΠΈΡ… Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° Π»Π΅Π½Π΄ΠΈΠ½Π³Π΅, Π° ΠΏΠΎ Ρ‚Ρ€Π°Π΄ΠΈΡ†ΠΈΠΈ всС Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΡΠΏΡ€Π°ΡˆΠΈΠ²Π°Π΅Ρ‚Π΅ Ρ‚Π°ΠΌ, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ, Π² ΠΏΠ΅Ρ€Π²ΡƒΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ прСвращаСтся Π² ΡΡ‚Π°Ρ‚ΡŒΠΈ Π½Π° Π±Π»ΠΎΠ³Π΅.

Π—Π½Π°ΡŽ, для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΡΡ‚Π°Ρ‚ΡŒΡ Π½Π΅ Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Π°, Π½ΠΎ поучаствуйтС хотя Π±Ρ‹ Π² коммСнтариях ΠΈ подскаТитС, ΠΊΠ°ΠΊΠΈΠΌ скриптом ΠΈΠ»ΠΈ своим Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ΡΡŒ Π²Ρ‹. Π’Π΅Π΄ΡŒ ΠΌΠ½Π΅Π½ΠΈΠ΅ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ использованиС ΠΊΠ°ΠΊΠΈΡ…-Ρ‚ΠΎ Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… jQuery-ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для создания Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ β€” это прСступлСниС Π² 2019 Π³ΠΎΠ΄Ρƒ ΠΎΡ‡Π΅Π½ΡŒ Π΄Π°ΠΆΠ΅ распространСно. К ΠΊΠ°ΠΊΠΎΠΉ ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅ΡΡŒ Π²Ρ‹?

МнС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ лСнь Π΄Π΅Π»Π°Ρ‚ΡŒ свою Π³Π°Π»Π΅Ρ€Π΅ΡŽ, Π° Π²ΠΎΡ‚ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π° послСдниС 2 β€” 3 Π³ΠΎΠ΄Π° β€” это Π΄Π°, дСлаю Π½Π° чистом js, ΠΈΠ»ΠΈ, Ссли ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ jQuery, Ρ‚ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽ Π΅Π³ΠΎ, Π½ΠΎ Π½Π΅ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°ΡŽ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½.

ВСрнСмся ΠΊ Π³Π°Π»Π΅Ρ€Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Π‘ΠΊΡ€ΠΈΠΏΡ‚Ρ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ для Π»Π΅Π½Π΄ΠΈΠ½Π³Π°

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ, для Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»Π° я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ 1 ΠΈΠ· Π΄Π²ΡƒΡ… ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ². Π’ 90% случаСв, ΠΎΠ½ΠΈ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ Π·Π°ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ ΠΏΠΎΡ‚Ρ€Π΅Π±Π½ΠΎΡΡ‚ΡŒ Π·Π°ΠΊΠ°Π·Ρ‡ΠΈΠΊΠ° Π² Π³Π°Π»Π΅Ρ€Π΅Π΅. Π­Ρ‚ΠΎ:

ΠžΠ±Ρ‹Ρ‡Π½ΠΎ, это всС ΠΆΠ΅ fancybox. На Π΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΠΈ ΠΏΠΎΠΊΠ°ΠΆΡƒ ΠΊΠ°ΠΊ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π³Π°Π»Π΅Ρ€Π΅ΡŽ для Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ. Иногда, приходится ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ этот скрипт с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌ для создания слайдСра Owl carousel ΠΈΠ»ΠΈ Slick slider, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… я рассказывал Π² ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅. ΠŸΠΎΠ»ΡƒΡ‡Π°Π΅Ρ‚ΡΡ довольно симпатично ΠΈ Π½Π΅ ΠΊΠΎΠ½Ρ„Π»ΠΈΠΊΡ‚ΡƒΠ΅Ρ‚.

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° Π»ΠΈΡ†Π΅Π½Π·ΠΈΠΈ ΠΈ ΠΈΡ… условия. Π—Π½Π°ΡŽ, Ρ‡Ρ‚ΠΎ Π² странах БНГ всС ΠΏΡ€ΠΎΠΏΡƒΡΠΊΠ°ΡŽΡ‚ эту ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΌΠΈΠΌΠΎ ΡƒΡˆΠ΅ΠΉ, Π½ΠΎ Ссли Π΄Π΅Π»Π°Π΅Ρ‚ сайт для Π·Π°Ρ€ΡƒΠ±Π΅ΠΆΠ½ΠΎΠ³ΠΎ Ρ€Ρ‹Π½ΠΊΠ°, Ρ‚ΠΎ Π·Π° Π»ΠΈΡ†Π΅Π½Π·ΠΈΡŽ fancybox придСтся Π·Π°ΠΏΠ»Π°Ρ‚ΠΈΡ‚ΡŒ. Для Π½Π΅ коммСрчСских ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠ² β€” всС бСсплатно.

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° landing page

Fancybox

Π˜Ρ‚Π°ΠΊ, ΠΏΠΎΡ‡Π΅ΠΌΡƒ fancybox? Π”Π° ΠΏΠΎΡ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ Π»Π΅Π³ΠΊΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ, прост Π² использовании ΠΈ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для любого Ρ‚ΠΈΠΏΠ° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π° Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ТСсты, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ, Π½Π΅ захламляя Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ привязку ΠΊ динамичСски добавляСмым элСмСнтам ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. НавСрноС, ΠΊΠΎ ΠΌΠ½ΠΎΠ³ΠΈΠΌ ΠΏΠ»Π°Π³ΠΈΠ½Π°ΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚, Π½ΠΎ я Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ Π½Π΅ встрСчал.

ΠŸΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

УбСТдаСмся, Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ jQuery ΠΈ послС Π½Π΅Π³ΠΎ цСпляСм Ρ„Π°ΠΉΠ»Ρ‹ ΠΏΠ»Π°Π³ΠΈΠ½Π°. ΠšΡΡ‚Π°Ρ‚ΠΈ, ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ Π»Π΅ΠΆΠΈΡ‚ Π½Π° jsDelivr, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… CDN ΠΈ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΡ‚Ρ‚ΡƒΠ΄Π°.


<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>

ПослС этого ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Ρ‚ΡŒ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ссылки, кликая ΠΏΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. ДСлаСтся это ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ с ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Π΄Π°Ρ‚Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ²:


<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>

Π’ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠ΅ это ΠΈ всС, Ρ‡Ρ‚ΠΎ касаСтся Π³Π°Π»Π΅Ρ€Π΅ΠΈ. Π”Π°Π»Π΅Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΡ‚ вашСго вообраТСния зависит, ΠΊΠ°ΠΊ это ΠΏΠΎΠ΄Π°Ρ‚ΡŒ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎΠΌΡƒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ.

Но fancybox ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΊΠ°ΠΊ модальноС ΠΎΠΊΠ½ΠΎ для любого Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΡƒΡŽ Ρ„ΠΎΡ€ΠΌΡƒ ΠΈΠ»ΠΈ ΡƒΠ²Π΅Π΄ΠΎΠΌΠ»Π΅Π½ΠΈΠ΅ ΠΎΠ± ΠΎΠΏΠ»Π°Ρ‚Π΅. ДСлаСтся это ΠΏΡƒΡ‚Π΅ΠΌ создания ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π° с ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌ Β«idΒ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΈΠ·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎ скрыт. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ Π² стилях, Π½ΠΎ для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° ΠΌΠΎΠΆΠ½ΠΎ Ρ‚Π°ΠΊ:


<div>
	<h3>ΠŸΡ€ΠΈΠ²Π΅Ρ‚</h3>
	<p>ВСкст модального ΠΎΠΊΠ½Π°</p>
</div>

Π’Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒΡΡ ΠΎΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:


<a data-fancybox data-src="#hidden-content" href="javascript:;">
	Π’Ρ‹Π·ΠΎΠ² ΠΎΠΊΠ½Π°
</a>

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅, всС ΠΎΡ‡Π΅Π½ΡŒ просто. Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π±ΠΎΠ»Π΅Π΅ Π³ΠΈΠ±ΠΊΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½, заглянитС Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ. Π’Π°ΠΌ ΠΌΠ½ΠΎΠ³ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… настроСк ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… ΠΌΠ΅Π½ΡΡ‚ΡŒ внСшний Π²ΠΈΠ΄, эффСкты ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ², Π΄Π»ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ открытия ΠΈ закрытия, Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ своих классов ΠΈ ΠΌΠ½ΠΎΠ³ΠΎΠ΅ Π΄Ρ€ΡƒΠ³ΠΎΠ΅. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π΅ΡΡ‚ΡŒ API.

Π”Π΅ΠΌΠΎ

Записал нСбольшоС Π²ΠΈΠ΄Π΅ΠΎ с ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠΌ Ρ€Π°Π±ΠΎΡ‚Ρ‹ ΠΏΠ»Π°Π³ΠΈΠ½Π° прямо с сайта Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

15 Адаптивных jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Lightbox

Много Ρ€Π°Π· Π΄Π΅Π»Π°Π» ΠΎΠ±Π·ΠΎΡ€Ρ‹ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, собрал ΠΎΠ±ΡˆΠΈΡ€Π½ΡƒΡŽ ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΡŽ эффСктных слайд-ΡˆΠΎΡƒ ΠΈ лайтбокс-ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ². Π•ΡΡ‚ΡŒ Π² ΠΊΠΎΠΏΠΈΠ»ΠΊΠ΅ ΠΈ Lighbox ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° CSS3, Π±Π΅Π· ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… js-Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ. Но врСмя Π½Π΅ стоит Π½Π° мСстС, ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ всё Ρ‡Π°Ρ‰Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ для сёрфинга ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π° Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ устройства, Π° Π·Π½Π°Ρ‡ΠΈΡ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ Π²Π΅Π±-элСмСнтов ΠΈ Π² частности Ρ„ΠΎΡ‚ΠΎ-Π³Π°Π»Π΅Ρ€Π΅ΠΉ с эффСктом «лайтбокс» становится ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· ΠΏΡ€ΠΈΠΎΡ€ΠΈΡ‚Π΅Ρ‚ΠΎΠ², Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π΅Ρ€Π°ΠΌ ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°ΠΌ стоит ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽ ΠΎΡ‡Π΅Ρ€Π΅Π΄Π½ΡƒΡŽ ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΡƒ ΠΈΠ· 15 Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… jQuery ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² Lightbox, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Ρ€ΡƒΠΆΠ°Ρ‚, ΠΊΠ°ΠΊ с дСсктопными Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ, Ρ‚Π°ΠΊ ΠΈ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Π²ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ Π² экраны Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств ( Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠΈ, смартфоны, ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Ρ‹ ΠΈ Ρ‚.Π΄.).

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π΄Π΅ΠΌΠΎ Π½Π° сайтах Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², скачивайтС ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ²ΡˆΠΈΠΉΡΡ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΈ Ρ‚Π²ΠΎΡ€ΠΈΡ‚Π΅, Ρ‚Π²ΠΎΡ€ΠΈΡ‚Π΅, Ρ‚Π²ΠΎΡ€ΠΈΡ‚Π΅…

1. iLightbox

iLighboxΒ β€” это лёгкий Лайтбокс-ΠΏΠ»Π°Π³ΠΈΠ½ jQuery с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ ΡˆΠΈΡ€ΠΎΠΊΠΎΠ³ΠΎΒ Π΄ΠΈΠ°ΠΏΠ°Π·ΠΎΠ½Π°Β Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ…Β Ρ‚ΠΈΠΏΠΎΠ² Ρ„Π°ΠΉΠ»ΠΎΠ²:  изобраТСния, Π²ΠΈΠ΄Π΅ΠΎ, Flash / SWF,  содСрТаниС Ajax, Ρ„Ρ€Π΅ΠΉΠΌΡ‹ ΠΈ встроСнныС ΠΊΠ°Ρ€Ρ‚Ρ‹. Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ Ρ‚Π°ΠΊΠΆΠ΅ добавляСт ΠΊΠ½ΠΎΠΏΠΊΠΈ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй, Ρ‡Ρ‚ΠΎ позволяСт ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΎΠ±ΠΌΠ΅Π½ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ Ρ‡Π΅Ρ€Π΅Π·Β Β Facebook, Twitter ΠΈΠ»ΠΈ Reddit. ΠžΡ‚Π»ΠΈΡ‡Π½Π°Ρ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΎΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΠΈ эффСктных слайд-ΡˆΠΎΡƒ, Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ-Ρ€ΠΎΠ»ΠΈΠΊΠΎΠ², с просмотром Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ, ΠΈ полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ°Ρ….

iLighbox Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ довольно ΡˆΡƒΡΡ‚Ρ€ΠΎ ΠΈ ΠΏΡ€ΠΈ просмотрС Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах, Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅ΠΌΡ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚. ΠšΡ€ΠΎΠΌΠ΅ всСго ΠΏΡ€ΠΎΡ‡Π΅Π³ΠΎ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ этот ΠΏΠ»Π°Π³ΠΈΠ½, Π²Ρ‹ Π»Π΅Π³ΠΊΠΎ смоТСтС Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Π±Π»ΠΎΠΊΠΎΠ² ΠΏΠΎ Ρ‚ΠΈΠΏΡƒ модального ΠΎΠΊΠ½Π°.

  • Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ: jQuery
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: IE7+, Chrome, Firefox, Safari ΠΈ Opera
  • ЛицСнзия: А Ρ‡Ρ‘Ρ€Ρ‚ Π΅Ρ‘ Π·Π½Π°Π΅Ρ‚)))


Β 

2. SwipeBox

SwipeboxΒ β€” это ΠΏΠ»Π°Π³ΠΈΠ½ JQuery с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ сСнсорных экранов ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌ. Помимо ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ встраиваСмоС Π²ΠΈΠ΄Π΅ΠΎ с Youtube ΠΈ Vimeo. Swipebox ΠΎΡ‡Π΅Π½ΡŒ просто ΠΏΡ€ΠΈΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ ΠΊ Π»ΡŽΠ±ΠΎΠΌΡƒ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Ρƒ, ΠΏΠ»Π°Π³ΠΈΠ½ ΠΈΠΌΠ΅Π΅Ρ‚ нСсколько ΠΈΠ½Ρ‚ΡƒΠΈΡ‚ΠΈΠ²Π½ΠΎ-понятных ΠΎΠΏΡ†ΠΈΠΉ для настройки Π΅Π³ΠΎ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» ΠΈ повСдСния. На сайтС Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ° ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅ΠΉΡˆΠ°Ρ докумСнтация ΠΏΠΎ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡŽ ΠΈ использованию ΠΏΠ»Π°Π³ΠΈΠ½Π°, Π±Π΅Π· лишнСй Π²ΠΎΠ΄Ρ‹ всё Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π΄Π΅Π»Ρƒ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Ρ‡Ρ‚ΠΎ, ΠΊΡƒΠ΄Π°, ΠΈ Π·Π°Ρ‡Π΅ΠΌ, Π΄ΡƒΠΌΠ°ΡŽ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ слоТно.

  • Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ: jQuery
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: IE9+, Chrome, Safari, Firefox, Opera, IOS4+, Android ΠΈ Windows Phone
  • ЛицСнзия: НС ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠ», ΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΠΏΠΎΠ²Π΅Π·Ρ‘Ρ‚)))


Β 

3. MagnificPopup

Π”Π°Π²Π½ΠΎ извСстный ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠΎ сСбя Π·Π°Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π²ΡˆΠΈΠΉ лайтбокс-ΠΏΠ»Π°Π³ΠΈΠ½ Π½Π° jQuery ΠΈΠ»ΠΈ Zepto.js. Автор ΠΏΠ»Π°Π³ΠΈΠ½Π°Β β€” Π”ΠΌΠΈΡ‚Ρ€ΠΈΠΉ Π‘Π΅ΠΌΠ΅Π½ΠΎΠ², ΡΠ²Π»ΡΡŽΡ‰ΠΈΠΉΡΡ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠΌ ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½Π° PhotoSwipe, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ расскаТу Ρ‡ΡƒΡ‚ΡŒ Π½ΠΈΠΆΠ΅. ΠŸΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ΡΡ Π² Π²ΠΈΠ΄Π΅ ΠΏΠ»Π°Π³ΠΈΠ½Π° jQuery/Zepto, ΠΈΠΌΠ΅Π΅Ρ‚ Π±ΠΎΠ»Π΅Π΅ ΡˆΠΈΡ€ΠΎΠΊΠΈΠ΅ возмоТности ΠΎΡ‚ΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π² PhotoSwipe, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π²ΠΈΠ΄Π΅ΠΎ, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ ΠΈ Ajax содСрТания, рСализация ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΎΠΊΠΎΠ½ с встроСнными Ρ„ΠΎΡ€ΠΌΠ°ΠΌΠΈ. По всСм критСриям, это Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ инструмСнт Π² ΠΎΠ±ΠΎΠΉΠΌΠ΅ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°. ΠžΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎ имССтся ΠΏΠ»Π°Π³ΠΈΠ½ для WordPress ΠΈ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅ΠΉΡˆΠ°Ρ докумСнтация ΠΏΠΎ настройкС, ΠΈ использованию. Π£Π΄Ρ€ΡƒΡ‡Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ отсутствиС Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Π½Π° Русском, судя ΠΏΠΎ ΠΈΠΌΠ΅Π½ΠΈ ΠΈ Ρ„Π°ΠΌΠΈΠ»ΠΈΠΈ Π°Π²Ρ‚ΠΎΡ€ Π²Ρ€ΠΎΠ΄Π΅ Π±Ρ‹ Русский, Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΏΠΎΠ½ΠΈΠΌΠ°Π» ΠΈΠ·-Π·Π° врСдности это, ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΈΠ·-Π·Π° ΠΌΠ½ΠΈΠΌΠΎΠ³ΠΎ осознания своСй наворочСнности, Π΄Π° мля. Ну Π΄Π° Π»Π°Π΄Π½ΠΎ, ΠΊΠΎΠΌΡƒ ΠΎΠ½ΠΎ Π½Π°Π΄ΠΎ разбСрётся, ΠΌΡ‹ Ρ‚ΠΎΠΆΠ΅ Ρ‡Π°ΠΉ Π½Π΅ всмятку сварСны))).

  • Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ: jQuery 1.9.1+, ΠΈΠ»ΠΈ Zepto.js
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: IE7 (partially), IE8+, Chrome, Firefox, Safari ΠΈ Opera
  • ЛицСнзия: MIT license


Β 

4. PhotoSwipe

Π•Ρ‰Ρ‘ ΠΎΠ΄Π½Π° Javascript-галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΎΡ‚ Дмитрия Π‘Π΅ΠΌΡ‘Π½ΠΎΠ²Π°, Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠΈ ΠΎΡ‚ MagnificPopup Π±Π΅Π· ΠΊΠ°ΠΊΠΈΡ… Π±Ρ‹ Ρ‚ΠΎ Π½ΠΈ Π±Ρ‹Π»ΠΎ Π½Π°Π²ΠΎΡ€ΠΎΡ‚ΠΎΠ², Π½ΠΎ Π² Ρ‚ΠΎ ΠΆΠ΅ врСмя, вСсь самый Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π» Π² Π½Π°Π»ΠΈΡ‡ΠΈΠΈ. ΠžΡ€Π³Π°Π½ΠΈΠ·Π°Ρ†ΠΈΡ Π³Π°Π»Π΅Ρ€Π΅ΠΉ нСзависимо ΠΎΡ‚ наличия Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ jQuery, просмотр Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΌ ΠΈ полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ°Ρ…, ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с элСмСнтами Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, подписи ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌ ΠΈ элСмСнты управлСния, адаптивная вёрстка, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° управлСния ТСстами сСнсорных экранов, для простой ΠΈ Π»Ρ‘Π³ΠΊΠΎΠΉ Ρ„ΠΎΡ‚ΠΎ-Π³Π°Π»Π΅Ρ€Π΅ΠΈ всСго этого Π²ΠΏΠΎΠ»Π½Π΅ достаточно. Вся нСобходимая докумСнтация Π² Π½Π°Π»ΠΈΡ‡ΠΈΠΈ.

  • Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ: НСт
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: IE8+, Chrome, Firefox, Safari, Opera ΠΈ Π΅Ρ‰Ρ‘ ΠΏΠ°Ρ€ΠΎΡ‡ΠΊΠ° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ²
  • ЛицСнзия: MIT license


Β 

5. Nivo Lightbox

Π‘Ρ‚Π°Ρ€Ρ‹ΠΉ-Π΄ΠΎΠ±Ρ€Ρ‹ΠΉ Nivo ΠΎΡ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² студии Dev7studios, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄Π°Π²Π½ΠΎ ΠΈ с Π·Π°Π²ΠΈΠ΄Π½Ρ‹ΠΌ постоянством Ρ€Π°Π΄ΡƒΡŽΡ‚ нас своими Ρ€Π°Π±ΠΎΡ‚Π°ΠΌΠΈ. Nivo Lightbox ΠΏΠ»Π°Π³ΠΈΠ½, ΠΊΠ°ΠΊ Π°Π²Ρ‚ΠΎΠ½ΠΎΠΌΠ½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery прСдоставляСтся Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ бСсплатно, Π° Π·Π° спСциализированный ΠΏΠ»Π°Π³ΠΈΠ½ для WordPress придётся ΠΎΡ‚Π²Π°Π»ΠΈΡ‚ΡŒ ΠΎΡ‚ $39.00 Π΄ΠΎ $149.00 Π² зависимости ΠΎΡ‚ Ρ‚ΠΈΠΏΠ° Π»ΠΈΡ†Π΅Π½Π·ΠΈΠΈ. Π₯отя, скаТу ΠΏΠΎ сСкрСту, Ссли Ρ…ΠΎΡ€ΠΎΡˆΠΎ ΠΏΠΎΠΈΡΠΊΠ°Ρ‚ΡŒ Π² ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π°Ρ…, ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Ρ€Ρ‹Ρ‚ΡŒ ΠΈ халявный Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ Ссли Π²Π°ΠΌ позволят ваши ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹.
БСсплатный Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΏΠ»Π°Π³ΠΈΠ½Π° ΡƒΠΏΠ°ΠΊΠΎΠ²Π°Π½ всСми Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌΠΈ функциями, Π³ΠΈΠ±ΠΊΠΈΠ΅ настройки, нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² внСшнСго Π²ΠΈΠ΄Π°, Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ эффСкты ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² ΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ. ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Iframe, SWF, Π²ΠΈΠ΄Π΅ΠΎ с Youtube ΠΈ Vimeo. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΠ»Π°Π³ΠΈΠ½ ΠΎΡ‡Π΅Π½ΡŒ быстро, практичСски Π±Π΅Π· Π·Π°Π΄Π΅Ρ€ΠΆΠ΅ΠΊ, ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹ΠΉ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ вписываСтся Π² Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ экранов ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.

  • Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ: jQuery
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: IE9+, Chrome, Firefox, Safari ΠΈ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ Opera
  • ЛицСнзия: MIT license


Β 

6. Lightbox для Bootstrap

Π£Π΄ΠΈΠ²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, Π½ΠΎ Π² Ρ‚Π°ΠΊΠΎΠΌ популярном Ρ„Ρ€Π΅ΠΉΠΌΠ²ΠΎΡ€ΠΊΠ΅ ΠΊΠ°ΠΊ Bootstrap, Lightbox ΠΊΠ°ΠΊ Ρ‚Π°ΠΊΠΎΠ²ΠΎΠΉ отсутствуСт, прСдставлСнный, ΠΎΠ΄Π½ΠΎΠΈΠΌΡ‘Π½Π½Ρ‹ΠΉ ΠΏΠ»Π°Π³ΠΈΠ½, Π±Ρ‹Π» создан Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ситуёвину. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π² Bootstrap Π΅ΡΡ‚ΡŒ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π½Ρ‹Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Π΅ ΠΎΠΊΠ½Π°, Π²ΠΎΡ‚ ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° Π½ΠΈΡ… ΠΈ опираСтся Ρ€Π°Π±ΠΎΡ‚Π° ΠΏΠ»Π°Π³ΠΈΠ½Π° Lightbox. Если Π²Ρ‹ ΠΏΠ»ΠΎΡ‚Π½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Bootstrap, я Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ эту Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ. Плагин Ρ…ΠΎΡ€ΠΎΡˆΠΎ интСгрируСтся с Π±Π°Π·ΠΎΠ²Ρ‹ΠΌ ΠΊΠΎΠ΄ΠΎΠΌ Bootstrap. Π’ ΠΈΡ‚ΠΎΠ³Π΅ Π²Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚Π΅ ΠΏΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Ρ‹Π΅ Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ просмотра Π²ΠΈΠ΄Π΅ΠΎ с YouTube Π² модальном ΠΎΠΊΠ½Π΅.

  • Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ: jQuery ΠΈ Bootstrap Modal
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: IE9+, Chrome, Firefox, Safari ΠΈ ΠΊΠΎΠ½Π΅Ρ‡Π½ΠΎ Opera
  • ЛицСнзия: GNU license


Β 

7. ImageLightbox

Π­Ρ‚ΠΎ лайтбокс ΠΏΠ»Π°Π³ΠΈΠ½ Ρ‚ΠΎΠΆΠ΅ Π±Π΅Π· особых Π½Π°Π²ΠΎΡ€ΠΎΡ‚ΠΎΠ². Π Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΎΡ‚ΡΡŽΠ΄Π° стало Π±Ρ‹Ρ‚ΡŒ ΠΈ Π½Π°Π·Π²Π°Π½ΠΈΠ΅, Π½ΠΈ Π²ΠΈΠ΄Π΅ΠΎ, Π½ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚ΠΈΠΏΡ‹ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ, всё Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Ρ€Π°Π±ΠΎΡ‚Ρƒ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ. ГалСрСя с этим ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ получаСтся динамичная ΠΈ Π»Π΅Π³ΠΊΠΎ настраиваСмая, Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ HTML Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ Π½Π΅ трСбуСтся, достаточно ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ‚Π΅Π³Π° <img> с ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ΠΎΠΌ imagelightbox. Плагин Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ просто ΠΈ быстро, имССтся Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ подписи, элСмСнты Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ ΠΊΠ½ΠΎΠΏΠΊΡƒ закрытия, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ закрываСтся лайтбокс ΠΏΠΎ ΠΊΠ»ΠΈΠΊΡƒ Π²Π½Π΅ изобраТСния. Π£Π²Π΅Ρ€Π΅Π½, этот ΠΏΠ»Π°Π³ΠΈΠ½ ΠΌΠ½ΠΎΠ³ΠΈΠΌ придётся ΠΏΠΎ Π΄ΡƒΡˆΠ΅.

  • Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ: jQuery
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: IE9+, Chrome, Firefox, Safari ΠΈ Opera
  • ЛицСнзия: На Π½Π΅Ρ‚ ΠΈ суда Π½Π΅Ρ‚


8. MiniLightbox

НазваниС ΠΏΠ»Π°Π³ΠΈΠ½Π° Π³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ само Π·Π° сСбя. Всё ΠΏΠΎ самому ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌΡƒ, Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° jQuery Π½Π΅ Π½ΡƒΠΆΠ½Π°, Π½Π΅Ρ‚ надобности Π² Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅, ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Ρ‚Π΅Π³Π° <img> с Π·Π°Π΄Π°Π½Π½Ρ‹ΠΌ классом для ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹, ΠΈΠ»ΠΈ ΠΆΠ΅ использованиС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° data-image-opened, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ указываСтся ΠΏΡƒΡ‚ΡŒ Π΄ΠΎ ΠΏΠΎΠ»Π½ΠΎΡ€Π°Π·ΠΌΠ΅Ρ€Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ. Ни Π²ΠΈΠ΄ΠΈΠΎ, Π½ΠΈ Ρ„Ρ€Π΅ΠΉΠΌΡ‹ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ‚ΠΈΠΏΡ‹ содСрТания ΠΊΡ€ΠΎΠΌΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ. Если Π²Ρ‹ Π½Π΅ ΠΎΠ·Π°Π±ΠΎΡ‡Π΅Π½Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ старыми Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ ΠΈ Π²Π°ΠΌ Π½Π΅ трСбуСтся ΠΊΠΎΠΌΠ±Π°ΠΉΠ½, для отобраТСния Ρ€Π°Π·Π½ΠΎΠ³ΠΎ Ρ€ΠΎΠ΄Π° содСрТания, этот ΠΌΠ°Π»Ρ‹Ρˆ вСсом Π² 2ΠΊΠ± справится с поставлСнной Π·Π°Π΄Π°Ρ‡Π΅ΠΉ, ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ваши Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ, ΠΈΠ»ΠΈ просто ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.

  • Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ: НСт
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: IE10+, Chrome, Firefox, Safari ΠΈ Opera
  • ЛицСнзия: MIT license


Β 

9. LightCase

Lightcase это Π΅Ρ‰Ρ‘ ΠΎΠ΄ΠΈΠ½ Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ лайтбокс-ΠΏΠ»Π°Π³ΠΈΠ½. Он поставляСтся с нСсколькими Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°ΠΌΠΈ Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Ρ‡Ρ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ взаимодСйствиС с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ Π±ΠΎΠ»Π΅Π΅ ΠΆΠΈΠ²Ρ‹ΠΌ ΠΈ насыщСнным, ΠΏΠ»Π°Π²Π½ΠΎΠ΅ появлСниС ΠΈ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠ΅, скролинг справа, слСва, снизу, ΠΈ свСрху. ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, ΠΏΠ»Π°Π³ΠΈΠ½ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ Ρ‚ΠΈΠΏΡ‹ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ встроСнноС Π²ΠΈΠ΄Π΅ΠΎ с Youtube, HTML, SWF, HTML5 Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Ρ„ΠΎΡ€ΠΌΡ‹ Π²Ρ…ΠΎΠ΄Π°, iframe ΠΈ ΠΊΠ°Ρ€Ρ‚Ρ‹ Google. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ использования элСмСнтов управлСния (Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ) ΠΈ подписСй ΠΊ изобраТСниям. Π’ Ρ†Π΅Π»ΠΎΠΌ Π΄ΠΎΠ±Ρ€ΠΎΡ‚Π½Ρ‹ΠΉ ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ прСдставлСния практичСски любого содСрТания.

  • Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ: jQuery ΠΈ CSS3
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: IE9+, Chrome, Firefox, Safari ΠΈ Opera
  • ЛицСнзия: GPL license


Β 

10. Yalb

Π•Ρ‰Π΅ ΠΎΠ΄ΠΈΠ½ лайтбокс Π² Π΄Π²ΡƒΡ… Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π°Ρ… исполнСния. ВСрсия Yalb (Vanilla) построСна Π½Π° чистом Javascript, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ js-Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ доступны Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. ВсС Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ осущСствляСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS-Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ²(transition). Если Π²Ρ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ Π±Ρ‹ JQuery-Π²Π΅Ρ€ΡΠΈΡŽ, Π΅ΡΡ‚ΡŒ ΠΈ такая, ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° jQuery.yalb

  • Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ: Javascript ΠΈΠ»ΠΈ jQuery
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: IE9+, Chrome, Firefox, Safari ΠΈ Opera
  • ЛицСнзия: MIT license


Β 

11. FeatherLight

6 ΠΊ.Π±ΠΈΡ‚Π½Ρ‹ΠΉ lightbox-ΠΏΠ»Π°Π³ΠΈΠ½, для Π±ΠΎΠ»Π΅Π΅-ΠΌΠ΅Π½Π΅Π΅ ΠΏΠΎΠ΄ΠΊΠΎΠ²Π°Π½Π½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ², снаряТСн всСми самыми Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΌΠΈ функциями. Помимо ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ всСх распространённых Ρ‚ΠΈΠΏΠΎΠ² ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°(тСкст, изобраТСния, iframe, Ajax), присутствуСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ своё собствСнноС Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΠ΅ для этого ΠΏΠ»Π°Π³ΠΈΠ½Π°, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ вашим потрСбностям ΠΏΡ€ΠΈ создании Π½ΠΎΠ²ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Как всё это хозяйство(Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½ΠΈΡ) Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, особо Π½Π΅ Π²Π½ΠΈΠΊΠ°Π», Π½ΠΎ Ρ‚Π΅ ΠΊΠΎΠ³ΠΎ этот ΠΏΠ»Π°Π³ΠΈΠ½ вставит, Π΄ΡƒΠΌΠ°ΡŽ разбСрутся))).

  • Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ: jQuery
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: IE8+, Chrome, Firefox, Safari ΠΈ Opera
  • ЛицСнзия: MIT license


Β 

12. LightGallery

LightGalleryΒ β€” ΠΌΠ½ΠΎΠ³ΠΎΡ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ лайтбокс-ΠΏΠ»Π°Π³ΠΈΠ½ с мноТСством Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… возмоТностСй. ΠŸΠΎΡΡ‚Π°Π²Π»ΡΠ΅Ρ‚ΡΡ с Π±ΠΎΠ»Π΅Π΅ Ρ‡Π΅ΠΌ 20 ΠΎΠΏΡ†ΠΈΠΉ, для настройки ΠΌΠ΅Π»ΡŒΡ‡Π°ΠΉΡˆΠΈΡ… Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ Lightbox. Π—Π΄Π΅ΡΡŒ Π΅ΡΡ‚ΡŒ всё, Π½Ρƒ, ΠΈΠ»ΠΈ ΠΏΠΎΡ‡Ρ‚ΠΈ всё)). ΠŸΠΎΠ»Π½ΠΎΡ†Π΅Π½Π½Π°Ρ галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с Π°ΠΊΠΊΡƒΡ€Π°Ρ‚Π½ΠΎ выстроСнными ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π°ΠΌΠΈ, с элСмСнтами Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΎΠΉ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€. ΠŸΡ€ΠΎΡΡ‚Π°Ρ html-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° Π² Π²ΠΈΠ΄Π΅ нСупорядочСнного списка <ul> с использованиСм Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° data-src для ΠΏΠΎΠ»Π½ΠΎΡ€Π°Π·ΠΌΠ΅Ρ€Π½Ρ‹Ρ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ. Π’ΠΎΠΆΠ΅ самоС ΠΈ с Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ· Youtube ΠΈ Vimeo. Π—Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ всС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ Π²ΠΈΠ΄Π΅ΠΎ HTML5, MP4, WebM, Ogg… АнимированныС ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹, Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΉ ΠΌΠ°ΠΊΠ΅Ρ‚ с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, слайд-эффСкты ΠΈ ΠΏΠ»Π°Π²Π½Ρ‹Π΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ появлСния ΠΏΡ€ΠΈ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. Π’Π½Π΅ΡˆΠ½ΠΈΠΉ Π²ΠΈΠ΄ Π»Π΅Π³ΠΊΠΎ формируСтся ΠΈ настраиваСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. ΠŸΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Π°Ρ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ оптимизация ΠΊΠΎΠ΄Π°. Навигация с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρ‹ для дСсктопов, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ использования Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… ΡˆΡ€ΠΈΡ„Ρ‚-ΠΈΠΊΠΎΠ½ΠΎΠΊ. LightGalleryΒ β€” Π²ΠΎΡ‚ Π³Π΄Π΅ настоящий Β«ΠΊΠΎΠΌΠ±Π°ΠΉΠ½Β», Π³Π»Π°Π²Π½ΠΎΠ΅ Π½Π΅ ΠΏΠΎΡ‚Π΅Ρ€ΡΡ‚ΡŒΡΡ Π² ΠΎΠ±ΠΈΠ»ΠΈΠΈ настроСк ΠΈ ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹Ρ… возмоТностях этого ΠΏΠ»Π°Π³ΠΈΠ½Π°.
Π’Π΅ΠΌ ΠΊΠΎΠΌΡƒ Π½ΡƒΠΆΠ΅Π½ ΠΏΡ€ΠΈΠ»ΠΈΡ‡Π½Ρ‹ΠΉ слайдСр, Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° lightSlider ΠΎΡ‚ этих ΠΆΠ΅ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ².

  • Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ: jQuery
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android ΠΈ Windows Phone
  • ЛицСнзия: MIT license


Β 

13. StripJS

НСпривычная, я Π±Ρ‹ Π΄Π°ΠΆΠ΅ сказал: нСобычная рСализация lightbox, Ρ‚ΠΎΡ‡Π½Π΅Π΅, Π½Π΅ совсСм ΠΏΡ€ΠΈΠ²Ρ‹Ρ‡Π½ΠΎΠ΅ прСдставлСниС содСрТания, ΠΊΠΎΠ³Π΄Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ, Π² ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠΈ лайтбокса, ΠΏΠΎΡΠ²Π»ΡΡŽΡ‚ΡΡ справа, заполняя ΠΏΡ€ΠΈ этом Π½Π΅ вСсь экран, Π° лишь Π½Π° Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΏΠΎΠ»Π½ΠΎΡ€Π°Π·ΠΌΠ΅Ρ€Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ. На Π±ΠΎΠ»ΡŒΡˆΠΈΡ… экранах Ρ‚Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ понятСн, остаётся Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ взаимодСйствия со страницСй. На ΠΌΠ°Π»Π΅Π½ΡŒΠΊΠΈΡ… экранах ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств, вся эта инновационная конструкция, ΠΏΠ»Π°Π²Π½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ Π² классичСский «лайтбокс». Π—Π°Π΄ΡƒΠΌΠΊΠ° интСрСсная, посмотритС Π΄Π΅ΠΌΠΎ, ΠΌΠΎΠΆΠ΅Ρ‚ ΠΊΠΎΠ³ΠΎ ΠΈ вставит Ρ‚Π°ΠΊΠΎΠΉ ΠΊΡ€Π΅Π°Ρ‚ΠΈΠ².

  • Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ: jQuery
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: IE7+, Chrome, Firefox, Safari, Opera, iOS 5+ ΠΈ Android 3+
  • ЛицСнзия: Creative Commons BY-NC-ND 3.0 license


Β 

14. LightLayer

ΠŸΡ€ΠΎΡΡ‚ΠΎΠΉ Π² использовании ΠΏΠ»Π°Π³ΠΈΠ½ лайтбокса, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ…ΠΎΡ€ΠΎΡˆΠΎ сочСтаСтся с Π»ΡŽΠ±Ρ‹ΠΌ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ΠΎΠΌ ΠΈ Ρ‚Π°ΠΊΠΆΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠΎ смотрится Π½Π° любом экранС. Π’ ΠΏΠ»Π°Π³ΠΈΠ½Π΅ LightLayer прСдставлСн ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΡŒ Π½Π°Π΄ мноТСством настроСк, Ρ‚Π°ΠΊΠΈΠΌΠΈ ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ Ρ†Π²Π΅Ρ‚Π° Ρ„ΠΎΠ½Π° ΠΈ стСпСни Π΅Π³ΠΎ прозрачности, ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π±Π°Π·ΠΎΠ²ΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°, Π²Ρ‹Π±ΠΎΡ€ эффСктов ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠ² ΠΏΡ€ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ/Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠΈ, Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ ΠΌΠ°Π½ΠΈΠΏΡƒΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ. Плагин ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с содСрТаниСм Π²Π½Π΅ΡˆΠ½ΠΈΡ… Π²Π΅Π±-сайтов, встроСнными Π²ΠΈΠ΄Π΅ΠΎ-ΠΏΠ»Π΅Π΅Ρ€Π°ΠΌΠΈ ΠΈ ΠΊΠ°Ρ€Ρ‚Π°ΠΌΠΈ.

  • Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ: jQuery
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: IE9+, Chrome, Firefox, Safari ΠΈ Opera
  • ЛицСнзия: MIT license


Β 

15. FluidBox

FluidboxΒ β€” лайтбокс ΠΏΠ»Π°Π³ΠΈΠ½ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ всСвозмоТных Π²Π°Ρ€ΠΈΠ°Ρ†ΠΈΠΉ прСдставлСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΏΠΎ-настоящСму впСчатляСт. Плагин Π·Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с изобраТСниями Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½ΠΎΠΌ исполнСнии, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ изобраТСния, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΌ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ ΠΎΠ±Ρ€Π°ΠΌΠ»Ρ‘Π½Π½Ρ‹Π΅ Ρ€Π°ΠΌΠΊΠΎΠΉ, ΠΈ ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠ΅ отступы, с ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΌΠΈ изобраТСниями, ΠΈ ΠΎΠ±ΡŠΠ΅Π΄ΠΈΠ½Ρ‘Π½Π½Ρ‹ΠΌΠΈ Π² Π³Π°Π»Π΅Ρ€Π΅ΡŽ. Π’ ΠΎΠ±Ρ‰Π΅ΠΌ, Ρ‡Ρ‚ΠΎ зря Π²ΠΎΠ΄Ρƒ Π»ΠΈΡ‚ΡŒ, Ρ€Π°ΡΠΏΠΈΡΠ°Ρ‚ΡŒ всС возмоТности ΠΏΠ»Π°Π³ΠΈΠ½Π° Π² ΠΊΠΎΡ€ΠΎΡ‚Π΅Π½ΡŒΠΊΠΎΠΌ прСдставлСнии всё Ρ€Π°Π²Π½ΠΎ Π½Π΅ получится, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ посмотритС Π΄Π΅ΠΌΠΎ, ΠΏΠΎΠΊΡ€ΡƒΡ‚ΠΈΡ‚Π΅, ΠΏΠΎΠ²Π΅Ρ€Ρ‚ΠΈΡ‚Π΅ ΠΈ Π΄ΡƒΠΌΠ°ΡŽ, этот ΠΏΠ»Π°Π³ΠΈΠ½ понравится ΠΌΠ½ΠΎΠ³ΠΈΠΌ.

  • Π—Π°Π²ΠΈΡΠΈΠΌΠΎΡΡ‚ΡŒ: jQuery
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°ΠΌΠΈ: IE9+, Chrome, Firefox, Safari, Opera
  • ЛицСнзия: MIT license


Β 
На этом ΠΏΠΎΠΆΠ°Π»ΡƒΠΉ ΠΈ всё! НадСюсь этот нСбольшой ΠΎΠ±Π·ΠΎΡ€, ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ Ρ€Π°Π·ΠΎΠ±Ρ€Π°Ρ‚ΡŒΡΡ Π² Π²ΠΎΡ€ΠΎΡ…Π΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅ΠΌΡ‹Ρ… ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ. Π₯ΠΎΡ‡Ρƒ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π΄Π°Π»Π΅ΠΊΠΎ Π½Π΅ всС ΠΈΠ· прСдставлСнных Π² ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠ΅ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ я использовал Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΡ… ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°Ρ…, Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΠ· Π½ΠΈΡ… ΠΏΡ€ΠΎΡ‰ΡƒΠΏΡ‹Π²Π°Π» Π½Π° тСстовых ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΊΠ°Ρ… ΠΈΠ»ΠΈ Π½Π° Π»Π°ΠΊΠΎΠ»ΠΊΠ΅, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈ Π²ΠΎΠ·Π½ΠΈΠΊΠ½ΠΎΠ²Π΅Π½ΠΈΠΈ ΠΊΠ°ΠΊΠΈΡ…-Π»ΠΈΠ±ΠΎ вопросов, скорСС всСго Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡ… Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ вмСстС, Π° вмСстС, ΠΊΠ°ΠΊ всСгда всё Ρƒ нас получится.

ΠΠ°Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ΡΡŒ Π² поисках подходящСго русифицированного шаблона для Π²Π°ΡˆΠΈΡ… Ρ†Π΅Π»Π΅ΠΉ? ВСроятно, Π² Ρ‚Π°ΠΊΠΎΠΌ случаС, Π²Π°ΠΌ стоит ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚ΡŒ маркСтплСйс TemplateMonster. По Ρ‚ΠΎΠΉ простой ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅, Ρ‡Ρ‚ΠΎ совсСм Π½Π΅Π΄Π°Π²Π½ΠΎ Π½Π° сайтС появился Π½ΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π·Π΄Π΅Π» шаблонов. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с ΠΊΠΎΠ»Π»Π΅ΠΊΡ†ΠΈΠ΅ΠΉ HTML шаблонов Π½Π° русском языкС, которая Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ ΠΈ ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒΡΡ. ВСксты для шаблонов Π±Ρ‹Π»ΠΈ написаны Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ. Но это Π½Π΅ СдинствСнный плюс Π΄Π°Π½Π½Ρ‹Ρ… Π³ΠΎΡ‚ΠΎΠ²Ρ‹Ρ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ. Π’Π΅Π΄ΡŒ Π² ΠΈΡ… ΠΏΠ°ΠΊΠ΅Ρ‚Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ всС, Ρ‡Ρ‚ΠΎ ΠΎΠ±Π»Π΅Π³Ρ‡ΠΈΡ‚ Ρ€Π°Π±ΠΎΡ‚Ρƒ Π½Π°Π΄ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€.

Π‘ Π£Π²Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, АндрСй .

Π‘ΡƒΠ΄Ρƒ всСм ΠΏΡ€ΠΈΠ·Π½Π°Ρ‚Π΅Π»Π΅Π½, Ссли ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Β β€” Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π±Π»ΠΎΠ³ Π² ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ AdBlock ΠΈ ΠΏΠΎΠ΄Π΅Π»ΠΈΡ‚Π΅ΡΡŒ ссылкой Π½Π° запись Π² своих соц-сСтях:

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *