Този урок ще ви покаже как да създадете галерията, което от своя страна ще намерите снимки в една папка и да ги отпечатате с помощта на лайтбоксът.
Първата стъпка е създаването гръбнакът на нашата галерия:
Идеята е много проста - PHP скрипт ще сканира папки за изображения. След това изображението с CSS JQuery ще се превърне в красива галерия. Използването на такъв галерия е много лесно - просто да изтеглите само изображенията в папка и резултатът е видим веднага на страницата.
Сканиране на файлове и папки, не липсват файлове с изображения, сме натрупали XHTML код за всяко изображение. Код (линии 28-39) се състои от контейнер със снимка клас (а в някои случаи nomargin). Чрез използването на атрибута стил ние се фоновото изображение във вид на нашия имидж. Ние позиционирате изображението в центъра, с помощта на 50% до 50%. По този начин изображението се подравнява както хоризонтално, така и вертикално. Ако изображението е по-голям от блока, ние виждаме само централната част (частта, която се поставя в контейнер). По този начин, ние правим красиви миниатюри (без да е необходимо намаляване на изображението).
Това работи добре с "не-тежки" изображения. Опитайте се да не се зареди дадена папка 10-мегапикселови снимки :).
Може би се чудите за nomargin клас. Защо имаме нужда от него? Всяко изображение в галерията има право и долното поле. Това означава, че последният елемент на всеки ред не може да изравни в дясната част на заглавната част на блок. Тя изглежда непрофесионално. Ето защо, ние определи специален клас, който премахва дясното поле на последния елемент в серията. В резултат на това ние получи хубав резултат.
Сега, нека да организира малко:
За да работи правилно, трябва да се свържете рамка капачка документ, каскадни стилове и vspomogayuschie скриптове:
Малко повече магия:
Тогава ние просто свържете няколко изображения за правилното функциониране на лайтбоксът.
Нашата галерия е готов! Харесва ми. )
Оказва файловете не са показани, защото имаше пропуски в техните имена. И още скоби също не е позволено да премине в галерията. Превод обратно към Unicode :) ZY. Как да се превърне в руски и не разбирам.
Кой знае принципа на това, което се сортира снимка? Трябва да имате снимки в определен ред. Ако знаете, за да хвърлят [email protected]
Yakscho Образите на великия rozmіru potrіbno zamіniti
Здравейте Аз се опитвам да се интегрират своята галерия в Yii Fraimwork. Но заключението не е по-голям, но празните пространства. В изходния код на изображението на страницата са предписани, но те не са тук. Ако знаете, какво не е наред след това да ми каже какво не е наред. Бихте искали да прикачвате кода, но вашия сайт, не го направя, мога да изпратя имейл на
Никой още не е решен проблемът с големи изображения. (Когато отворите още снимки, те се изкачва извън бокса и светлина poyavlyayutsya плъзгач) Няма начин да съхранявате изображение в екрана. например нещо като: ширина: 90%; височина: 90%.
До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!
Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!
Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.
Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!
Свързани статии