Адаптивна галерия. Уеб дизайн и оптимизация за търсачки

LightBox е jquery-plugin, който се използва за показване на изображение или всяко друго съдържание в специално декориран прозорец, който се показва като правило, на полупрозрачен обърнат фон в горната част на страницата на основното съдържание.

Преди да инсталирате плъгина към страницата и да се включите в настройката му, нека погледнем примерите:

Първи стъпки с LightBox

Изтеглете най-новата версия на Plug-in (също на разположение чрез Bower: Bower инсталирайте LightBox2 --save). След това ражте zip файла и погледнете в изрязания пример, който е в папката примери..

Готови ли сте да инсталирате LightBox на страницата си? Започнете с свързване на CSS и JavaScript. Можете да вземете и двата файла от папката. dist.. Поставете следния код между тагове на главата в уеб страницата си

Следният код, свързващ вложката на плъгина пред етикета за затваряне на тялото:

Уверете се, че JQuery, който искате за осветление, също са заредени. Ако вече използвате jQuery (задължително jquery 1.7 или по-високо) на страницата, уверете се, че е заредено lightbox.js.. Ако не сте свързани с jQuery, се използва dist / js / lightbox-plus-jquery.js, който вече има тази библиотека, или изтегли най-новата версия от. Сайт. Уверете се, че четирите изображения са предписани в lightbox.css. Място в определеното място. Можете да приемате изображения от папката / Dist / images.

Сега ще се справим с HTML кода. Добавете атрибута за данни за осветление на данни към референтната връзка и към която искаме да приложим нашия плъгин. При висококачествена атрибутна стойност използвайте уникално име за всяко изображение. Например:

Image # 1.

Добавете атрибута за заглавие на данни, ако искате да покажете заглавието. Ако имате група от свързани изображения, които бихте искали да комбинирате в набор, използвайте една и съща стойност в атрибута за данни за осветление за желаните изображения. Например:

Img 2 img 3 img 4

Настройки LightBox.

Ако искате да промените настройките по подразбиране, обадете се на опцията :.

vallshownanavontouchdesevices: false
Ако вярно., левите и десните навигационни стрелки, които се появяват, когато се движат мишката, когато преглеждате набор от изображения, ще бъдат видими на устройства с устройства за поддръжка на докосване
по подразбиране: 500
Необходимото време за изчезване на контейнера в милисекунди.
fitimagesinviewport По подразбиране: TRUE
Ако вярно.Той е пропорционално намален размер на изображението, така че картината да се побере в зоната за гледане. Той елиминира потребителя от необходимостта да превъртате, за да видите цялото изображение.
максимум.
Ако е зададен, височината на изображението ще бъде ограничена до тази стойност (в пиксела). Аспектното съотношение няма да се наблюдава.
maxheight.
Ако е зададен, ширината на изображението ще бъде ограничена до тази стойност (в пиксела). Аспектното съотношение няма да се наблюдава.
позиция на по подразбиране: 50
Разстояние от горната част на прозореца за гледане към контейнера за осветление (в пиксели).
прозостяване по подразбиране: 700
Времето, през което контейнерът за осветление ще промени ширината и височината си, когато променя изображенията с различни размери (в милисекунди).
showimagenumberlabel по подразбиране: true
Ако фалшивТекстът ще покаже текущия номер на изображението и общия брой изображения в комплекта, например: "Image 2 от 4".
обвиване по подразбиране: FALSE
Ако вярно.Когато последното изображение се покаже, бутонът за показване на следващото изображение не изчезва. Натискането му ще доведе до показване на първото изображение.

Скриптът организира изображения в изскачащ прозорец. Изгледът може да бъде организиран или с един образ или галерия, изключва снимки в изскачащия прозорец.
Инсталиран е най-лесният и най-бърз скрипт. Инсталиран и конфигуриран буквално след няколко минути.

Как да инсталирате LightBox

Изтеглете архива, разопаковайте и изтеглете сървъра.
След това вградете скрипта на сайта си. В HTML кода на страницата предписване на код

И последната стъпка. Дисплей на изображението.
Изходът на изображението го прави

Стандартен изходен код за малка картина и връзки към голяма картина, само два параметъра се добавят към връзката.
Ето пример за този код - когато кликнете върху снимката, изскача голямо изображение.

За такъв ефект съответства на параметъра data-lightbox \u003d "image".
Ако имате на много изображения на страницата, можете да направите отваряне на изображения, без да превъртате в изскачащия прозорец и можете да комбинирате изображения и те ще превъртат през изскачащия прозорец.
За да комбинирате изображения, трябва да използвате едно име за всяка група снимки.

Както можете да видите, всички снимки могат да се превъртат в изскачащ прозорец, тъй като data-LightBox. Всеки има същото.
Ако искате да разделите снимките, така че те да не се разпръснат, използвайте този код.

Сега всяка снимка се отваря поотделно, т.е. няма възможност да се премине към следващата.

Какво има в модернизираната версия

Бутон за увеличаване на изображението в реалния размер. Можете да го видите във всички примери. В оригиналната версия няма
В самата скрипта има настройка, можете да изключите този бутон.

И второто, които се нуждаят от необходимото допълнение, е изключение на двойките на снимките.
По подразбиране е изключено, можете да активирате директно в скрипта, където е включен бутонът за реалния размер.
В обичайното приложение на скрипта тази функция носи само вреда, възможно е да се използва само в много безнадеждни ситуации.

Забележка, три връзки са празни, т.е. те се отнасят до големи изображения, но между етикетите няма нищо между етикетите и една връзка е пълна с изображението.
В резултат на това в браузъра се вижда само една снимка, когато кликнете върху нея, тя отваря страхотна снимка и всички снимки от празни връзки са затегнати и можете да обърнете.
И тук, погледнете, в връзките има две идентични снимки (маркирани в червено) и когато листата ще видите две идентични снимки.
Ако в конкретен пример, включете отстраняването на двойката, тогава няма да има дублирани снимки.

Разбира се, не трябва да има такава ситуация, защо да носите две еднакви снимки и след това ги изтрийте. Но достатъчно странно, бях в такава ситуация, дублиращите се снимки трябваше да бъдат изведени в един онлайн магазин (имаше хитър заменя на снимки чрез скриптове) и при гледане чрез LightBox, дублиращите картини изглеждаха много погрешни. Това е удобно отстраняване на двойно.

Коментари

11.12.2014 Виктор
Скриптът е много добър. С помощта на заглавие на данни можете дори да опишете картината. Но имах проблем, бях на страницата, застанах на сценария, който постави устройството отстрани, когато този скрипт е свързан, той изчезва. И изчезва, ако JS скриптовете са свързани. Мислех, че заради версията на конфликта не заради тях.

05/23/2015 Виктор
Аз не работя, когато
href \u003d "http://ikk.secrieru.ru/products/gallery/000039.jpg?ver\u003d20150523142822" \\ t
Той има такъв вид. Без? Ver \u003d 20150523142822
върши работа

05/25/2015 Kaha.
Благодаря много.

06/29/2015 Андрей
Много благодаря за работата ви! Всичко е спечелило почти първи път)

08/26/2015 Александър
Опитах различни аналози. Без конфликт, това стана веднага. Увеличаване на произхода. Размер на червата. Ако все още има мишка да вземете и преместите полевите снимки - обикновено Kapets

11/01/2015 Игор
Здравейте!
Отлична галерия. Много благодаря.
Само такъв въпрос:
В горния пример примерите (3 снимки) на изображението се показват затворени. И в изтеглената версия на LightBox-2.7.1, тази функция не работи. Когато разглеждате последното изображение, бутонът не се появява.
Кажи ми, моля, какво може да бъде причината?

11/14/2015 Антон

11/15/2015 Антон
На iOS и Android потъмняване на екрана не на цялата страница !!! Какво може да бъде проблемът. В обичайната Likebox - всичко е наред!

03/30/2016 Антон
Здравейте!
Възможно ли е да го направите така, че картината да е отворена в по-голяма резолюция?

11/18/2016 Юра
Благодаря много! Всичко работи перфектно!

05/04/2017 Игор
Благодаря ви много за скрипта! Много отдавна търсех нещо подобно и лесно инсталирано.
Само по някаква причина имам неразбираеми надписи на снимките. · Рѕр ± сЂР ° · 8

Може би някъде трябва да фиксирате кодирането?

09/12/2017 Barsuk.
Къде беше преди! Прекарах целия ден, за да затегтя премахването на двойното))

Аз просто, на главната страница, прегледът на главния образ на главната страница и тя е на дъното, има още по-малко от преобладаването на допълнително, поради това, дубликите и в галерията.

LightBox е малка JavaScript библиотека, която се използва за показване на големи изображения в горната част на текущата страница. Лесно се инсталира и работи във всички съвременни браузъри.

Скриптът ви позволява да показвате изображения като единични и превключване в изскачащия прозорец.

Инструкции за употреба.

Част I: Библиотечна връзка.

1. Изтеглете и разопаковайте архива с скрипт от тук

2. В папката JS намерете файловете jquery-1.10.2.min.js. и lightbox-2.6.min.js. И ги копирайте в папката с вашите скриптове на вашия сайт.

3. Свържете тези скриптове към страницата си между маркерите Следните редове:

4. В папката CSS намерете файла LightBox.css и го копирайте в папката с файловете със стил.

5. Свържете този файл с правописа на страницата между маркерите. Следните редове:

6. От папката img копирайте себе си на сървъра в папката с изображения на дизайна на сайта си след следните файлове: и Next.png.. Тези файлове се използват в стил стил. lightbox.css.. По подразбиране файлът стилове се харесва на снимките, които са разположени в папката IMG, която има CSS папка на същия родител. Ако имате папка с изображения и стилове на папки са в напълно различни папки, трябва да промените пътеките към снимките в файла LightBox.css на подходящия.

Част II: Поставяне на снимки на страницата.

Този скрипт се задейства, за да кликнете върху връзката. Връзката може да бъде като текста така и картината. За да зададете скрипта коя връзка трябва да бъде обработена, трябва да добавите атрибут към връзката. data-LightBox. И да го регистрират всяка стойност.

Единични снимки.

LINK Текст 1 връзка Текст 2 Връзки 3

* Атрибутът за заглавие може да се попълни по желание. Ако е запълнено, тогава съдържанието му ще бъде показано под изскачаща картина.

Група снимки.

Да предположим, че имате група от изображения и когато кликнете върху една от връзките, искате в изскачащ прозорец, можете да преминете през всички снимки на тази група, без да се налага да затваряте изскачащия прозорец.

LINK Текст 1 връзка Текст 2 Връзки 3

* Преди това, за скрипта на LiteBox сте използвали rel \u003d "lightbox" атрибут, който можете да го използвате и ще работи, но използването на нови атрибути е за предпочитане, тъй като дава повече възможности.

Изглежда, че всичко трябва да работи, но:

Ако формирате група от снимки от изображенията, след това, когато гледате в прозореца за изскачане, снимките показват "Изображение 1 от 8"? И бих искал да видя нещо подобно "Изображение 1 от 8".

За да направите това, в лакчето-2.6.min.js файл в ред 13 трябва да замени това:

връщане "image" + b + "of" + c

връщане "image" + b + "от" + c

Когато използвах този скрипт за последен път, трябваше да го използвам заедно с поръсенето на въртележката, така че забелязах един бъг.

По-долу е описание на грешката и начина, по който да го поправите.

Ако имаме на страницата има 2 различни групи изображения и например, в първата група, снимките имат подпис (изпълнен със заглавен атрибут), а във втората група атрибутът на заглавието има празни стойности или не са регистрирани В крайна сметка, след това, когато гледате снимки без описание (видяхме поне една снимка с описанието), ние все още ще изтеглим описанието на последната видяна картина. Това означава, че скриптът отказва да почисти заглавието за изскачащ прозорец, той го заменя с нова, ако е налична. Как да го поправите?

За да коригирате грешката, без да почиствате атрибута за заглавието, в файла с lightbox-2.6.min.js в ред 219 замени текста:

ако (typeof this.album.title! \u003d\u003d "undefined" amp; amp; amp; amp; amp; amp; this.album.title! \u003d\u003d "") (това. $ lightbox.find (". lb-caption ") .html (this.album.title) .fadein (" fast "))

ако (typeof this. Албум [това. Tructimageindex]. Заглавие! \u003d\u003d "undefined" & amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; ; усилвател; усилвател; amp; това. Албум [това. Trangulimpdex]. Заглавие! \u003d\u003d "") (това. $ lightbox. Намерете (".lb-caption"). HTML (това. Албум [това). , ТоплоИндекс]. Заглавие). FADEIN ("FAST"))

Най-популярната библиотека е LightBox JavaScript, който използваме в продължение на много години на настолни компютри, но не и на мобилни платформи.

Давам ви печелите 14 леки кутии с поддръжка за мобилни платформи.

Photoswipe.

Photoswipe - лесно, с докосване, и най-важният модулен плъгин, който ви позволява да премахнете ненужните части, които не са необходими. Работи добре в мобилните браузъри. Можете да промените изображенията, като преместите пръста си, сякаш това е стандартно приложение, с плавни преходи.

Необходимите библиотеки: не.
Поддръжка на браузъра: IE8 +, Chrome, Firefox, Safari, Opera и други мобилни браузъри.
Разрешително: MIT лиценз

Магиант изскачащ изскачащ.

Magniance Popup - е друг плъгин, проектиран от същия автор като Photoswipe, Dmitry Semenovyv. Приставката идва в приставката JQuery / Zepto, а също така включва поддръжка, която липсва в Photoswipe, като например: видео поддръжка, карти и AJAX. Това е отлична алтернатива за тези, които предпочитат да имат повече възможности.

Необходимите библиотеки: Jquery 1.9.1+ или zepto.js
Поддръжка на браузъра: IE7 (частично) ,.
Разрешително: MIT лиценз

Swipipebox.

Swipebox jquery плъгин с подкрепа за сетивни жестове за мобилни платформи. Той също така поддържа видео от YouTube и Vimeo, в допълнение към изображенията. Swipebox е лесен за инсталиране и има няколко опции за конфигуриране на нейната настройка. Мисля, че SwipeBox е твърде нарязан плъгин за осветление за тези, които нямат JavaScript.

LightBox за bootstrap.

Първоначално плъгинът Likebox липсва в Bootstrap. LightBox за Bootstrap го коригира. Ако използвате Bootstrap, силно се препоръчва да използвате тази библиотека. Приставката е добре интегрирана с bootstrap.

Необходимите библиотеки: Модул JQuery и Bootstrap
Поддръжка на браузъра: IE8 +, Chrome, Firefox, Safari и Opera
Разрешително: GNU лиценз

NIVO LightBox.

Nivo LightBox е гъвкав плъгин ListBox. Разнообразие от опции ви позволяват да промените външния вид. Например: тема, анимация на външен вид и навигационен тип.

Необходимите библиотеки: Jquery.
Поддръжка на браузъра:
Разрешително: MIT лиценз

Изображение.

OimeLightBox прост плъгин на осветление без раздробяване. Използва се само за изображението, следователно името. Поддържат се нито видео, нито други видове. Той също така не изисква допълнителна HTML маркировка; Tag. Това е достатъчно. Този плъгин е лесен за работа.

Необходимите библиотеки: Jquery.
Поддръжка на браузъра: IE9 +, хром, Firefox, Safari и Opera
Разрешително: Неуточнен

Мини лайтбокс

Друг приставкване без допълнения. Библиотеката тежи само 2 килобайта и работи само с изображения. Това е идеалният плъгин, ако се развивате само за най-новата версия на браузъра и няма нужда да поддържате видео или други формати.

Необходимите библиотеки: не
Поддръжка на браузъра: Internet Explorer 10 +, Chrome, Firefox, Safari и Opera
Разрешително: MIT лиценз

Лек.

Lightcy красив приставка за ListBox. Поддържа няколко анимационни вида, като например: избледняване, еластично, увеличаване и превъртане. В допълнение, той също така поддържа различни видове медии, включително вграждане на YML видео, SWF и входни форми.

Необходимите библиотеки: Jquery.
Поддръжка на браузъра: IE9 +, хром, Firefox, Safari и Opera
Разрешително: GPL лиценз

Перо.

Основен плъгин на перо, 6 килобайт за безпроблемни разработчици и включва само най-необходимите. Ако имате нужда от ефект на ListBox, например за група изображения в галерията, можете да активирате разширяването на галерията. Можете също така да развиете собствено разширение за приставката да се използва във вашите проекти.

Необходимите библиотеки: Jquery.
Поддръжка на браузъра: IE8 +, Chrome, Firefox, Safari и Opera
Разрешително: MIT лиценз

Lightlayer.

Lightlayer лесен за използване плъгин ListBox. Приставката поддържа много опции, потребителски JavaScript методи и потребителски събития. Приставката работи с изображения, видео, карти.

Необходимите библиотеки: Jquery.
Поддръжка на браузъра: IE9 +, хром, Firefox, Safari и Opera
Разрешително: MIT лиценз

LightGallery.

LightGallery, друг плъгин като голям брой функции. Тя включва повече от 20 опции за конфигуриране на различни ефекти на осветление.

Необходимите библиотеки: Jquery.
Поддръжка на браузъра: IE7 +, Chrome, Firefox, Safari, Opera, IOS, Android и Windows Phone
Разрешително: MIT лиценз

FluidBox.

FluidBox LikeBox щепсела работи с изображения. Включва поддръжка за различен дисплей, включително плаващо изображение, изображение от абсолютна позиция, изображения с граници и депозити и галерии. Има и плъгин на WordPress.

Необходимите библиотеки: Jquery.
Поддръжка на браузъра: IE9 +, Chrome, Firefox, Safari, Opera
Разрешително: MIT лиценз

Stripjs.

Stribjs уникален плъгин на ListBox. Вместо да налагат изображение, модулът ListBox се плъзга заедно с изображението от едната към другата страна, така че изображението няма да блокира цялото съдържание. Stripjs поддържа изображения и видео.

Необходимите библиотеки: Jquery.
Поддръжка на браузъра: IE7 +, Chrome, Firefox, Safari, Opera, IOS 5+ и Android 3 +
Разрешително: Creative Commons By-NC-ND 3.0 лиценз

Наистина е чудесно, че имаме достъп до все повече и повече нови уеб технологии, с помощта на която ще бъде нашата работа много по-лесна. Modal Windows - функционален елемент за показване на какъвто и да е вид html - фокусиран върху създаването на удобен дизайн и интерфейс.

В този преглед сме събрали списък на библиотеките и скриптовете, за да създадем LightBox, която ще помогне на разработчиците и дизайнерите да създават още по-добри и професионални уебсайтове.

Можете лесно да добавите скриптовете по-долу на сайта си. Следователно, без допълнителни предговор, нека да отидем на темата и да помислим тези супер jquery-boblisters на listbox, които можете да попълните арсенала си.

1. Photoswipe.

Photoswipe е HTML фото галерия на базата на CSS и JavaScript, ориентиран специално на мобилни устройства. Авторите в неговото развитие взеха като примерни услугите за гледане на изображения за iOS и Google Mobile устройства. Photoswipe има познат и интуитивен интерфейс, което улеснява работата с изображения на мобилния сайт.

Поддържат се всички основни функции: преминете към следващия или предишен образ, увеличаване, плъзгане, намаляване или затваряне и други.

2. SwipipeBox.

SwipeBox - JQuery -Plagin за стационарни компютри, смартфони и таблети. Той поддържа сензорно управление за мобилни устройства, навигиране на клавиатурата за настолни устройства, CSS преходи с резервно превключване към JQuery Control е доста лесен за конфигуриране.

Приставката е тествана върху хром, сафари, Firefox, Opera, Internet Explorer 8 +, IOS4 +, Android, Windows Phone. Произведени по лиценза на МИТ.

3. IlightBox.

ilightbox улеснява създаването на много красиви адаптивни модални прозорци с помощта на JQuery. Комбинирането на поддръжката на широк спектър от медийно съдържание с великолепни кожи и удобен API, ILightBox се стреми да направи възможно най-доброто поле. Ilightbox осигурява възможност за преглед в режим на цял екран, ретината-Клокирани кожи, управление на допир, YouTube и Vimeo интеграция на опцията за HTML5, мощен JavaScript API. Приставката има безплатна поддръжка и актуализиране на версии.

4. Image LightBox.

Image LightBox е минималистичен, разширим и персонализиран плъгин под iOS, Android и Windows телефон. Можете просто да изтеглите следното изображение с помощта на клавиатурата, благодарение на използването на CSS трансформации и преходи.

5. Увеличава се.

Magniance Popup е безплатен адаптивен плъгин JQuery, който е фокусиран върху осигуряването на най-доброто взаимодействие между потребителя и устройството. За повечето LightBox -плагини трябва да определите размера на прозореца с помощта на JS. В обимененото изскачане можете да използвате относителни единици на мярката, като EM или да промените размера на LightBox, като използвате CSS медийни заявки.

6. NIVO LightBox.

Nivo LightBox е гъвкава светлина -плагин. Предлагат се различни опции за избор, от които лесно можете да промените външния вид на LightBox. Например, променете темата, ефекта на прехода и навигационния метод.

7. Lightcase.

Lightcase е гъвкава, адаптивна и разширяващаема светлина-плагин, проектирана с jquery. Той работи чудесно във всички популярни браузъри, като например Internet Explorer 7+, Firefox, Opera, Webkit и др. Приставката поддържа снимка, видео, HTML5-Video, Iframe, SWF и AJAX.

8. Lightlayer.js.

LightLayer е скрипт за извеждане на адаптивна осветление, тя работи добре с други компоненти на всеки екран. Този скрипт е много лесен за използване. LightLayer осигурява контрол върху набора от параметри: цветът и непрозрачността на фона, позицията LightBox, отваряне / затваряне на преходите и много други персонализирани функции.

9. Strip.js.

Лентата е LightBox, която се разгръща само в част от страницата. Това го прави по-малко обсесивен и ви позволява да взаимодействате с други елементи на страницата на големи екрани; На LightBox мобилни устройства имат класически вид. Лентата използва jquery и се поддържа във всички големи браузъри.

10. FluidBox.

FluidBox е JQuery плъгин, предназначен да внедри ненатрапчиво, адаптивно осветление, което е идеално за изображения с голяма резолюция. Работи чудесно на мобилни устройства и може да се използва и на екрана с по-висока резолюция за красив изход на изображението.

11. Перо.

Featherlight е много лек плъгин в 400 javascript линии, 100 css редове и по-малко от 6kb. Интелигентно, адаптивно осветление, поддържане на изображения, Ajax и Iframe. Можете също така да го адаптирате към задачите си. Featherlight работи в IE8 +, всички модерни браузъри и мобилни платформи.

12. Ялб.

Ялб е декриптиран като още една светлина (още една светлина) - но не е така. Yalb идва с голям набор от интерфейси, включително потребителски събития, които позволяват да определи състоянието му ( отворен, затворен).