Π Π°Π·Π½ΠΎΠ΅

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

29.04.2021

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

32 Flash ΠΈ Javascript Π³Π°Π»Π΅Ρ€Π΅ΠΈ

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π½Π° своём сайтС, Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΊΡ€ΡƒΡ‚Ρ‹ΠΌ программистом. Π’ ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°ΠΉΡ‚ΠΈ ΠΎΡ‡Π΅Π½ΡŒ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… исходников с Π³ΠΎΡ‚ΠΎΠ²Ρ‹ΠΌΠΈ галСрСями. Π’ Π΄Π°Π½Π½ΠΎΠΉ ΠΏΠΎΠ΄Π±ΠΎΡ€ΠΊΠ΅ прСдставляСм Π²Π°ΠΌ 32 Π³Π°Π»Π΅Ρ€Π΅ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ просты Π² установкС ΠΈ настройкС Π½Π° своём сайтС. Π§Π°ΡΡ‚ΡŒ ΠΈΠ·Β Π½ΠΈΡ… сдСлана ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ Ρ„Π»Π΅Ρˆ, Π° Ρ‡Π°ΡΡ‚ΡŒΒ β€” Π½Π°Β Javascript.
Β 

Π“Π°Π»Π΅Ρ€Π΅ΠΈ Π½Π°Β Javascript


GalleriaΒ 
ΠŸΡ€ΠΈΠΌΠ΅Ρ€Β Π³Π°Π»Π΅Ρ€Π΅ΠΈ
Β 

GalleriaΒ β€” это javascript галСрСя, написанная Π½Π° jQuery. Она Π³Ρ€ΡƒΠ·ΠΈΡ‚ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΉ ΠΈΠ· списка ΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡ€Π΅Π²ΡŒΡŽ, ΠΊΠΎΠ³Π΄Π° каТдая ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° подгрузится. Π­Ρ‚Π° галСрСя автоматичСски создаёт ΠΏΡ€Π΅Π²ΡŒΡŽ для вас, Ссли Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅. Π’Π°ΠΊΠΆΠ΅ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ мноТСство ΠΎΠΏΡ†ΠΈΠΉ для показа.

LightWindow

(E)2 Photo GalleryΒ 
ΠŸΡ€ΠΈΠΌΠ΅Ρ€Β Π³Π°Π»Π΅Ρ€Π΅ΠΈ

Spry

ImagoΒ 
ΠŸΡ€ΠΈΠΌΠ΅Ρ€Β Π³Π°Π»Π΅Ρ€Π΅ΠΈ

jQueryΒ slideViewer

minishowcaseΒ 
ΠŸΡ€ΠΈΠΌΠ΅Ρ€Β Π³Π°Π»Π΅Ρ€Π΅ΠΈ

AJAX Image Gallery powered byΒ Slideflow

Lightweight Image Gallery withΒ Thumbnails
Β Demo

Live Pipe PhotoFolderΒ 
ΠŸΡ€ΠΈΠΌΠ΅Ρ€Β Π³Π°Π»Π΅Ρ€Π΅ΠΈ

JaS
ΠŸΡ€ΠΈΠΌΠ΅Ρ€Β Π³Π°Π»Π΅Ρ€Π΅ΠΈ

JaSΒ β€” ΠΎΠ΄Π½Π° ΠΈΠ· Π½Π΅ΠΌΠ½ΠΎΠ³ΠΈΡ… Π³Π°Π»Π΅Ρ€Π΅ΠΉ Π½Π° JavaScript с мноТСством ΠΎΠΏΡ†ΠΈΠΉ ΠΈ с настроСк. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ ΡΠ»Π°ΠΉΠ΄ΡˆΠΎΡƒ со спСцэффСктами. Она позволяСт автоматичСски ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΡ€Π΅Π²ΡŒΡŽ для Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚Β Ρ‚Π΅Π³ΠΈ.

MooFlow

MooFlow это галСрСя Π½Π° Javascript. Π­Ρ„Ρ„Π΅ΠΊΡ‚ просмотра ΠΏΠΎΡ…ΠΎΠΆ Π½Π°Β iTunes.

xImgGallery

mooCicleΒ β€” ГалСрСя с эффСктом пСрСлистывания.
ΠŸΡ€ΠΈΠΌΠ΅Ρ€Β Π³Π°Π»Π΅Ρ€Π΅ΠΈ
Β 

Lightview

LiveΒ Thumbnail

Highslide

Couloir.orgΒ β€” с этой Π³Π°Π»Π΅Ρ€Π΅Π΅ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΡΠ»Π°ΠΉΠ΄ΡˆΠΎΡƒ с эффСктами

JonDesign’sΒ SmoothGallery

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Π³Π°Π»Π΅Ρ€Π΅ΠΉ Π½Π°Β Ρ„Π»Π΅ΡˆΠ΅

Flash GalleryΒ 
ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ„Π»Π΅ΡˆΒ Π³Π°Π»Π΅Ρ€Π΅ΠΈ

Flash GalleryΒ β€” бСсплатная галСрСя ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, которая ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ XML. Π‘ этой Π³Π°Π»Π΅Ρ€Π΅Π΅ΠΉ Π»Π΅Π³ΠΊΠΎ ΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ всС ΠΎΠΏΡ†ΠΈΠΈ Π² XMLΒ Ρ„Π°ΠΉΠ»Π΅.

dfGallery

SimpleViewer

SimpleViewerΒ β€” бСсплатная Ρ„Π»Π΅Ρˆ галСрСя. Π’ этой Π³Π°Π»Π΅Ρ€Π΅Π΅ Π΅ΡΡ‚ΡŒ мноТСство настроСк ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠ°ΡΒ Π°Π΄ΠΌΠΈΠ½ΠΊΠ°.

Flash PhotoΒ Stack
ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Ρ„Π»Π΅ΡˆΒ Π³Π°Π»Π΅Ρ€Π΅ΠΈ

Flash Photo StackΒ β€” простой Ρ„Π»Π΅Ρˆ шаблон, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π²Π°ΠΌ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΎΠ΄Π½Ρƒ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ ΠΈΠ· ΠΊΡƒΡ‡ΠΈ разбросанных на столС.

AutoViewer
ΠŸΡ€ΠΈΠΌΠ΅Ρ€Β Π³Π°Π»Π΅Ρ€Π΅ΠΈ

AutoViewerΒ β€” бСсплатная ΠΈ настраиваСмая Ρ„Π»Π΅ΡˆΒ Π³Π°Π»Π΅Ρ€Π΅Ρ.

Flash Carousel SlideshowΒ 
Π”Π΅ΠΌΠΎ Ρ„Π»Π΅ΡˆΒ ΠΊΠ°Ρ€ΡƒΡΠ΅Π»ΠΈ

Art FlashΒ Gallery

Art Flash GalleryΒ β€” основана Π½Π° Ρ„Π»Π΅ΡˆΠ΅. Π­Ρ‚Π° галСрСя ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ Π²Π°ΠΌ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ на ваш сайт Π² Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠΈ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… сСкунд. Много настроСк внСшнСго Π²ΠΈΠ΄Π° ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ Π²ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ ΠΏΠΎΠ΄ любой дизайн сайта.

Flash Image GalleryΒ 

FIGΒ β€” идСально ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠΎΠ² ΠΈ ΠΈΠ»Π»ΡŽΡΡ‚Ρ€Π°Ρ‚ΠΎΡ€ΠΎΠ². К ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π² Π³Π°Π»Π΅Ρ€Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒΒ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅.

TiltViewerΒ 
ΠŸΡ€ΠΈΠΌΠ΅Ρ€Β Π³Π°Π»Π΅Ρ€Π΅ΠΈ

TiltViewerΒ β€” бСсплатная галСрСя с 3D Ρ„Π»Π΅ΡˆΒ ΡΡ„Ρ„Π΅ΠΊΡ‚ΠΎΠΌ

Photo ViewerΒ 
ΠŸΡ€ΠΈΠΌΠ΅Ρ€Β Π³Π°Π»Π΅Ρ€Π΅ΠΈ

Photo ViewerΒ β€” сдСлана Π½Π° Ρ„Π»Π΅ΡˆΠ΅ с XML. Вся информация ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°Ρ… находится Π² XML Ρ„Π°ΠΉΠ»Π΅, Ρ‡Ρ‚ΠΎ позволяСт Π»Π΅Π³ΠΊΠΎ ΠΈ быстро Π²Π½ΠΎΡΠΈΡ‚ΡŒ измСнСния Π²Β Π³Π°Π»Π΅Ρ€Π΅ΡŽ.

FlashGalleryGeneratorΒ 
Β Demo

AgileΒ Gallery

Flash-вСрсия Π³Π°Π»Π΅Ρ€Π΅ΠΈ Β«AgileGalleryΒ» позволяСт ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΒ ΡΠ»Π°ΠΉΠ΄ΡˆΠΎΡƒ.

Fullscreen Gallery Flash ClassΒ 
Β Demo

Π­Ρ‚ΠΎ простая, одностраничная галСрСя, которая Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ с ΠΏΡ€Π΅Π²ΡŒΡŽ ΠΈ большими ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ Ρ‡Π΅Ρ€Π΅Π·Β XML.

Автор – vivalogo

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄Β β€”Β Π”Π΅ΠΆΡƒΡ€ΠΊΠ°

ο»Ώ

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

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

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

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

бСсплатный Π³Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Lightbox 2 скрипта

Q: Как Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ VisualLightBox Π³Π°Π»Π»Π΅Ρ€Π΅ΡŽ Π½Π° ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΡƒΡŽ html страницу?

A: Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ VisualLightBox Π³Π°Π»Π΅Ρ€Π΅ΡŽ Π½Π° Π’Π°ΡˆΡƒ страницу:

1. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π³Π°Π»Π΅Ρ€Π΅ΡŽ ΠΈ сохранитС Π΅Π΅ Π² любой локальной ΠΏΠ°ΠΏΠΊΠ΅
2. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ index.html Π² любом тСкстовом Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅
3. Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ HEAD section ΠΊΠΎΠ΄ and Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π² <head> Ρ‚Π΅Π³ Π½Π° страницС, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

<head>

<!— Start VisualLightBox.com HEAD section —>
<link rel=»stylesheet» href=»engine/css/vlightbox1.css» type=»text/css» />

<link rel=»stylesheet» href=»engine/css/visuallightbox.css» type=»text/css» media=»screen» />
<script src=»engine/js/jquery.min.js» type=»text/javascript»></script>
<script src=»engine/js/visuallightbox.js» type=»text/javascript»></script>
<!— End VisualLightBox.com HEAD section —>

</head>


4. Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ BODY section ΠΊΠΎΠ΄ ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π΅Π³ΠΎ Π² Ρ‚Π΅Π³ Π’Π°ΡˆΠ΅ΠΉ страницы, Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π±Ρ‹ Π’Ρ‹ Ρ…ΠΎΡ‚Π΅Π»ΠΈ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

<body>

<!— Start VisualLightBox.com BODY section —>
<div>
<a href=»data/images1/image1.jpg» title=»Image1″><img src=»data/thumbnails1/image1.png» alt=»Image1″></a>

<a href=»data/images1/image2.jpg» title=»Image2″><img src=»data/thumbnails1/image2.png» alt=»Image2″></a>
<a href=»data/images1/image3.jpg» title=»Image3″><img src=»data/thumbnails1/image3.png» alt=»Image3″></a>
<a href=»http://visuallightbox.com»>Lightbox Images by VisualLightBox.com v5.1</a>
</div>
<script src=»engine/js/vlbdata1.js» type=»text/javascript»></script>
<!— End VisualLightBox.com BODY section —>

</body>


5. Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΏΠ°ΠΏΠΊΡƒ ‘data’ с изобраТСниями ΠΈ Ρ‚Π°ΠΌΠ±Π½Π΅ΠΉΠ»Π°ΠΌΠΈΠ±Π° Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΠ°ΠΏΠΊΡƒ ‘engine’, ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‰ΡƒΡŽ .css and .js Ρ„Π°ΠΉΠ»Ρ‹ Π² ΠΏΠ°ΠΏΠΊΡƒ со страницСй, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ установлСна галСрСя.

Q: Как ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ VisualLightBox.com c ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ?

A: БСсплатная вСрсия Π½Π΅ позволяСт ΡƒΠ΄Π°Π»ΡΡ‚ΡŒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ VisualLightBox.com.
НСобходимо сначала Π·Π°Ρ€Π΅Π³ΠΈΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ рСгистрационный ΠΊΠ»ΡŽΡ‡, ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈ Π·Π°ΠΊΠ°Π·Π΅. ПослС рСгистрации Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠ΄Π°Π»ΠΈΡ‚ΡŒ Π»ΠΎΠ³ΠΎΡ‚ΠΈΠΏ VisualLightBox.com ΠΈΠ»ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ свой.
ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Gallery->Properties->Templates: Watermark.

Π‘ΠΊΡ€ΠΈΠΏΡ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΌΠΈΠ½ΠΈ-Π³Π°Π»Π΅Ρ€Π΅Π΅ Π½Π° JavaScript / JavaScript / WMDN

Как-Ρ‚ΠΎ ΠΌΠ½Π΅ понадобилось ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π½Π° сайт Π½Π΅Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Π΄ΠΈΠ½Π°ΠΌΠΈΡ‡Π΅ΡΠΊΡƒΡŽ Π³Π°Π»Π΅Ρ€Π΅ΡŽ ΠΈΠ· Π½Π΅Π±ΠΎΠ»ΡŒΡˆΠΈΡ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ.
ΠšΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² Π½Π΅ΠΉ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ полоТСния курсора Π½Π°Π΄ Π½ΠΈΠΌΠΈ, прСдставляя ΠΈΠ· сСбя ΠΈΠΌΠΏΡ€ΠΎΠ²ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ скроллСр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ΠΎΠΌ поиска стала javascript-Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ описанная Π² Π·Π°ΠΌΠ΅Ρ‚ΠΊΠ΅.


Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° называСтся Β«CMotion Image GalleryΒ»
ΠžΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½Π°Ρ страница скрипта: http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm
Π’Π°ΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ описаниС внСдрСния (Π½Π° английском) ΠΈ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€.

ОписаниС:
CMotion Image Gallery прСдставляСт ΠΈΠ· сСбя ΡƒΠ½ΠΈΠ²Π΅Ρ€ΡΠ°Π»ΡŒΠ½Ρ‹ΠΉ скрипт Π³Π°Π»Π΅Ρ€Π΅ΠΈ, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΈ Π½Π°ΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ зависит ΠΎΡ‚ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠΉ курсора ΠΏΠΎ Π°ΠΊΡ‚ΠΈΠ²Π½ΠΎΠΉ области. ΠŸΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π³Π°Π»Π΅Ρ€Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ ΠΏΠ΅Ρ€Π΅ΠΉΡ‚ΠΈ Π½Π° Π΄Ρ€ΡƒΠ³ΡƒΡŽ страницу.

ΠžΡΠΎΠ±Π΅Π½Π½ΠΎΡΡ‚ΠΈ:

  • Π›Π΅Π³ΠΊΠΎΠ΅ ΠΎΠΏΡ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ΅ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Π½Π°Ρ‡Π°Π»Π° Π³Π°Π»Π΅Ρ€Π΅ΠΈ
  • Π¨ΠΈΡ€ΠΈΠ½Π° Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ использована для ΠΏΠΎΠ΄Π³ΠΎΠ½ΠΊΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΏΠΎΠ΄ ΡˆΠΈΡ€ΠΈΠ½Ρƒ экрана

Π˜Π½ΡΡ‚Ρ€ΡƒΠΊΡ†ΠΈΡ ΠΏΠΎ Π²Π½Π΅Π΄Ρ€Π΅Π½ΠΈΡŽ Π³Π°Π»Π΅Ρ€Π΅ΠΈ Π½Π° страницу сайта

1. ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ <head> вашСй страницы

<link rel="stylesheet" type="text/css" href="gallerystyle.css" />
<!-- УсловиС для ΠΎΡ‡Π΅Π½ΡŒ старого Internet Explorer -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]-->
<!-- End Conditional Style -->
<script type="text/javascript" src="motiongallery.js">
</script>

Π‘ΠΊΡ€ΠΈΠΏΡ‚ Π²Ρ‹ΡˆΠ΅ ссылаСтся Π½Π° внСшниС Ρ„Π°ΠΉΠ»Ρ‹ .js ΠΈ .css. Π˜Ρ… Π½Π°Π΄ΠΎ ΡΠΊΠ°Ρ‡Π°Ρ‚ΡŒ ΠΈ Π·Π°ΠΊΠΈΠ½ΡƒΡ‚ΡŒ Π² ΠΏΠ°ΠΏΠΊΡƒ со страницСй (ΡΠΊΠ°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ Ρ‡Π΅Ρ€Π΅Π· ΠΏΡƒΠ½ΠΊΡ‚ Β«Π‘ΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΒ» контСкстного мСню):

1) motiongallery.js
2) gallerystyle.css
2. ΠŸΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ html-ΠΊΠΎΠ΄ Π² <body> ΡΠ΅ΠΊΡ†ΠΈΡŽ вашСй страницы:

<div>
<div>
<nobr><a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a> <a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a></nobr>
</div>
</div>

НС удаляйтС ΠΈΠ· этого ΠΊΠΎΠ΄Π° Ρ‚Π΅Π³ΠΈ <nobr> ΠΈ Π΄Π²Π° Π²Π½Π΅ΡˆΠΈΡ… <div>-a. Для настройки Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚Π΅ значСния CSS-Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² width ΠΈ height ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Β«Π΄ΠΈΠ²Π°Β».

Π’Π°ΠΊΠΆΠ΅ Π² ΠΊΠΎΠ΄Π΅ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… событий происходящих ΠΏΡ€ΠΈ ΠΊΠ»ΠΈΠΊΠ΅ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ Π½Π° URL, появлСниС Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π³ΠΎ ΠΎΠΊΠ½Π° с ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½ΠΎΠΉ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ, ΠΈΠ»ΠΈ Π½ΠΈΡ‡Π΅Π³ΠΎ Ссли ссылка ΡƒΠ±Ρ€Π°Π½Π°. Для ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° Π² этот скрипт Π²ΠΊΠ»ΡŽΡ‡Π΅Π½Π° простая функция Β«enlargeimage()Β» которая Π²Ρ‹Π·Ρ‹Π²Π°Π΅Ρ‚ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΠΎΠΊΠ½ΠΎ с адрСсом ΠΏΠ΅Ρ€Π΅Π΄Π°Π½Π½Ρ‹ΠΌ ΠΊΠ°ΠΊ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€.

Π‘ΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Ρ‚Π°ΠΊΠΆΠ΅:

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ CSS Π³Π°Π»Π΅Ρ€Π΅ΡŽ Π±Π΅Π· использования JavaScript

  1. Snippets
  2. β€Ί
  3. CSS
  4. β€Ί
  5. Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ CSS Π³Π°Π»Π΅Ρ€Π΅ΡŽ Π±Π΅Π· использования JavaScript

ΠžΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ΡΡ, Π²ΠΏΠΎΠ»Π½Π΅ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ CSS Π³Π°Π»Π΅Ρ€Π΅ΡŽ, Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Javascript. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ это Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML ΠΈ CSS.

Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ CSS Π³Π°Π»Π΅Ρ€Π΅ΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ HTML?ΒΆ

Как извСстно галСрСя состоит ΠΈΠ· Π΄Π²ΡƒΡ… Π±Π»ΠΎΠΊΠΎΠ² ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ ΠΈΠ· Π½ΠΈΡ… содСрТит ΠΌΠ΅Π»ΠΊΠΈΠ΅ изобраТСния (ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹), Π° Π²Ρ‚ΠΎΡ€ΠΎΠΉ — ΠΊΡ€ΡƒΠΏΠ½Ρ‹Π΅ изобраТСния. Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ, Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½Ρ‹Π΅ записи ( picture1, picture2, picture3, picture4, picture5).

Код Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

<div>
      <ul>
        <li>
          <a href="#picture1">
          <img alt="small house 1" src="/uploads/media/default/0001/03/22586f08ef509e3fd151d7a923f7f2c5997f0b07.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture2">
          <img alt="small house 2" src="/uploads/media/default/0001/03/103116629234462f05410cb6d43ed08065e3d4de.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture3">
          <img alt="small house 3" src="/uploads/media/default/0001/03/3d9718da65fc51d97aac4c6d762af5439cf91502.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture4">
          <img alt="small house 4" src="/uploads/media/default/0001/03/3eb4eb89e69c353ce1305a2c545aa1d08f811952.jpeg" />
          </a>
        </li>
      </ul>
      <div>
        <div>
          <a name="picture1"></a>
          <img alt="Large house 1" src="/uploads/media/default/0001/03/0fa4b71d43929b2df12e076e56c1977be75dfbb8.jpeg" />
        </div>
        <div>
          <a name="picture2"></a>
          <img alt="Large house 2" src="/uploads/media/default/0001/03/825a2070e85851f240a3e3159ce14a209ec09ef4.jpeg" />
        </div>
        <div>
          <a name="picture3"></a>
          <img alt="Large house 3" src="/uploads/media/default/0001/03/50e11aad0765f04983e42cb992fbda3ba39322f5.jpeg" />
        </div>
        <div>
          <a name="picture4"></a>
          <img alt="Large house 4" src="/uploads/media/default/0001/03/efcd4eae59c19e488249be1872a3aca00d81d545.jpeg" />
        </div>
      </div>
    </div>

2. Как ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ CSS Π³Π°Π»Π΅Ρ€Π΅ΡŽ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS?ΒΆ

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π»Π΅Π³ΠΊΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ CSS Π³Π°Π»Π΅Ρ€Π΅ΡŽ, слСдуя этим шагам:

  • УстановитС ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π±Π»ΠΎΠΊΠ° ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ€Π°Π²Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΈΠ· ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.
  • УстановитС CSS свойство overflow Π² Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ β€œhidden” для Π±Π»ΠΎΠΊΠ° ΠΊΡ€ΡƒΠΏΠ½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.
  • РазмСститС изобраТСния со ссылкой привязки Π²Π½ΡƒΡ‚Ρ€ΠΈ этого Π±Π»ΠΎΠΊΠ°.
  • УстановитС ссылки ΠΊ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π°ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ²ΡΠ·Π°Ρ‚ΡŒ ΠΈΡ… с ΠΊΡ€ΡƒΠΏΠ½Ρ‹ΠΌΠΈ изобраТСниями.

На Π΄Π°Π½Π½ΠΎΠΌ этапС, Ссли Π²Ρ‹ ΠΊΠ»ΠΈΠΊΠ½ΠΈΡ‚Π΅ ΠΏΠΎ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π΅, откроСтся ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅Π΅ ΠΊΡ€ΡƒΠΏΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Код Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ:

#gallery {
      width: 600px;
      overflow: hidden;
      position: relative;
      z-index: 1;
      margin: 100px auto;
      border: 2px solid #003C72;
      }
      #navigation {
      list-style: none;
      padding: 0;
      margin: 0;
      display:flex;
      justify-content: space-between;
      }
      #navigation li {
      padding: 0;
      margin: 0;
      margin:5px 0 20px;
      }
      #navigation li a img {
      display: block;
      border: none;
      }
      #navigation li a {
      display: block;
      }
      #full-picture {
      width: 600px;
      height: 375px;
      overflow: hidden;
      float: left;}
      #full-picture img{
      width:100%;
      }

Π’Π΅ΠΏΠ΅Ρ€ΡŒ наша галСрСя Π³ΠΎΡ‚ΠΎΠ²Π°! ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΠΌ ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄:

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ΒΆ

<!DOCTYPE html>
<html>
  <title>Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°</title>
  <head>
    <style>
      #gallery {
      width: 600px;
      overflow: hidden;
      position: relative;
      z-index: 1;
      margin: 100px auto;
      border: 2px solid #003C72;
      }
      #navigation {
      list-style: none;
      padding: 0;
      margin: 0;
      display:flex;
      justify-content: space-between;
      }
      #navigation li {
      padding: 0;
      margin: 0;
      margin:5px 0 20px;
      }
      #navigation li a img {
      display: block;
      border: none;
      }
      #navigation li a {
      display: block;
      }
      #full-picture {
      width: 600px;
      height: 375px;
      overflow: hidden;
      float: left;}
      #full-picture img{
      width:100%;
      }
    </style>
  </head>
  <body>
    <div>
      <ul>
        <li>
          <a href="#picture1">
          <img alt="small house 1" src="/uploads/media/default/0001/03/22586f08ef509e3fd151d7a923f7f2c5997f0b07.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture2">
          <img alt="small house 2" src="/uploads/media/default/0001/03/103116629234462f05410cb6d43ed08065e3d4de.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture3">
          <img alt="small house 3" src="/uploads/media/default/0001/03/3d9718da65fc51d97aac4c6d762af5439cf91502.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture4">
          <img alt="small house 4" src="/uploads/media/default/0001/03/3eb4eb89e69c353ce1305a2c545aa1d08f811952.jpeg" />
          </a>
        </li>
      </ul>
      <div>
        <div>
          <a name="picture1"></a>
          <img alt="Large house 1" src="/uploads/media/default/0001/03/0fa4b71d43929b2df12e076e56c1977be75dfbb8.jpeg" />
        </div>
        <div>
          <a name="picture2"></a>
          <img alt="Large house 2" src="/uploads/media/default/0001/03/825a2070e85851f240a3e3159ce14a209ec09ef4.jpeg" />
        </div>
        <div>
          <a name="picture3"></a>
          <img alt="Large house 3" src="/uploads/media/default/0001/03/50e11aad0765f04983e42cb992fbda3ba39322f5.jpeg" />
        </div>
        <div>
          <a name="picture4"></a>
          <img alt="Large house 4" src="/uploads/media/default/0001/03/efcd4eae59c19e488249be1872a3aca00d81d545.jpeg" />
        </div>
      </div>
    </div>
  </body>
</html>
ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ сами!

Если Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ слайдСр ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ слайд-ΡˆΠΎΡƒ, ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ ΠΎΠ± этом здСсь.


ΠŸΡ€ΠΈΠ½ΠΎΡΠΈΠΌ извинСния Π·Π° это

Как ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ это?

Бпасибо Π·Π° ваш ΠΎΡ‚Π·Ρ‹Π²!

Бпасибо Π·Π° ваш ΠΎΡ‚Π·Ρ‹Π²!

Π‘Ρ‡ΠΈΡ‚Π°Π΅Ρ‚Π΅ Π»ΠΈ это ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΌ? Π”Π° НСт


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

ГалСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ JavaScript — ΠžΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ список

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ ΠΎΠ½Π»Π°ΠΉΠ½-Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ быстрым процСссом. ΠŸΡ€ΠΎΠΌΠ΅ΠΆΡƒΡ‚ΠΎΠΊ ΠΌΠ΅ΠΆΠ΄Ρƒ снимками ΠΈ ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠ΅ΠΉ ΠΈΡ… Π² сСти Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΈΠΌ. Π’ΠΎΡ‚ быстрый ΠΈ простой способ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎΡΡ‚Ρ€Π°Π½ΠΈΡ‡Π½ΡƒΡŽ Π³Π°Π»Π΅Ρ€Π΅ΡŽ, которая ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ JavaScript для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΠΈΡ… подписСй Π½Π° Π»Π΅Ρ‚Ρƒ.

ΠŸΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ΅Π½ΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ Π½ΠΈΠΆΠ΅

Π― собрал нСсколько Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ…ΠΎΡ‡Ρƒ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π² ΠΎΠ½Π»Π°ΠΉΠ½-Π³Π°Π»Π΅Ρ€Π΅ΡŽ. Π‘Π°ΠΌΡ‹ΠΉ простой способ ΠΏΡ€ΠΈΠ²ΡΠ·Π°Ρ‚ΡŒ изобраТСния ΠΊ изобраТСниям — это ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΡ… Π² список Π²Ρ€ΠΎΠ΄Π΅ этого:

    

ΠŸΡ€ΡΠΌΠΎ сСйчас Π½Π°ΠΆΠ°Ρ‚ΠΈΠ΅ Π½Π° ΠΎΠ΄Π½Ρƒ ΠΈΠ· этих ссылок Π²Π΅Π΄Π΅Ρ‚ прямо ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ. Π― ΡΠΎΠ±ΠΈΡ€Π°ΡŽΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ JavaScript, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅Ρ…Π²Π°Ρ‚ΠΈΡ‚ΡŒ этот Ρ‰Π΅Π»Ρ‡ΠΎΠΊ ΠΈ вмСсто этого Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠ΅ дСйствиС.

JavaScript Π±ΡƒΠ΄Π΅Ρ‚ динамичСски ΠΎΠ±Π½ΠΎΠ²Π»ΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ описаниС заполнитСля, создавая эффСкт слайд-ΡˆΠΎΡƒ.

Π― ΡΠΎΠ±ΠΈΡ€Π°ΡŽΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ пустой .gif для изобраТСния-заполнитСля. Π‘ Ρ‚Π°ΠΊΠΈΠΌ ΠΆΠ΅ успСхом я ΠΌΠΎΠ³ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΌΠΎΠ΅ΠΉ Π³Π°Π»Π΅Ρ€Π΅Π΅ ΠΈΠ»ΠΈ ΠΊΠ°ΠΊΠΎΠ΅-Ρ‚ΠΎ Β«Π²ΡΡ‚ΡƒΠΏΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅Β» ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π’Π°ΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ описаниС ΠΈΠΌΠ΅Π»ΠΈ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Ρ‹. Π― Π½Π°Π·ΠΎΠ²Ρƒ ΠΎΠΏΠΈΡΠ°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π°Π±Π·Π°Ρ† desc ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»Π΅ΠΌ .

  

Π’Ρ‹Π±Π΅Ρ€ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ

НС добавляйтС Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ height ΠΈΠ»ΠΈ width ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ-Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŽ, ΠΈΠ½Π°Ρ‡Π΅ всС изобраТСния Π² Π³Π°Π»Π΅Ρ€Π΅Π΅ Π±ΡƒΠ΄ΡƒΡ‚ сТаты ΠΈΠ»ΠΈ растянуты Π΄ΠΎ ΠΎΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

Ѐункция JavaScript # section3

ΠŸΡ€ΠΈΡˆΠ»ΠΎ врСмя Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ JavaScript. Π­Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΏΠΎΠΌΠ΅Ρ‰Π΅Π½ΠΎ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° ΠΈΠ»ΠΈ Π²ΠΎ внСшний Ρ„Π°ΠΉΠ». Π― Π²Ρ‹Π·ΠΎΠ²Ρƒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ showPic

  функция showPic (whatpic)  

Как Π²ΠΈΠ΄ΠΈΡ‚Π΅, эта функция ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€: whichpic .Π­Ρ‚ΠΎ относится ΠΊ ссылкС, ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ Π½Π° любоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ я Ρ…ΠΎΡ‡Ρƒ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ.

Ѐункция showPic Π±ΡƒΠ΄Π΅Ρ‚ Π²Π·Π°ΠΈΠΌΠΎΠ΄Π΅ΠΉΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ с элСмСнтами заполнитСля desc ΠΈ , ΠΎΠ±Ρ€Π°Ρ‰Π°ΡΡΡŒ нСпосрСдствСнно ΠΊ ΠΈΡ… ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°ΠΌ. ΠŸΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Π²Ρ‹ΠΏΠΎΠ»Π½ΡΡ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ. Π­Ρ‚ΠΎ дСлаСтся ΠΏΡƒΡ‚Π΅ΠΌ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ наличия document.getElementById :

  Ссли (document.getElementById)  

ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΡ€ΠΎΠΉΠ΄Π΅Ρ‚ этот тСст, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅-Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒ ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ.Π­Ρ‚ΠΎ дСлаСтся ΠΏΡƒΡ‚Π΅ΠΌ Π·Π°ΠΌΠ΅Π½Ρ‹ значСния заполнитСля src Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ href ссылки whichpic :

  document.getElementById (Β«Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΒ»). Src = whichpic.href;  

Π’ Ρ‚ΠΎ ΠΆΠ΅ врСмя я Ρ…ΠΎΡ‡Ρƒ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ мСстами тСкст Π² Π°Π±Π·Π°Ρ†Π΅ desc . Π― ΠΌΠΎΠ³ Π±Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠΏΡ€ΠΈΠ΅Ρ‚Π°Ρ€Π½Ρ‹ΠΉ JavaScript, Ρ‚Π°ΠΊΠΎΠΉ ΠΊΠ°ΠΊ innerHTML , Π½ΠΎ Π΅ΡΡ‚ΡŒ кроссбраузСрноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, доступноС Π² Π²ΠΈΠ΄Π΅ childNodes [0] .nodeValue . Π­Ρ‚ΠΎ Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Π΄ΠΎΡ‡Π΅Ρ€Π½Π΅Π³ΠΎ ΡƒΠ·Π»Π° элСмСнта.Π’ нашСм случаС это Π±ΡƒΠ΄Π΅Ρ‚ тСкст Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта.

ВСкст desc ΠΌΠΎΠΆΠ½ΠΎ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ тСкстом ΠΈΠ· ссылки whichpic :

  document.getElementById (β€˜desc’) Β».childNodes [0] .nodeValue = whichpic.childNodes [0] .nodeValue;  

Но Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π΅Ρ‰Π΅ Π»ΡƒΡ‡ΡˆΠ΅ Π·Π°ΠΌΠ΅Π½ΠΈΡ‚ΡŒ тСкст desc содСрТимым Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° title ΠΈΠ· ссылки whichpic :

  document.getElementById (β€˜desc’) Β».childNodes [0] .nodeValue = whichpic.title;  

МнС Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎ. Π― ΠΌΠΎΠ³Ρƒ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° title . Если ΠΎΠ½ сущСствуСт, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ этот тСкст. Π’ ΠΏΡ€ΠΎΡ‚ΠΈΠ²Π½ΠΎΠΌ случаС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ тСкст ссылки:

  if (whichpic.title) {
document.getElementById ('desc') Β».childNodes [0] .nodeValue = whichpic.title;
} Π΅Ρ‰Π΅ {
document.getElementById ('desc') Β».childNodes [0] .nodeValue = whichpic.childNodes [0] .nodeValue;
}  

НаконСц, я Ρ…ΠΎΡ‡Ρƒ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ послС ссылки whichpic Π½Π° самом Π΄Π΅Π»Π΅ Π½Π΅ слСдуСт Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π΅Π½ΠΈΠ΅ false :

  Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ лоТь;  

Если Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ распознал Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ .getElementById . Π’ этом случаС я Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ…ΠΎΡ‡Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎ ссылкС ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΠ»ΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ вмСсто Π½Π΅Π΅ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π»ΠΎΡΡŒ true .

Π’ΠΎΡ‚ готовая функция:

    

Π’Ρ‹Π·ΠΎΠ² Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ # section4

ΠžΡΡ‚Π°Π»ΠΎΡΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ эту Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΈΠ· ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ссылки. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ whichpic , ΠΊΠ°ΠΆΠ΄ΠΎΠΉ ΠΈΠ· ссылок ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ присвоСн ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€. Однако Π³ΠΎΡ€Π°Π·Π΄ΠΎ ΠΏΡ€ΠΎΡ‰Π΅ просто ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Π² этот , Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ whichpic Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ «этот элСмСнт, Π²Ρ‹Π·Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΉ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ.”

Π― Π±ΡƒΠ΄Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ событий onclick (Π±Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ onkeypress для людСй, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΠΈΡ… ΠΊΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Ρƒ). ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ функция showPic опрСдСляСт, Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»ΠΈ выполняСтся ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΏΠΎ ссылкС, я Ρ…ΠΎΡ‡Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ дСйствиС Ρ‰Π΅Π»Ρ‡ΠΊΠ° ΠΏΠΎ ссылкС Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π»ΠΎ Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ функция. Если функция Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ false , ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ ΠΏΠΎ ссылкС Π½Π΅ выполняСтся. Π­Ρ‚ΠΎ дСлаСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ onclick = "return showPic (this)" .

    

Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° это Π² дСйствии.

 
function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById ('Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒ').src = whichpic.href;
  if (whichpic.title) {
   document.getElementById ('desc'). childNodes [0] .nodeValue = whichpic.title;
  } Π΅Ρ‰Π΅ {
   document.getElementById ('desc'). childNodes [0] .nodeValue = whichpic.childNodes [0] .nodeValue;
  }
  Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ лоТь;
 } Π΅Ρ‰Π΅ {
  Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ истину;
 }
}
  

Π’ΠΎΡ‚ ΠΈ всС: простая галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ JavaScript. Он постСпСнно ΡƒΡ…ΡƒΠ΄ΡˆΠ°Π΅Ρ‚ΡΡ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ старыС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ всС Π΅Ρ‰Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΏΠΎ ссылкам ΠΈ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ изобраТСния. Он Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ Π² IE5 + ΠΈ Netscape 6+ Π² Windows ΠΈ Mac.Он Ρ‚Π°ΠΊΠΆΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Safari ΠΈ Π²ΠΎ всСх разновидностях Mozilla, Ρ‚Π°ΠΊΠΈΡ… ΠΊΠ°ΠΊ Firebird ΠΈ Camino.

ГалСрСя Javascript

ΠŸΡ€Π°ΠΊΡ‚ΠΈΡ‡Π΅ΡΠΊΠΎΠ΅ руководство: ГалСрСя Javascript!

Π­Ρ‚ΠΎ Π²ΠΈΠ΄Π΅ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚, ΠΊΠ°ΠΊ быстро ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΠΈ, ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств!

Π”Π΅ΠΌΠΎ-слайд-ΡˆΠΎΡƒ - Π—Π°ΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ внСшний Π²ΠΈΠ΄!

Π—Π΄Π΅ΡΡŒ Π²Ρ‹ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ большС ΠΎΠ± эффСктах ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ Π³Π°Π»Π΅Ρ€Π΅Π΅ вашСй Π²Π΅Π±-страницы!

Ajax jQuery Slider HTML-ΠΊΠΎΠ΄

Код для вставки ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ:

 
  
  

HTML-ΠΊΠΎΠ΄ для вставки ΠΌΠ΅ΠΆΠ΄Ρƒ Ρ‚Π΅Π³Π°ΠΌΠΈ Π² Ρ‚ΠΎΠΌ мСстС, Π³Π΄Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ слайдСр Ajax jQuery:

 


  •  Edinburgh Шотландия, ВСликобритания
  • Ferris wheel Π›ΠΎΠ½Π΄ΠΎΠ½, ВСликобритания
  • London ВСликобритания
  • Landscape Шотландия, ВСликобритания
  •  Windsor ВСликобритания

Π‘Π Π•Π—Π« АНИМАЦИЯ И Π”Π˜Π—ΠΠ™Π ΠœΠ•Π“ΠΠ›ΠžΠŸΠžΠ›Π˜Π‘Π JAVASCRIPT GALLERY

ΠŸΡ€ΠΈ создании Π²Π΅Π±-сайта Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ хотят ΠΈΠΌΠ΅Ρ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ Ρ‚ΠΈΠΏ Π³Π°Π»Π΅Ρ€Π΅ΠΈ javascript, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ своим ΠΏΠΎΡ‚Π΅Π½Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΌ посСтитСлям прСдставлСниС ΠΎΠ± ΠΈΡ… Π²Π΅Π±-сайтС ΠΈ услугах. JQuery WOWSlider - ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€, ΠΊΠΎΠ³Π΄Π° Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ прСдставлСния Π½Π° ваш Π²Π΅Π±-сайт. Π­Ρ‚ΠΎ позволяСт Ρ‚Π΅ΠΌ, ΠΊΡ‚ΠΎ Π½Π΅ ΠΎΠ±Π»Π°Π΄Π°Π΅Ρ‚ ΠΎΠ±ΡˆΠΈΡ€Π½Ρ‹ΠΌΠΈ знаниями Π² области кодирования, ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅ ΠΈ ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½Ρ‹Π΅ изобраТСния Π½Π° Π³Π»Π°Π²Π½ΠΎΠΉ страницС своСго Π²Π΅Π±-сайта с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ простой настройки Β«Π½Π°Π²Π΅Π΄ΠΈ ΠΈ Ρ‰Π΅Π»ΠΊΠ½ΠΈΒ».

Π’ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΌ Π²Ρ‹ΡˆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π΅ΡΡ‚ΡŒ шаблон, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½ ΠΏΠΎ своСй ΠΏΡ€ΠΈΡ€ΠΎΠ΄Π΅ с прямой Ρ€Π°ΠΌΠΊΠΎΠΉ Π±Π΅Π· ΠΏΠΎΠ»Π΅ΠΉ, которая ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠΈ нСпосрСдствСнно ΠΊ самому ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ, Π° Π½Π΅ ΠΊ Π³Ρ€Π°Π½ΠΈΡ†Π΅ ΠΈΠ»ΠΈ Ρ‚ΠΎΠΌΡƒ, Ρ‡Ρ‚ΠΎ ΠΎΠΊΡ€ΡƒΠΆΠ°Π΅Ρ‚ слайдСр изобраТСния - ΠΊΠ°ΠΊ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ ΠΈΠΌΠ΅ΡŽΡ‚. Π­Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΈΠ΅ Ρ‡Π΅Π³ΠΎ-Π»ΠΈΠ±ΠΎ Π²ΠΎΠΊΡ€ΡƒΠ³ этого Ρ‚ΠΈΠΏΠ° Π³Ρ€Π°Π½ΠΈΡ†Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚Π²Π»Π΅Ρ‡ΡŒ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΡŽ ΠΎΡ‚ Π½Π΅Π΅, поэтому, Ссли ΠΏΡ€ΠΎΡ‚ΠΈΠ²ΠΎΠΏΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ это ΡƒΠΏΡ€ΠΎΡ‰Π΅Π½Π½ΠΎΠΌΡƒ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ Π²Π΅Π±-сайта, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ»ΡƒΠΆΠΈΡ‚ΡŒ своСй Ρ†Π΅Π»ΠΈ.

Π­Ρ‚ΠΎΡ‚ шаблон посвящСн Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ эффСктам, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ Π² Π½Π΅Π³ΠΎ вставляСтС! ВСкст с этим ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΌ шаблоном Ρ€Π°ΠΌΠΊΠΈ Π±Π΅Π· ΠΏΠΎΠ»Π΅ΠΉ отобраТаСтся Π² Π΄Π²ΡƒΡ… ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… тСкстовых полях Π² Π½ΠΈΠΆΠ½Π΅ΠΌ Π»Π΅Π²ΠΎΠΌ ΡƒΠ³Π»Ρƒ.Π­Ρ‚ΠΈ Π΄Π²Π° тСкстовых поля - красный ΠΈ Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ, красный Ρ†Π²Π΅Ρ‚ ΠΈΠ΄Π΅Ρ‚ ΠΏΠ΅Ρ€Π²Ρ‹ΠΌ Π² шаблонС, Π° Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ - ΠΏΠΎΠ΄ Π½ΠΈΠΌ. ΠšΡ€Π°ΡΠ½ΠΎΠ΅ тСкстовоС ΠΏΠΎΠ»Π΅ ΠΏΡ€ΠΈΠ²Π»Π΅ΠΊΠ°Π΅Ρ‚ основноС Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π°ΡƒΠ΄ΠΈΡ‚ΠΎΡ€ΠΈΠΈ, прСдлагая Π±Π΅Π»Ρ‹ΠΉ ΠΏΠΎΠ»ΡƒΠΆΠΈΡ€Π½Ρ‹ΠΉ ΡˆΡ€ΠΈΡ„Ρ‚ Π½Π° красном Ρ„ΠΎΠ½Π΅. Π§Π΅Ρ€Π½Ρ‹ΠΉ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΠΈΠΊ ΠΏΠΎΠ΄ Π½ΠΈΠΌ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ мСньшС ΠΈ Ρ‚ΠΎΠ½ΡŒΡˆΠ΅, Π° ΡˆΡ€ΠΈΡ„Ρ‚ Π½Π΅ Π²Ρ‹Π΄Π΅Π»Π΅Π½ ΠΆΠΈΡ€Π½Ρ‹ΠΌ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠΌ, Π½ΠΎ всС Π΅Ρ‰Π΅ Π±Π΅Π»Ρ‹ΠΉ Π½Π° Ρ‡Π΅Ρ€Π½ΠΎΠΌ Ρ„ΠΎΠ½Π΅.

Π’ этом шаблонС всСго ΠΏΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ нСобходимости Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½Ρ‹Π΅ эффСкты.КаТдоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΎΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΌΠ΅ΠΆΠ΄Ρƒ собой ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Π½Π° 2-5 сСкунд ΠΏΠ΅Ρ€Π΅Π΄ автоматичСским ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠΌ ΠΊ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌΡƒ слайду с использованиСм эффСкта Π½Π°Ρ€Π΅Π·ΠΊΠΈ. Π­Ρ„Ρ„Π΅ΠΊΡ‚ Π½Π°Ρ€Π΅Π·ΠΊΠΈ заставит входящСС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π»ΠΈΠ±ΠΎ Ρ€Π°Π·Ρ€Π΅Π·Π°Ρ‚ΡŒ снизу Π½Π° Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎ Π²Ρ‹Ρ€ΠΎΠ²Π½Π΅Π½Π½Ρ‹Π΅ ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½Ρ‹Π΅ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹, Π»ΠΈΠ±ΠΎ Ρ€Π°Π·Ρ€Π΅Π·Π°Ρ‚ΡŒ свСрху Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ. Когда эффСкт Π½Π°Ρ€Π΅Π·ΠΊΠΈ врСзаСтся с Π»Π΅Π²ΠΎΠΉ стороны, ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ€Π΅Π·Π°Ρ‚ΡŒΡΡ с эффСктом Π½Π°Ρ€Π΅Π·ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ накладываСтся Π½Π° сСбя, открывая Π½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

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

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

googd ΡƒΡ‚Ρ€ΠΎ, я Ρ…ΠΎΡ‚Π΅Π» Π±Ρ‹ ΠΊΡƒΠΏΠΈΡ‚ΡŒ ваш ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚, Π½ΠΎ Ρƒ мСня с Π½ΠΈΠΌ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°. ΠΊΠΎΠ³Π΄Π° я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ эффСкт Β«ΠΊΠ½ΠΈΠΆΠΊΠΈΒ», ΠΎΠ½ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ, Π½ΠΎ ΠΊΠΎΠ³Π΄Π° «страница пСрСворачиваСтся», появляСтся Β«ΠΌΠ΅Ρ€Ρ†Π°ΡŽΡ‰Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅Β»."ΠΈ это Π²ΠΎΠΎΠ±Ρ‰Π΅ бСсполСзно. ΠΊΠ°ΠΊ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ этот Β«ΠΏΠ»ΠΎΡ…ΠΎΠΉ эффСкт»?

К соТалСнию, ΠΈΠ½ΠΎΠ³Π΄Π° Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ эта ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠ΅ΠΌ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ ΠΏΠΎΠ·ΠΆΠ΅.

Π― Π±Ρ‹ ΠΊΡƒΠΏΠΈΠ» ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠ΅, Π½ΠΎ Π½Π΅ ΡƒΠ²Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ сработаСт. Π’ настоящСС врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°, которая Ρƒ мСня Π΅ΡΡ‚ΡŒ, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΌΠ½Π΅ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ полупустыС изобраТСния, ΠΈ это ΠΎΡ‡Π΅Π½ΡŒ расстраиваСт.

НС ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π²Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ.

ΠΌΠΎΠΉ 2015 Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, ΠΊΠ°ΠΊ ΠΈ 2013 Π³ΠΎΠ΄, ΠΏΠΎ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π΅ 2012 ΠΈ 2014 Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ. Π’Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ / ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° блокируСтся ΠΈ закрываСтся. Π‘ этим слоТно Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ.

ΠŸΠΎΡ…ΠΎΠΆΠ΅, Ρ‡Ρ‚ΠΎ ваши изобраТСния нСдоступны. Π’Π°Ρˆ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ содСрТит ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΡ‚ ΠΊ сбою. ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ просмотра, Ρ‚ΠΎΠ³Π΄Π° ΠΎΠ½Π° Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΡΡ‚Π°Π±ΠΈΠ»ΡŒΠ½ΠΎ.

Π£ мСня вопрос. с бСсплатными слайдСрами Π²Ρ‹ ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Ρ‹ Ρ‚Π΅ΠΌ, сколько Π³Π°Π»Π΅Ρ€Π΅ΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ сколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ? Π£ мСня 6 Π³Π°Π»Π΅Ρ€Π΅ΠΉ, ΠΈ Ρ‡Ρ‚ΠΎ Π±Ρ‹ я Π½ΠΈ Π΄Π΅Π»Π°Π», я Π½Π΅ ΠΌΠΎΠ³Ρƒ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΈΡ… Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ.прСдлоТСния?

НСт Π»ΠΈΠΌΠΈΡ‚Π°. Как Π²Ρ‹ добавляСтС слайдСры Π½Π° свою страницу? Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ слайдСр ΠΈΠΌΠ΅Π΅Ρ‚ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ ΠΈ ΠΈΡ… Ρ„Π°ΠΉΠ»Ρ‹ Π½Π΅ ΡΠΌΠ΅ΡˆΠ°Π½Ρ‹.

Π― создал довольно ΠΌΠ½ΠΎΠ³ΠΎ слайдСров для своСго сайта Π² Wowslider вСрсии 7.8. Π― смСнил ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Ρ‹ ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ» Π½Π° свой Π½ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ ΡΠ°ΠΌΡƒΡŽ Π½ΠΎΠ²ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΌΠΎΠΈΡ… слайдСров, созданных Π² вСрсии 7.8, Π½Π΅ открываСтся. Π― Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π΅ Ρ…ΠΎΡ‡Ρƒ Π²ΠΎΡΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ всС свои слайдСры. Как ΠΌΠ½Π΅ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΌΠΎΠΈ старыС слайдСры ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒΡΡ Π² ΠΌΠΎΠ΅ΠΉ Π½ΠΎΠ²ΠΎΠΉ вСрсии Wowslider?

Π‘ΠΊΠΎΡ€Π΅Π΅ всСго, ваши изобраТСния сСйчас нСдоступны, Π²Π°ΠΌ слСдуСт ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π½Π° свой Π½ΠΎΠ²Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ ΠΈ ΡƒΠ±Π΅Π΄ΠΈΡ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎ ΠΏΡƒΡ‚ΠΈ Π²Π΅Ρ€Π½Ρ‹.

Π‘ΠΎΠ»ΡŒΡˆΠΎΠ΅ спасибо Π·Π° Ρ‚ΠΎ, Ρ‡Ρ‚ΠΎ прояснили это для мСня. Π― внСс Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ измСнСния Π² ΠΏΡƒΡ‚ΠΈ ΠΈ ΠΌΠΎΠΈ Ρ„Π°ΠΉΠ»Ρ‹, ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚Ρ‹Π΅ для мСня. Π― Ρ†Π΅Π½ΡŽ ΠΏΠΎΠΌΠΎΡ‰ΡŒ.

Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ WOW Slider Π½Π° MAC с Π½Π΅ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π½ΠΎΠΉ Π»ΠΈΡ†Π΅Π½Π·ΠΈΠ΅ΠΉ, Ver. 3.8. Π― ΠΌΠΎΠ³Ρƒ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π±Π°Π·ΠΎΠ²Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄. РаньшС я ΠΌΠΎΠ³ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹ КСна БСрнса ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Ρ‹. Π£ мСня Π΅ΡΡ‚ΡŒ 5 страниц Π½Π° Ρ‚ΠΎΠΌ ΠΆΠ΅ сайтС, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ, Π½ΠΎ Ρƒ мСня Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ страницС.

МнС ΡƒΠ΄Π°Π»ΠΎΡΡŒ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ с эффСктами, сославшись Π½Π° Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½Π΅Π΅ элСктронноС письмо, ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½ΠΎΠ΅ ΠΎΡ‚ вас.Однако ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, с ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ я сСйчас ΡΡ‚Π°Π»ΠΊΠΈΠ²Π°ΡŽΡΡŒ, Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° раздСляСт Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ страницы, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… я ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ слайдСр, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠ°Π΅Ρ‚ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈ ΠΈ Ρ‚Π΅ ΠΆΠ΅ Β«Π΄Π²ΠΈΠΆΠΎΠΊ 1Β» ΠΈ Β«Π΄Π°Π½Π½Ρ‹Π΅ 1Β» ΠΈΠ»ΠΈ Β«ΠΌΠ΅Ρ…Π°Π½ΠΈΠ·ΠΌ 2Β» ΠΈ Β«Π΄Π°Π½Π½Ρ‹Π΅ 2Β» для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницы .

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ваша вСрсия WOWSlider устарСла, ΠΈ ΠΏΠ΅Ρ€ΠΈΠΎΠ΄ бСсплатного обновлСния истСк.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ приобрСсти послСднюю Π²Π΅Ρ€ΡΠΈΡŽ WOWSlider, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ скидку 50%.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ слайдСр Π½Π° нСсколько страниц, Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ мастСр вставки Π½Π° страницу.

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ слайдСр Π½Π° свои страницы Π²Ρ€ΡƒΡ‡Π½ΡƒΡŽ: http://wowslider.com/help/create-an-image-slider-32.html

ΠŸΡ€ΠΈ нСобходимости Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΡƒΡ‚ΠΈ ΠΊ своим Ρ„Π°ΠΉΠ»Π°ΠΌ.

Бпасибо, ΠΎΠ½ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°ΡŽΡ‚.

Π― Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‡Ρ‚ΠΎ ΠΊΡƒΠΏΠΈΠ» Π²Π°ΡˆΡƒ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡƒ WOWSlider, Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΠ» инструкции, Π²Π²Π΅Π» ΠΊΠ»ΡŽΡ‡ ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠ» ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΡƒΡŽ ΠΎΡˆΠΈΠ±ΠΊΡƒ

НСвСрный ΠΊΠ»ΡŽΡ‡

ΠŸΠΎΠ»ΡŒΠ·ΡƒΡŽΡΡŒ ΠΏΠΎΠ»Π½ΠΎΠΉ вСрсиСй 8.6 ΠΈΠ· скачанного

Π― сиТу Π·Π° прокси-сСрвСром ΠΈ гадаю, ΠΌΠΎΠΆΠ΅Ρ‚ Π»ΠΈ это Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ.Π― Ρ€Π°Π±ΠΎΡ‚Π°ΡŽ Π² ИВ-ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ΅, поэтому знаю ΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠΌ обСспСчСнии, ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°Ρ… ΠΈ Ρ‚. Π”.

Π”Π°, это ΠΌΠΎΠΆΠ΅Ρ‚ Π²Ρ‹Π·Π²Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹. Но Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ Π² Π½Π°ΡˆΡƒ слуТбу ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΈ, Ρƒ Π½ΠΈΡ… Π΅ΡΡ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅.

ИдСальноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ сработало с ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ Ρ€Π°Π·Π°. ΠžΡ‡Π΅Π½ΡŒ Π²ΠΏΠ΅Ρ‡Π°Ρ‚Π»Π΅Π½ вашим ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠΌ.

Π£ мСня Π΅ΡΡ‚ΡŒ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΎΠΊ Π²Π°Ρƒ, ΠΈ всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° я наТимаю Β«ΠžΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Ρ‚ΡŒΒ», ΠΎΠ½ зависаСт. ΠΈΠ»ΠΈ ΠΊΠΎΠ³Π΄Π° я наТимаю Π½Π° настройки, ΠΎΠ½ Ρ‚ΠΎΠΆΠ΅ зависаСт. Ρ‡Ρ‚ΠΎ ΠΏΠΎΠ΄Π΅Π»Π°Ρ‚ΡŒ, это Π½Π°Ρ‡Π°Π»ΠΎΡΡŒ совсСм Π½Π΅Π΄Π°Π²Π½ΠΎ. Π£ мСня wow slider 7.2 Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° Windows 8.1 Бпасибо πŸ™‚ это ΠΎΡ‡Π΅Π½ΡŒ расстраиваСт, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ ΠΌΠ½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π΄ΠΎΠ»Π³ΠΎ ΠΆΠ΄Π°Ρ‚ΡŒ, ΠΏΠΎΠΊΠ° ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ° ΠΎΡ‚Π²Π΅Ρ‚ΠΈΡ‚

ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ послСднСй вСрсии. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π»ΠΈΡ†Π΅Π½Π·ΠΈΡŽ, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Π΅Π΅ всСго Π·Π° 50% ΠΎΡ‚ Ρ‚Π΅ΠΊΡƒΡ‰Π΅ΠΉ Ρ†Π΅Π½Ρ‹ Π»ΠΈΡ†Π΅Π½Π·ΠΈΠΈ.

Π΄Π° я Ρ…ΠΎΡ‡Ρƒ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ‡Ρ‚ΠΎ ΠΌΠ½Π΅ Π΄Π΅Π»Π°Ρ‚ΡŒ?

Π£ мСня сСйчас другая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°: ΠΊΠΎΠ³Π΄Π° я создаю слайд-ΡˆΠΎΡƒ, ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр нСдоступСн, ΠΊΠ°ΠΊ я ΠΌΠΎΠ³Ρƒ это ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ, спасибо

КакиС изобраТСния Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ для слайд-ΡˆΠΎΡƒ? Бколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π²Ρ‹ добавляСтС?

это Π² вашСм ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ Π― использовал jpgs Π― Π΄ΠΎΠ±Π°Π²ΠΈΠ» 3 изобраТСния

ΠšΠ°ΠΊΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ прилоТСния Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅? ΠžΡ‚ΠΏΡ€Π°Π²ΡŒΡ‚Π΅ Π½Π°ΠΌ Ρ„Π°ΠΉΠ» вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° (.wowsl), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ это ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ. К соТалСнию, я Π½Π΅ ΠΌΠΎΠ³Ρƒ воспроизвСсти эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ. НС ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π²Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π½Π°ΠΌ Π±ΠΎΠ»Π΅Π΅ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ, ΠΊΠΎΠ³Π΄Π° Ρƒ вас Π²ΠΎΠ·Π½ΠΈΠΊΠ½Π΅Ρ‚ эта ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°. ΠšΠ°ΠΊΡƒΡŽ ОБ Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅?

windows 8. всС врСмя сразу послС выкладывания ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π½Π° ΡΠ»Π°ΠΉΠ΄ΡˆΠΎΡƒ

Π΄ΠΎΠ±Ρ€ΠΎΠ΅ ΡƒΡ‚Ρ€ΠΎ, Ρƒ мСня ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° с ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΠΎΠΌ wow Π½Π° ipad, Π΅ΡΡ‚ΡŒ ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ свСрху ΠΈ снизу ΠΏΡ€ΠΈ использовании ΠΏΠΎΠ»Π½ΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ для слайдСра, ΠΈ ΠΊΠΎΠ³Π΄Π° я ΡΠΌΠΎΡ‚Ρ€ΡŽ слайд-ΡˆΠΎΡƒ Π½Π° iphone ΠΈΠ»ΠΈ ipad, ΠΊΠ°ΠΊ я ΠΌΠΎΠ³Ρƒ ΠΈΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒ это

Π― ΠΏΡ€ΠΈΠΎΠ±Ρ€Π΅Π» ΠΊΠΎΠΌΠΏΠ»Π΅ΠΊΡ‚ Wow Slider.Π£ мСня Π΅ΡΡ‚ΡŒ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊ. Π― ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊ, ΠΊΠΎΠ³Π΄Π° ΠΏΡƒΡ‚Π΅ΡˆΠ΅ΡΡ‚Π²ΡƒΡŽ. Π£ мСня вопрос: ΠΌΠΎΠ³Ρƒ Π»ΠΈ я Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΏΠ°ΠΊΠ΅Ρ‚ Π½Π° ΠΎΠ±Π΅ ΠΌΠΎΠΈ ΠΌΠ°ΡˆΠΈΠ½Ρ‹?

Π”Π°, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ свои прилоТСния Π½Π° Π΄Π²ΡƒΡ… ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°Ρ… ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ.

ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ Π·Π°ΠΊΡ€Ρ‹Ρ‚Ρ‹

Π€ΠΎΡ‚ΠΎ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ ГалСрСя Π’ΠΈΠ΄ΠΆΠ΅Ρ‚ Javascript Β«ServicePros

Javascript-Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ Ρ„ΠΎΡ‚ΠΎ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Π³Π°Π»Π΅Ρ€Π΅ΠΈ (БЕВА) - ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ способ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ Π²Π°ΡˆΠΈΡ… Π½Π΅Π΄Π°Π²Π½ΠΈΡ… Ρ€Π°Π±ΠΎΡ‚ Π½Π° вашСм Π²Π΅Π±-сайтС.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Π’ ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ нашСго сСрвСрного API ΠΈ ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² WordPress, Javascript API Π½Π΅ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ SEO-цСнности для вашСго сайта.HTML-ΠΊΠΎΠ΄ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚Π° загруТаСтся асинхронно, ΠΎΠ½ Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠ΅Π½ поисковыми систСмами.

Π’ΠΈΠ΄ΠΆΠ΅Ρ‚ Javascript

ΠŸΡ€ΠΎΡΡ‚ΠΎ скопируйтС этот скрипт Π½Π° страницу, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚, ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ div nn-photo-gallery Π² любом мСстС вашСй страницы, Π³Π΄Π΅ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваши Ρ„ΠΎΡ‚ΠΎ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΈΡΡŒ.

    
  

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΊΠΎΠ½Ρ‚Ρ€ΠΎΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ количСство Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ Π²Π΅Ρ€Π½ΡƒΡ‚ΡŒ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ настраиваСмого Ρ‚Π΅Π³Π° Π΄Π°Π½Π½Ρ‹Ρ…:

ВрСбуСтся

Π”ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ

  • data-count ΠšΠΎΠ»ΠΈΡ‡Π΅ΡΡ‚Π²ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Ρ… Ρ„ΠΎΡ‚ΠΎ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ.ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. КаТдая ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° Π²ΠΈΠ΄Π΅ΠΎ Ρ‚Π°ΠΊΠΆΠ΅ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π² сСбя Π½Π΅ΠΏΠΎΠ΄Π²ΠΈΠΆΠ½ΡƒΡŽ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΡŽ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹

Π’ΠΎΡ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ Π³Π°Π»Π΅Ρ€Π΅ΠΈ Ρ„ΠΎΡ‚ΠΎ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° HTML-страницу:

  

    
        
        
         БСйчас рядом с Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠΌ Ρ„ΠΎΡ‚ΠΎ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Π³Π°Π»Π΅Ρ€Π΅ΠΈ 
        
        
    
    
        
            

Π’Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠΈΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€.ΠŸΠΎΠΆΠ°Π»ΡƒΠΉΡΡ‚Π°, ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ свой Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ.

Π’ΠΈΠ΄ΠΆΠ΅Ρ‚ "Рядом сСйчас" Ρ„ΠΎΡ‚ΠΎ- ΠΈ видСогалСрСя

Π’ΠΎΡ‚ ΠΆΠΈΠ²ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ выглядит Π½Π° Π²Π΅Π±-страницС:

Π’Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ JK-отзывчивая галСрСя Π²ΠΈΠ΄Π΅ΠΎ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Youtube

Главная / БСсплатно JavaScripts / Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π‘Π»Π°ΠΉΠ΄-ΡˆΠΎΡƒ ΠΈ Π³Π°Π»Π΅Ρ€Π΅ΠΈ / Π—Π΄Π΅ΡΡŒ

Π’Ρ‹Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ JK Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Youtube ΠΈ ГалСрСя изобраТСния

12 ΠΌΠ°Ρ€Ρ‚Π°, 16: ОбновлСно Π΄ΠΎ v2.0, Ρ‡Ρ‚ΠΎ добавляСт ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ YouTube Π²ΠΈΠ΄Π΅ΠΎ!

JK Responsive Youtube Video and Image Gallery - это соврСмСнная галСрСя Π² стилС лайтбоксов, которая ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° любом Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ экрана ΠΈ устройствС. большой ΠΈΠ»ΠΈ малСнький. НаТмитС Π½Π° ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρƒ Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ изобраТСния Youtube, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ с Ρ†Π΅Π½Ρ‚Ρ€ΠΎΠΌ Π² экран с ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠΎΠΉ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½ΠΎΠΉ HTML-подписи ΠΏΠΎΠ΄ Π½ΠΈΠΌ. НиТС пСрСчислСны основныС Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ JK Responsive Gallery:

ВсСго ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹ΠΉ

Π£Π²Π΅Π»ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ Π²ΠΈΠ΄Π΅ΠΎΠΏΡ€ΠΎΠΈΠ³Ρ€Ρ‹Π²Π°Ρ‚Π΅Π»ΡŒ YouTube ΠΈΠ»ΠΈ автоматичСскоС ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ изобраТСния ΠΏΡ€ΠΈ нСобходимости, Ρ‡Ρ‚ΠΎΠ±Ρ‹ всСгда ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ экрана ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

Π—Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Rich HTML

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Π°Ρ подпись ΠΊ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½ΠΎΠΌΡƒ Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ, поддСрТиваСтся HTML!

ΠšΠ»Π°Π²ΠΈΠ°Ρ‚ΡƒΡ€Π° ΠΈ навигация ΠΏΠΎ экрану

Π‘Ρ‚Ρ€Π΅Π»ΠΊΠΈ Π²Π»Π΅Π²ΠΎ ΠΈ Π²ΠΏΡ€Π°Π²ΠΎ для ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρƒ изобраТСниями, ΠΏΡ€ΠΎΠ²Π΅Π΄ΠΈΡ‚Π΅ ΠΏΠ°Π»ΡŒΡ†Π΅ΠΌ ΠΏΠΎ экрану мобильного Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π° устройства Π΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅ самоС. Клавиша Esc для закрытия Π³Π°Π»Π΅Ρ€Π΅ΠΈ.

ΠžΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ Π³Ρ€ΡƒΠΏΠΏΠ° Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Youtube

Π£Π²Π΅Π»ΠΈΡ‡ΡŒΡ‚Π΅ ΠΎΠ΄Π½Ρƒ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρƒ ΠΈΠ»ΠΈ сгруппируйтС нСсколько ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Youtube Π½Π° страницС вмСстС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€Π΅Π²Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ ΠΈΡ… Π² Π³Π°Π»Π΅Ρ€Π΅ΡŽ.Π’ качСствС Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ динамичСски Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ изобраТСния YouTube ΠΊ ΠΎΠ΄Π½ΠΎΠΉ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π΅ Π½Π° страницС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ JavaScript.

Авто Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ автоматичСского закрытия Π³Π°Π»Π΅Ρ€Π΅ΠΈ послС ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ просмотрСл всС Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ изобраТСния Π² ΠΈΡ… Π³Ρ€ΡƒΠΏΠΏΠ΅.

ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΉ Π˜ΠΊΠΎΠ½ΠΎΡ‡Π½Ρ‹Π΅ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹

ВсС элСмСнты ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ интСрфСйса Π³Π°Π»Π΅Ρ€Π΅ΠΈ, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ ΠΊΠ½ΠΎΠΏΠΊΠΈ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΈ, Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° изобраТСния ΠΈ Ρ‚. Π΄. ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΡˆΡ€ΠΈΡ„Ρ‚Π°ΠΌΠΈ Π·Π½Π°Ρ‡ΠΊΠΎΠ² (ΠΈΠ· Icomoon) для Ρ‚ΠΎΡ‡Π½ΠΎΠ³ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ пиксСлСй ΠΈ Π»Π΅Π³ΠΊΠΎΠΉ смСны Ρ†Π²Π΅Ρ‚Π°.

Для Π²ΠΈΠ΄Π΅ΠΎ Π² настоящСС врСмя поддСрТиваСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚: URL-адрСса Youtube . Π Π°Π·Ρ€Π΅ΡˆΠΈΡ‚Π΅ Π½Π°ΠΌ Π·Π½Π°ΠΉΡ‚Π΅, Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π»ΠΈ Π²Ρ‹, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ‹Π»ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Ρ‹ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ Vimeo!

ДСмонстрации

Одно ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅:

ΠŸΠ°Ρ€Π° ΠΏΡ‚ΠΈΡ† Π½Π°Π±Π»ΡŽΠ΄Π°Π΅Ρ‚ Π·Π° восходом солнца. Бсылка
 $ ('# gallery1'). Responseivegallery () 
.

ΠžΠ΄ΠΈΠ½ΠΎΡ‡Π½ΠΎΠ΅ Π²ΠΈΠ΄Π΅ΠΎ Youtube:

 $ ('# gallery1b'). Responseivegallery () 
.

Одно ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с Π΄ΠΎΠ±Π°Π²Π»Π΅Π½Π½Ρ‹ΠΌΠΈ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ изобраТСниями Youtube:

ΠŸΠ°Ρ€Π° ΠΏΡ‚ΠΈΡ† Π½Π°Π±Π»ΡŽΠ΄Π°Π΅Ρ‚ Π·Π° восходом солнца.Бсылка
 $ ('# gallery2'). Responsivegallery ({
срСдства массовой ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ:[
["https://www.youtube.com/watch?v=fzrfrXhE-w4", "Бэм, застСнчивый ΠΌΠΎΠ»ΠΎΠ΄ΠΎΠΉ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ, ΠΏΠΎΠΏΠ°Π΄Π°Π΅Ρ‚ Π² ΠΌΠΈΡ€ Π·Π°ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎΠΉ съСмки"],
["image3.jpg", "подпись 3"],
["image4.jpg", "подпись 4"]
] // <- Π±Π΅Π· запятой послС послСднСй настройки
}) 

Π“Ρ€ΡƒΠΏΠΏΠ° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Π½Π° Youtube

ΠšΡƒΠΏΠΈΠ΄ΠΎΠ½ - любовь слСпа, 3D Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹ΠΉ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠΌΠ΅Ρ‚Ρ€Π°ΠΆΠ½Ρ‹ΠΉ Ρ„ΠΈΠ»ΡŒΠΌ

Π‘ ΠΊΠ°ΠΏΠ»ΠΈ Π²ΠΎΠ΄Ρ‹ начинаСтся Ρ€ΡΠ±ΡŒ.

ΡΡƒΠ΄ΡŒΠ±Π° - ΠΌΡƒΠ»ΡŒΡ‚Ρ„ΠΈΠ»ΡŒΠΌ ΠΊΠΎΡ€ΠΎΡ‚ΠΊΠΎΠΌΠ΅Ρ‚Ρ€Π°ΠΆΠΊΠ°

Π˜Π³Ρ€Π°Ρ‚ΡŒ Π½Π° ΡΠΎΠ»Π½Ρ‹ΡˆΠΊΠ΅.

 $ ('# Π³Ρ€ΡƒΠΏΠΏΠ°1> div.rthumbnail'). Responseivegallery () 

ВСкстовыС ссылки

 $ ('# group2 a'). Responsivegallery ({
autoclose: false
}) 

Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ

Π‘ΠΊΠ°Ρ‡Π°Ρ‚ΡŒ master.zip ΠΈΠ»ΠΈ посСтитС сцСнария github страница .

Установка

Π¨Π°Π³ 1: Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ ΠΊΠΎΠ΄ Π² Ρ€Π°Π·Π΄Π΅Π» вашСй страницы:

ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄ ссылаСтся Π½Π° 3 Π²Π½Π΅ΡˆΠ½ΠΈΡ… Ρ„Π°ΠΉΠ»Π° .js / .css плюс Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„Π°ΠΉΠ»Ρ‹ ΡˆΡ€ΠΈΡ„Ρ‚ΠΎΠ² Π·Π½Π°Ρ‡ΠΊΠΎΠ² (всС ΠΎΠ½ΠΈ находятся Π²Π½ΡƒΡ‚Ρ€ΠΈ jkresponsivegallery.zip):

Π­Ρ‚ΠΎ всС для установки, хотя Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ подробности ΠΏΠΎ настройкС скрипта.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ ΠΎ настройкС

ΠŸΠ΅Ρ€Π²ΠΎΠ΅, Ρ‡Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ для вашСго изобраТСния. эскизы.

- ΠœΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹ с тСкстовыми подписями (ΠΈΠ»ΠΈ Π±Π΅Π· подписи Π²ΠΎΠΎΠ±Ρ‰Π΅):

Для эскизов Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с тСкстовой подписью ΠΈΠ»ΠΈ Π±Π΅Π· подписи Π½Π° всС, просто ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚Π΅ Ρ‚Π΅ΠΊΡΡ‚ΠΎΠ²ΡƒΡŽ ссылку ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ / ссылку Π½Π° Youtube. Π’ΠΎΡ‚ нСсколько ΠΏΡ€ΠΈΠΌΠ΅Ρ€ΠΎΠ²:

  Waterdrop  
  Π²ΠΈΠ΄Π΅ΠΎ Π½Π° YouTube  
    
    

Атрибут " href " Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π½Π° ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ Youtube. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΊΡΡ‚ΠΎΠ²ΡƒΡŽ подпись, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ссылку Β« title Β». Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚.Имя класса Β« thumblink Β» - ΠΏΡ€ΠΎΠΈΠ·Π²ΠΎΠ»ΡŒΠ½ΠΎΠ΅, ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠ·ΠΆΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ / ΡΠ³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹ вмСстС, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ Π²Ρ‹Π·ΠΎΠ²Π΅ΠΌ $ (selector) .responsivegallery () Π½Π° Π½ΠΈΡ….

-Эскизы ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΌΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°ΠΌΠΈ HTML:

Для эскизов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΉ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ HTML, вмСсто этого ΠΎΠ±Π΅Ρ€Π½ΠΈΡ‚Π΅ ссылку Π²Π½ΡƒΡ‚Ρ€ΠΈ DIV, Π° для подписи Π·Π°ΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅ Π΅Π΅ Π²

DIV, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

 
ВСкст Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° HTML поддСрТиваСтся!

Π—Π΄Π΅ΡΡŒ ΠΌΡ‹ Π΄Π°Π΅ΠΌ Π²Π½Π΅ΡˆΠ½Π΅ΠΌΡƒ DIV класс CSS Β« rthumbnail Β», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ автоматичСски скрываСт DIV " rcaption " Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ, ΠΊΠ°ΠΊ ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ jkresponsivegallery.css. ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅ΠΉ ссылки Β« href Β» устанавливаСт ΠΏΡƒΡ‚ΡŒ ΠΊ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Для Π²ΠΈΠ΄Π΅ΠΎ Youtube с Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½Ρ‹ΠΌ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΎΠΌ HTML синтаксис: ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ‡Π½Ρ‹ΠΉ:

 
ВСкст Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° HTML поддСрТиваСтся!

URL Π²ΠΈΠ΄Π΅ΠΎ Youtube ΠΈ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€

ΠŸΡ€ΠΈ ΠΏΠΎΠΊΠ°Π·Π΅ Π²ΠΈΠ΄Π΅ΠΎ Youtube Π²Π°ΠΌ понадобится Π΄Π²Π° Π±ΠΈΡ‚Π° информация:

  1. URL-адрСс самого Π²ΠΈΠ΄Π΅ΠΎ Youtube. Π­Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π² мноТСство Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ², Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

    1. https://www.youtube.com/watch?v=Pe0jFDPHkzo
    2. https: // youtu.be / Pe0jFDPHkzo
    3. https://www.youtube.com/v/Pe0jFDPHkzo
  2. URL-адрСс эскиза Π²ΠΈΠ΄Π΅ΠΎ Youtube, Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρƒ вмСсто тСкстовой ссылки Π½Π° Π²ΠΈΠ΄Π΅ΠΎ. Π’ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ для ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰Π΅ΠΉ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹ Youtube ΠΈΠΌΠ΅Π΅Ρ‚ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚:

    1. http://img.youtube.com/vi/Pe0jFDPHkzo/1.jpg (120 x 90)
    2. http://img.youtube.com/vi/Pe0jFDPHkzo/0.jpg (480 x 360)

Код ΠΈΠ½ΠΈΡ†ΠΈΠ°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ

Π’ Ρ€Π°Π·Π΄Π΅Π»Π΅ HEAD вашСй страницы ΠΏΠΎΠ·Π²ΠΎΠ½ΠΈΡ‚Π΅ ΠΏΠΎ Π½ΠΎΠΌΠ΅Ρ€Ρƒ $ (сСлСктор).Responsegallery () послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ DOM загрузился для нацСливания Π»ΠΈΠ±ΠΎ Π½Π° ΠΎΠ΄ΠΈΠ½ эскиз Π²Ρ‹ΡˆΠ΅, Π»ΠΈΠ±ΠΎ Π³Ρ€ΡƒΠΏΠΏΠ° ΠΈΠ· Π½ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π²Π΅Ρ€ΡˆΠΈΡ‚ΡŒ эффСкт Π³Π°Π»Π΅Ρ€Π΅ΠΈ. Для ΠΎΠ΄Π½ΠΎΠ³ΠΎ эскиза ΡƒΠΊΠ°ΠΆΠΈΡ‚Π΅ Π΅Π³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ΄Π½ΠΎΠ·Π½Π°Ρ‡Π½ΠΎ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ, Π·Π°Ρ‚Π΅ΠΌ Π²Ρ‹Π·ΠΎΠ²ΠΈΡ‚Π΅ для Π½Π΅Π³ΠΎ ΠΌΠ΅Ρ‚ΠΎΠ΄ Π³Π°Π»Π΅Ρ€Π΅ΠΈ:

 <сцСнарий>

jQuery (function ($) {// ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ DOM

$ ("# gallery1"). responseivegallery ()

})



ВСкст Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° HTML поддСрТиваСтся!

Для Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ Π΄Π°ΠΉΡ‚Π΅ ΠΈΠΌ ΠΎΠ±Ρ‰ΠΈΠΉ класс CSS для Π³Ρ€ΡƒΠΏΠΏΠΈΡ€ΠΎΠ²ΠΊΠΈ ΠΈΡ… всС вмСстС, с Π½Π΅ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΌ DIV, ΠΎΠ±Π΅Ρ€Π½ΡƒΡ‚Ρ‹ΠΌ Π²ΠΎΠΊΡ€ΡƒΠ³ Π½ΠΈΡ… для Ρ„ΠΈΠ»ΡŒΡ‚Ρ€Π°Ρ†ΠΈΠΈ ΠΈΡ… ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΈΡ… ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ Π½Π° страницС с Ρ‚Π΅ΠΌ ΠΆΠ΅ классом CSS:

 <сцСнарий>

jQuery (function ($) {// ΠΏΡ€ΠΈ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ DOM

$ ("# group1> div.rthumbnail "). responseivegallery ()

})



ВСкст Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° HTML поддСрТиваСтся!
ВСкст Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° HTML поддСрТиваСтся!

ΠœΠ΅Ρ‚ΠΎΠ΄ $ (сСлСктор).Responsegallery () ΠΏΡ€ΠΈ Π²Ρ‹Π·ΠΎΠ²Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹:

Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ОписаниС
Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒ: [] МСдиа-массив для динамичСского отобраТСния Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π²ΠΈΠ΄Π΅ΠΎ ΠΈΠ»ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Youtube. Бинтаксис:
  $ ("# gallery1"). Responsivegallery ({
 БМИ: [
['largeimg2.jpg', 'подпись 2'],
['largeimg3.jpg', 'подпись 3],
['largeimg4.jpg', 'подпись 4']
]
}) 

ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ изобраТСния / Π²ΠΈΠ΄Π΅ΠΎ Youtube для ΠΏΠΎΠΊΠ°Π·Π° динамичСски для ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹ΠΉ эскиз.Для Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ media [] Π½Π΅ дСйствуСт.

автоматичСскоС Π·Π°ΠΊΡ€Ρ‹Ρ‚ΠΈΠ΅

ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ истинно

Для Π³Ρ€ΡƒΠΏΠΏΡ‹ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ (ΠΈΠ»ΠΈ ΠΎΠ΄ΠΈΠ½ΠΎΡ‡Π½Ρ‹Ρ… ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρƒ с Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ изобраТСниями / Π²ΠΈΠ΄Π΅ΠΎ Youtube, опрСдСляСмыми динамичСски), логичСскоС опция Ρ‚ΠΎΠ³ΠΎ, слСдуСт Π»ΠΈ автоматичСски Π·Π°ΠΊΡ€Ρ‹Π²Π°Ρ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ просмотрСл всС БМИ Π² Π³Ρ€ΡƒΠΏΠΏΠ΅.
fxduration

ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ 150

УстанавливаСт ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒ ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°. эффСкт Π² миллисСкундах.

Π Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΠΎΠΏΡ†ΠΈΡŽ запятой, Ссли Π΅ΡΡ‚ΡŒ нСсколько ΠΎΠΏΡ†ΠΈΠΉ. ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΎ, ΠΊΡ€ΠΎΠΌΠ΅ самого послСднСго:

  $ ("# gallery1"). responsivegallery ({
 БМИ: [
['largeimg2.jpg', 'подпись 2'],
['largeimg3.jpg', 'подпись 3],
['largeimg4.jpg', 'подпись 4']
],
autoclose: false // <- Π±Π΅Π· запятой послС послСднСй ΠΎΠΏΡ†ΠΈΠΈ
}) 

Π¨Ρ€ΠΈΡ„Ρ‚Ρ‹ Icomoon

JK Responsive Gallery ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ icomoon ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹ для всС элСмСнты управлСния, Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ "Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ°" изобраТСния, ΠΊΠ½ΠΎΠΏΠΊΠΈ Π²Π»Π΅Π²ΠΎ / Π²ΠΏΡ€Π°Π²ΠΎ ΠΈ Ρ‚. Π΄.Π­Ρ‚ΠΎΡ‚ Π΄Π΅Π»Π°Π΅Ρ‚ ΠΈΡ… ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΡ‹ΠΌΠΈ ΠΈ Ρ€Π°ΡΠΊΡ€Π°ΡˆΠΈΠ²Π°Π΅ΠΌΡ‹ΠΌΠΈ, просто ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² CSS Β« font-size Β» ΠΈ свойство Β« Ρ†Π²Π΅Ρ‚ Β» ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΡ… элСмСнтов SPAN, содСрТащих ΠΈΡ…. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° стили для элСмСнтов SPAN Π²Π½ΡƒΡ‚Ρ€ΠΈ jkresponsivegallery.css Π² Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ ΠΈΡ….


ГалСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΎΠ΄Π½ΠΎΠ³ΠΎ ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚Π° Woocommerce - Javascript Π½Π΅ загруТаСтся - CMS ΠΈ WordPress - Π€ΠΎΡ€ΡƒΠΌΡ‹ SitePoint

ΠœΠ°Ρ€ΠΊ, Ρ‚Ρ‹ ΠΏΡ€Π°Π² ... ΠŸΠΎΠ·Π²ΠΎΠ»ΡŒΡ‚Π΅ ΠΌΠ½Π΅ Ρ€Π°ΡΡΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ я сдСлал.

Π˜Ρ‚Π°ΠΊ, я использовал Π±Π°Π·ΠΎΠ²ΡƒΡŽ Ρ‚Π΅ΠΌΡƒ Automattic, Underscores, ΠΈ ΠΎΡ‚Ρ‚ΡƒΠ΄Π° Π½Π°Ρ‡Π°Π» Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡˆΠ°Π±Π»ΠΎΠ½Ρ‹, ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π² ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ Bootstrap, Google Fonts ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ скрипты js, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ, Π½ΠΎ Π½Π° самом Π΄Π΅Π»Π΅ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ этих Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ ΠΌΠ½Π΅ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ я Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ использовалась Ρ‚ΠΎΠ»ΡŒΠΊΠΎ анимация для Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ° мСню.

ΠžΡΡ‚Π°Π»ΡŒΠ½Π°Ρ Ρ‡Π°ΡΡ‚ΡŒ Π²Π΅Π±-сайта ΠΎΡ‡Π΅Π½ΡŒ проста… намСрСнно… Π― Ρ…ΠΎΡ‚Π΅Π», Ρ‡Ρ‚ΠΎΠ±Ρ‹ эта Ρ‚Π΅ΠΌΠ° Π±Ρ‹Π»Π° простой ΠΈ понятной, ΠΈ Π² Π½Π΅ΠΉ использовалось ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ мСньшС ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ².

Π― ΠΏΡ€ΠΈΠ»ΠΎΠΆΠΈΠ» снимок экрана со скриптами ΠΈ CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ я поставил Π² ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ. Π― Π½Π΅Π΄Π°Π²Π½ΠΎ ΠΏΡ€ΠΎΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π» Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠ· Π½ΠΈΡ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ΡΡΠ½ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π±Π»ΠΎΠΊΠΈΡ€ΡƒΠ΅Ρ‚.

Π― установил ΠΏΠ»Π°Π³ΠΈΠ½ для Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΈ ΠΎΠ½ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π», ΠΎΠ½ Π²Ρ‹Π²ΠΎΠ΄ΠΈΠ» изобраТСния, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ Ρ„ΠΎΡ€ΠΌΠΈΡ€ΠΎΠ²Π°Π»ΠΈΡΡŒ Π² Π³Π°Π»Π΅Ρ€Π΅ΡŽ, Π° просто изобраТСния Π²Ρ‹Π²ΠΎΠ΄ΠΈΠ»ΠΈΡΡŒ Π½Π° страницу.

Π― Ρ‚Π°ΠΊΠΆΠ΅ попытался ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½ для лайтбокса, ΠΈ всС ΠΆΠ΅ всякий Ρ€Π°Π·, ΠΊΠΎΠ³Π΄Π° я наТимаю Π½Π° изобраТСния, ΠΎΠ½ΠΈ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ΡΡ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅, Π½ΠΎ Π½Π΅ Π² лайтбоксС, ΠΈ Π² Π³Π°Π»Π΅Ρ€Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π΅Ρ‚ Π°Π½ΠΈΠΌΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ повСдСния.

Π‘Π½Π°Ρ‡Π°Π»Π° я Ρ€Π΅ΡˆΠΈΠ», Ρ‡Ρ‚ΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΠ» ΠΎΡ‚Π»Π°Π΄ΠΊΡƒ ΠΈ посмотрСл Π½Π° ошибки. Π˜Ρ… Π½Π΅ Π±Ρ‹Π»ΠΎ. ЕдинствСнная ошибка - это ΡƒΡΡ‚Π°Ρ€Π΅Π²ΡˆΠ°Ρ функция create_function () Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈΠ· ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹Ρ… ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ Π²ΠΈΠ΄ΠΆΠ΅Ρ‚ΠΎΠ².

Π—Π°Ρ‚Π΅ΠΌ я Π½Π°Ρ‡Π°Π» ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹, Π½ΠΎ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Π½Π΅ исчСзла.

Π—Π°Ρ‚Π΅ΠΌ я Π·Π°ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π» Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ поставлСнных Π² ΠΎΡ‡Π΅Ρ€Π΅Π΄ΡŒ скриптов / Ρ‚Π°Π±Π»ΠΈΡ† стилСй.

Π― ΠΎΡ‚ΠΏΡ€Π°Π²ΠΈΠ» снимок экрана, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ, ΠΊΠ°ΠΊ выглядит ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΎΠ΄Π½ΠΎΠ³ΠΎ продукта… Π½Π΅ Π±Π΅ΡΠΏΠΎΠΊΠΎΠΉΡ‚Π΅ΡΡŒ ΠΎ вариациях, ΠΎΠ½ΠΈ выглядят Π±Π΅Π·ΡƒΠΌΠ½ΠΎ, я всС Π΅Ρ‰Π΅ ΠΈΡ… ΡΡ‚ΠΈΠ»ΠΈΠ·ΡƒΡŽβ€¦ Π½ΠΎ я большС сосрСдоточился Π½Π° устранСнии Π½Π΅ΠΏΠΎΠ»Π°Π΄ΠΎΠΊ Π² Π³Π°Π»Π΅Ρ€Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Π­Ρ‚ΠΎ просто Π½Π΅ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Π² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎΠΉ Π³Π°Π»Π΅Ρ€Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΎΠ΄Π½ΠΎΠ³ΠΎ Ρ‚ΠΎΠ²Π°Ρ€Π°. А консоль ошибок Π½Π΅ Π΄Π°Π΅Ρ‚ Π½ΠΈΡ‡Π΅Π³ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠ³ΠΎ. Π― Ρ‚ΠΎΠΆΠ΅ сдСлал снимок экрана ΠΈ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠΈΠ».

Π£Ρ€Π° ... НадСюсь, это ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΠΈΠ»ΠΈ всСм, ΠΊΡ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π·Π°Ρ…ΠΎΡ‚Π΅Ρ‚ΡŒ ΠΏΠΎΠΌΠΎΡ‡ΡŒ, ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ большС ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

Π― Π΅Ρ‰Π΅ Π½Π΅ Ρ€Π°Π·ΠΎΡ‡Π°Ρ€ΠΎΠ²Π°Π½, Π½ΠΎ я Π½Π΅ ΠΌΠΎΠ³Ρƒ ΠΏΡ€ΠΈΠ΄ΡƒΠΌΠ°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΠΎΠ³Π»ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΏΡ€ΠΈΡ‡ΠΈΠ½ΠΎΠΉ этого ... Π― Ρ‡ΡƒΠ²ΡΡ‚Π²ΡƒΡŽ, Ρ‡Ρ‚ΠΎ всС сдСлал ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ, Π² Ρ‚ΠΎΠΌ Ρ‡Ρ‚ΠΎ касаСтся Ρ‚Π΅ΠΌΡ‹. Π― имСю Π² Π²ΠΈΠ΄Ρƒ, это довольно просто.

Π‘Π°ΠΉΡ‚ находится Π·Π° заставкой, поэтому, Π΄Π°ΠΆΠ΅ Ссли я ΠΎΡ‚ΠΏΡ€Π°Π²Π»ΡŽ ссылку, ΠΎΠ½Π° Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΈΠ΄Π½Π° ... Π½ΠΎ я Π±ΡƒΠ΄Ρƒ Ρ€Π°Π΄ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΡƒ-Π»ΠΈΠ±ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π² частном порядкС, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠΌΠΎΡ‰ΡŒ ΠΏΠΎ Π½Π΅ΠΉ ...

ЭлСгантная Π²Π΅Π±-галСрСя HTML ΠΈ Javascript для Adobe Lightroom

Elegance - это Lightroom Web Engine , ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для создания красивой дСмонстрации вашСй Ρ€Π°Π±ΠΎΡ‚Ρ‹, которая Ρ…ΠΎΡ€ΠΎΡˆΠΎ интСгрируСтся с ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΌ Π΄ΠΈΠ·Π°ΠΉΠ½ΠΎΠΌ вашСго Π²Π΅Π±-сайта.

Elegance Π±Ρ‹Π» Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Π°Π½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ‡ΠΈΡΡ‚ΡƒΡŽ ΠΈ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π²Π΅Π±-Π³Π°Π»Π΅Ρ€Π΅ΡŽ для нСбольшого (ΠΈΡΡΡƒΡˆΠ°ΡŽΡ‰Π΅Π³ΠΎ) количСства ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ элСгантны ΠΈ Π½Π΅ΠΉΡ‚Ρ€Π°Π»ΡŒΠ½Ρ‹ для сайта . Π—Π΄Π΅ΡΡŒ Π½Π΅Ρ‚ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… ΠΏΠ°Π½Π΅Π»Π΅ΠΉ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ‹Π»ΠΈ Π±Ρ‹ нСумСстны ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠΉ Ρ‡Π°ΡΡ‚ΡŒΡŽ вашСго сайта.

Π‘ этой Ρ†Π΅Π»ΡŒΡŽ, нСсмотря Π½Π° ΠΊΠ°ΠΆΡƒΡ‰ΡƒΡŽΡΡ простоту, Elegance ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ настраиваСтся. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ всС Ρ†Π²Π΅Ρ‚Π°, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΡˆΡ€ΠΈΡ„Ρ‚Ρ‹, ΠΏΠ΅Ρ€Π΅ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ эскизы, ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ врСмя ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π° ΠΌΠ΅ΠΆΠ΄Ρƒ слайд-ΡˆΠΎΡƒ ΠΈ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈΠ»ΠΈ Π²Ρ‹ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ элСмСнты.Π­Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ Π²Π°ΠΌ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ бСспрСпятствСнный просмотр для Π²Π°ΡˆΠΈΡ… посСтитСлСй.

ΠžΠ±Π·ΠΎΡ€ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ

  • Чистая ΠΈ элСгантная прСзСнтация.
  • ДинамичСский просмотр с затуханиями ΠΈ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°ΠΌΠΈ.
  • Чистый HTML / Javascript - Π±Π΅Π· Flash.
  • Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Ρ‹ для обСспСчСния ΠΏΠ»Π°Π²Π½ΠΎΠ³ΠΎ просмотра.
  • ВсС изобраТСния ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π½Π° ΠΎΠ΄Π½ΠΎΠΉ страницС (ΠΏΠΎ ΠΎΠ΄Π½ΠΎΠΌΡƒ), Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ оТидания Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы.
  • ΠžΡ‡Π΅Π½ΡŒ настраиваСмый интСрфСйс, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π»Π΅Π³ΠΊΠΎ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π² ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠΉ Π²Π΅Π±-сайт.
  • Π‘ΠΎΠ²ΠΌΠ΅ΡΡ‚ΠΈΠΌΠΎΡΡ‚ΡŒ с iPhone. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³ΡƒΡ‚ Π΄Π°ΠΆΠ΅ Β«ΠΏΡ€ΠΎΠ»ΠΈΡΡ‚Ρ‹Π²Π°Ρ‚ΡŒΒ» Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ.
  • ΠŸΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° автоматичСских индСксов TTG XML ΠΈ TTG Pages ΠΎΡ‚ Turning Gate для создания Ρ†Π΅Π»Ρ‹Ρ… Π²Π΅Π±-сайтов.
  • АвтоматичСская ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ.

Π’Π΅Π±-Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ

ГалСрСя основана ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π½Π° HTML ΠΈ Javascript, Ρ‡Ρ‚ΠΎ Π΄Π°Π΅Ρ‚ нСсколько прСимущСств ΠΏΠΎ ΡΡ€Π°Π²Π½Π΅Π½ΠΈΡŽ с сайтами Π½Π° основС Flash:

  • ВсС соврСмСнныС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ сразу ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ.ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ Π½Π΅ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½Π°Π²Π»ΠΈΠ²Π°Ρ‚ΡŒ Flash, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ вашС ΠΏΠΎΡ€Ρ‚Ρ„ΠΎΠ»ΠΈΠΎ (Ρ‡Ρ‚ΠΎ рискуСт ΠΎΡ‚ΠΏΡƒΠ³Π½ΡƒΡ‚ΡŒ посСтитСлСй).
  • Π“Π°Π»Π΅Ρ€Π΅ΡŽ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠ²ΠΈΠ΄Π΅Ρ‚ΡŒ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах , Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΡ… Flash, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° iPhone.
  • ΠœΠ°ΠΊΠ΅Ρ‚ страницы ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΏΠ»Π°Π²Π½ΠΎΡΡ‚ΡŒ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΎΠΊΠ½Π°.
  • ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΌΠΎΠ³ΡƒΡ‚ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ прСимущСствами управлСния Ρ†Π²Π΅Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ваши изобраТСния выглядСли ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ (Π² настоящСС врСмя Π³Π°Π»Π΅Ρ€Π΅ΠΈ Lightroom Flash Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ Flash с ΡƒΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ).
ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ нСсколько ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ, ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΠ²ΡˆΠΈΡ… Javascript, ΠΏΠΎ-ΠΏΡ€Π΅ΠΆΠ½Π΅ΠΌΡƒ смогут ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ, ΠΎΠ΄Π½Π°ΠΊΠΎ ΠΎΠ½ΠΈ Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ прСимущСств ΠΎΡ‚ Ρ€Π°ΡΡˆΠΈΡ€Π΅Π½Π½ΠΎΠ³ΠΎ динамичСского взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ.

ΠžΠ±Ρ€Π°Π·Ρ†Ρ‹

Π­Ρ‚ΠΎ новая галСрСя, поэтому ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π΄Ρ‹ Π²ΠΈΠ΄Π΅Ρ‚ΡŒ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Ρ‹ вашСго творчСства. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ здСсь свою Π³Π°Π»Π΅Ρ€Π΅ΡŽ, ΡΠ²ΡΠΆΠΈΡ‚Π΅ΡΡŒ с Π½Π°ΠΌΠΈ.

Π’ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π³Π°Π»Π΅Ρ€Π΅ΠΈ, созданныС с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Elegance :

  • Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ с вСлосипСдом Elegance ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для создания чистой, Π½ΠΎ классичСской Π³Π°Π»Π΅Ρ€Π΅ΠΈ.
  • ВзглянитС Π½Π° Π³Π°Π»Π΅Ρ€Π΅ΡŽ Π°Π²ΠΈΠΎΠ½ΠΈΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΎΠ½ любСзно Ρ€Π°Π·Ρ€Π΅ΡˆΠΈΠ» Π½Π°ΠΌ Ρ€Π°Π·ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ здСсь, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ΄Π΅ΠΌΠΎΠ½ΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ использованиС Elegance Π² ShadowBox.
  • Π’ Π³Π°Π»Π΅Ρ€Π΅Π΅ Π‘Ρ‚ΠΈΠ²Π΅Π½Π° ДТСймса Π‘ΠΊΠΎΡ‚Ρ‚Π° Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Elegance , встроСнный Π² ΠΌΠ°ΠΊΠ΅Ρ‚ Π΅Π³ΠΎ сайта.

ΠŸΠ»Π°Ρ‚Π΅ΠΆΠΈ ΠΈ обновлСния

ΠŸΡ€ΠΎΠ±Π½Π°Ρ вСрсия ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½Π° созданиСм Π³Π°Π»Π΅Ρ€Π΅ΠΉ с 6 изобраТСниями ΠΎΠ΄Π½ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎ. ПослС ΠΏΠΎΠΊΡƒΠΏΠΊΠΈ Π»ΠΈΡ†Π΅Π½Π·ΠΈΠΈ ΠΌΡ‹ Π΄Π°Π΄ΠΈΠΌ Π²Π°ΠΌ рСгистрационный ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ снимСт это ΠΎΠ³Ρ€Π°Π½ΠΈΡ‡Π΅Π½ΠΈΠ΅.ВсС Π±ΡƒΠ΄ΡƒΡ‰ΠΈΠ΅ обновлСния бСсплатны.

Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ модальной Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ Bootstrap

Π’Ρ‹ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡƒΠ΄ΡŒ Π½Π°ΠΆΠΈΠΌΠ°Π»ΠΈ Π½Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° Π²Π΅Π±-страницС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ изобраТСния с Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ для просмотра Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ?

НСкоторыС Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ это Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΠΌ ΠΎΠΊΠ½ΠΎΠΌ. Π”Ρ€ΡƒΠ³ΠΈΠ΅ Π½Π°Π·Ρ‹Π²Π°ΡŽΡ‚ это лайтбоксом. Bootstrap Π½Π°Π·Ρ‹Π²Π°Π΅Ρ‚ это ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ. Π― ΡƒΠΏΠΎΠΌΠΈΠ½Π°ΡŽ Bootstrap, ΠΏΠΎΡ‚ΠΎΠΌΡƒ Ρ‡Ρ‚ΠΎ Ρ…ΠΎΡ‡Ρƒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π³ΠΎ для Ρ‚ΠΎΠ³ΠΎ ΠΆΠ΅. Π˜Ρ‚Π°ΠΊ, с этого ΠΌΠΎΠΌΠ΅Π½Ρ‚Π° Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π½Π°Π·ΠΎΠ²Π΅ΠΌ это ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΌ.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ Bootstrap? , спроситС Π²Ρ‹.Ну ΠΈ нСсколько ΠΏΡ€ΠΈΡ‡ΠΈΠ½:

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

Π’ΠΎΡ‚ Π³Π΄Π΅ ΠΌΡ‹ Π·Π°ΠΊΠΎΠ½Ρ‡ΠΈΠΌ:

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим это ΠΏΠΎ ΠΊΡ€ΡƒΠΏΠΈΡ†Π°ΠΌ.

Π¨Π°Π³ 1. Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ сСтки Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

НачнСм с Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π²ΠΈΠ΄Π΅ сСтки. Для этого ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ сСтку Bootstrap.

  

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π½Π°ΠΌ Π½ΡƒΠΆΠ½Ρ‹ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ эти изобраТСния ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ.Bootstrap смотрит Π½Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Π΄Π°Π½Π½Ρ‹Ρ…, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊΠΈΠ΅ элСмСнты Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ½Ρ‚Π΅Ρ€Π°ΠΊΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ ΠΈ Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΄Π΅Π»Π°Ρ‚ΡŒ. Π’ этом случаС ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ взаимодСйствия, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°ΡŽΡ‚ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ ΠΈ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°Ρ‚ΡŒ изобраТСния с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π° карусСли.

Об этих Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°Ρ… Π΄Π°Π½Π½Ρ‹Ρ…:

  1. ΠœΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ data-toggle = "modal" ΠΈ data-target = "# exampleModal" ΠΊ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠΌΡƒ элСмСнту (#gallery ). Π­Ρ‚ΠΎ позволяСт Ρ‰Π΅Π»ΠΊΠ½ΡƒΡ‚ΡŒ Ρ‡Ρ‚ΠΎ-Π»ΠΈΠ±ΠΎ Π² Π³Π°Π»Π΅Ρ€Π΅Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ модальноС ΠΎΠΊΠ½ΠΎ.ΠœΡ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ data-target ( #exampleModal ) Π² качСствС ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° самого модального ΠΎΠΊΠ½Π°, Π½ΠΎ ΠΌΡ‹ сдСлаСм это, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠ΅Ρ€Π΅ΠΉΠ΄Π΅ΠΌ ΠΊ модальной Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ΅.
  2. Π”Π°Π²Π°ΠΉΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ data-target = "# carouselExample" ΠΈ data-slide-to Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΊ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ. ВмСсто этого ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΈΡ… Π² ΠΎΠ±ΠΎΠ»ΠΎΡ‡ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½ΠΎ ΠΌΡ‹ Π±ΡƒΠ΄Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния Π² этом постС. ПозТС ΠΌΡ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Ρ†Π΅Π»ΠΈ Π΄Π°Π½Π½Ρ‹Ρ… ( #carouselExample ) Π² качСствС ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€Π° карусСли, поэтому ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅ Π½Π° это, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ добСрСмся Π΄ΠΎ Π½Π΅Π΅.ЗначСния ΠΎΡ‚ слайд-Π΄Π°Π½Π½Ρ‹Ρ… Π΄ΠΎ основаны Π½Π° порядкС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Π’ΠΎΡ‚ Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ, Ссли ΡΠ»ΠΎΠΆΠΈΡ‚ΡŒ всС вмСстС:

  

Π₯ΠΎΡ‚ΠΈΡ‚Π΅ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎΠ± Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°Ρ… Π΄Π°Π½Π½Ρ‹Ρ…? ΠžΠ·Π½Π°ΠΊΠΎΠΌΡŒΡ‚Π΅ΡΡŒ с ΠΈΡ… руководством ΠΏΠΎ CSS-Ρ‚Ρ€ΡŽΠΊΠ°ΠΌ.

Π¨Π°Π³ 2. Π’Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚Π΅ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½ΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ

Π­Ρ‚ΠΎ ΠΊΠ°Ρ€ΡƒΡΠ΅Π»ΡŒ Π²Π½ΡƒΡ‚Ρ€ΠΈ модального ΠΎΠΊΠ½Π°, ΠΎΠ±Π° ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΡΠ²Π»ΡΡŽΡ‚ΡΡ стандартными ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π°ΠΌΠΈ Bootstrap. ΠœΡ‹ просто Π²ΠΊΠ»Π°Π΄Ρ‹Π²Π°Π΅ΠΌ ΠΎΠ΄Π½ΠΎ Π² Π΄Ρ€ΡƒΠ³ΠΎΠ΅. Π’ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ стСпСни прямоС ΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ вставка ΠΈΠ· Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Bootstrap.

Π’ΠΎΡ‚ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΆΠ½Ρ‹Π΅ Π΄Π΅Ρ‚Π°Π»ΠΈ, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ стоит ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅:

  1. ΠœΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹ΠΉ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π΅Π»ΠΈ Π΄Π°Π½Π½Ρ‹Ρ… элСмСнта Π³Π°Π»Π΅Ρ€Π΅ΠΈ.
  2. Π˜Π΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΠΊΠ°Ρ‚ΠΎΡ€ карусСли Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ Ρ†Π΅Π»Π΅Π²ΠΎΠΌΡƒ ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρƒ Π΄Π°Π½Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Π³Π°Π»Π΅Ρ€Π΅Π΅.
  3. Π‘Π»Π°ΠΉΠ΄Ρ‹ карусСли Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ изобраТСниям Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈ Ρ€Π°ΡΠΏΠΎΠ»Π°Π³Π°Ρ‚ΡŒΡΡ Π² Ρ‚ΠΎΠΌ ΠΆΠ΅ порядкС.

Π’ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠ° модального ΠΎΠΊΠ½Π° с нашими Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ:

  

ΠœΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ сразу Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ карусСли, Π² стилС Voltron!

  
  

ΠŸΠΎΡ…ΠΎΠΆΠ΅, ΠΌΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ΄Π°, Π½Π΅ Ρ‚Π°ΠΊ Π»ΠΈ? ΠžΠΏΡΡ‚ΡŒ ΠΆΠ΅, это Π² основном прямо ΠΈΠ· Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ Bootstrap, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с нашими Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ ΠΈ изобраТСниями.

Π¨Π°Π³ 3. Π Π°Π±ΠΎΡ‚Π° с Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

Π’ этом Π½Π΅Ρ‚ нСобходимости, Π½ΠΎ Ссли изобраТСния Π² карусСли ΠΈΠΌΠ΅ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΈΡ… с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π΅Π΄ΠΈΠ½ΠΎΠΎΠ±Ρ€Π°Π·ΠΈΠ΅. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ здСсь ΠΌΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ Sass.

  // Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ‚ΠΎΡ‡ΠΊΠΈ останова Bootstrap для согласованности.
$ bootstrap-sm: 576 пиксСлСй;
$ bootstrap-md: 768 пиксСлСй;
$ bootstrap-lg: 992px;
$ bootstrap-xl: 1200 пиксСлСй;

// ΠžΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.
#gallery {
  img {
    высота: 75vw;
    ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚: ΠΊΡ€Ρ‹ΡˆΠΊΠ°;
    
    @media (min-width: $ bootstrap-sm) {
      высота: 35vw;
    }
    
    @media (min-width: $ bootstrap-lg) {
      высота: 18vw;
    }
  }
}

// ΠžΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ изобраТСния Π² курсСлС
.carousel-item {
img {
высота: 60vw;
ΠΎΠ±ΡŠΠ΅ΠΊΡ‚ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚: ΠΊΡ€Ρ‹ΡˆΠΊΠ°;

@media (min-width: $ bootstrap-sm) {
высота: 350 пиксСлСй;
}
}
}  

Π¨Π°Π³ 4. ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

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

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²ΠΎ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄Π° Bootstrap Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π² Π³Π°Π»Π΅Ρ€Π΅Π΅ изобраТСния, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΎΡ‚ ΠΌΠΎΠ΄Π°Π»ΡŒΠ½Ρ‹Ρ…. Они Π½Π΅ ΠΈΡΠΊΠ»ΡŽΡ‡Π°ΡŽΡ‚ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Π°, Ссли Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π½Π° ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ„Π°ΠΉΠ».

Π˜Ρ‚Π°ΠΊ, для этого я ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ ΠΎΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ Π³Π°Π»Π΅Ρ€Π΅ΠΈ изобраТСниями Π±ΠΎΠ»Π΅Π΅ Π½ΠΈΠ·ΠΊΠΎΠ³ΠΎ качСства:

  

Π’ΠΎΡ‚ ΠΈ всС!

Π‘Π°ΠΉΡ‚, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ я это ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ, ΡƒΠΆΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ тСматичСский Bootstrap.

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

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