Фотогалерия Автоматичен монтаж на изображения с jQuery с LightBox

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

Тук можете да видите по-сложна версия на тази галерия: http://photo.harrix.org/.

Автоматичният монтаж на изображения с jQuery галерия е забележителен с това, че автоматично запълва хоризонтално целия слой във всички "редове" на снимките. В същото време е адаптивен, тоест автоматично се настройва към размера на слоя.

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

Статията последователно ще говори за завинтването на лайтбокса на TosRU. Крайната версия ще се различава от това, което е в демото, тъй като има допълнително оформление, текст преди зареждане на всички снимки. Но можете да видите това, като погледнете изходния текст на демонстрацията.

Съдържание

Подготовка

Изтеглете от страницата на галерията или от тук:

Разопаковайте архива и отворете index.html.

Изтеглете приставката Lightbox тук или тук:

Разопаковаме, но все още не пипаме.

Редактиране на файла index.html на галерията

Нека първо премахнем заглавката и слоевете със съдържание. Ако искате, можете да си тръгнете, но за мен те са излишни тук.

Връзка към по-големи версии на рисунките на вашите снимки в слоя am-container.

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

В резултат на това:

получих това:

След слоя am-container има връзка на javascript библиотеки и предписване на поведението на тази галерия: