- Чулан *
Відразу до справи – замовник незабаром почне писати гнівні листи, а над фотогалереєю ти ще навіть не починав працювати! Причому потрібно зробити галерею з автоматизованим створеннямпревьюшек, коментарями, сортуванням фото та красивими модальними вікнами:
Отже, у нас попереду купа роботи – проектування БД, створення адмінки та користувальницької частини. Розберемо найпростіший приклад – у нас просто має бути сторінка з фотогалереєю, без розбивки на категорії та посторінкового прокручування, все це легко додається потім. Категорії додаються за допомогою додаткового поляу таблиці з фотками, таблиці з категоріями та кількома рядками коду, а про посторінковий висновокз БД і так написана купа статей, на тому ж Хабре.
Почнемо спочатку – з бази даних, MySQL. Нам потрібна таблиця із фотками. Потрібні поля: id фото, посилання на велике зображення, посилання на прев'ю, коментар до фото та порядкова позиція фото. Ось скріншот з phpMyAdmin та sql-код:
CREATE TABLE `photos` (`id` int(5) NOT NULL auto_increment, `comment` text NOT NULL, `big` varchar(30) NOT NULL, `small` varchar(30) NOT NULL, `ord` int(5 ) NOT NULL default "999", PRIMARY KEY (`id`)) ENGINE=MyISAM DEFAULT CHARSET=cp1251 AUTO_INCREMENT=157 ;
Перепрошую за windows-1251, я не розпалюю міжнаціональну ворожнечу, не використовуючи Юнікод, але у мене проблеми з UTF на локальному сервері(так-так, з руками проблеми)).
Відмінно, тепер трохи про файли і структуру каталогів, що використовуються. Для реалізації клієнтських скриптів використовується jQuery з плагінами jCrop для створення мініатюр та fancybox для показу красивих модальних віконта галереї. Ось дерево каталогів:
У папці js – файли jQuery та jCrop, у папці admin файли photos.php та photo_add.php. У першому у нас базова формадля завантаження фото, редагування каталогу фоток та зміна порядку, ось як це виглядає:
Код не наводжу, там все просто, вихідники отримаєте унизу сторінки
У файлі photo_add.php ми працюємо jCrop для створення мініатюр, який пересилає параметри мініатюри невеликому скрипту на php.
Ось код скрипта, що створює мініатюру:
if (isset($_POST["t"])) ( $targ_w = $targ_h = 100; $jpeg_quality = 95; $src = "../upload/($_POST["t"])b.jpg"; $img_r = imagecreatefromjpeg($src), $dst_r = ImageCreateTrueColor($targ_w, $targ_h); targ_w,$targ_h,$_POST["w"],$_POST["h"]); imagejpeg($dst_r," ; header("Location:photos.php?ok=ok"); exit; )
Фотографії завантажуються в папку upload, переконайтеся, що вона має права на запис.
За порядок фото відповідає поле `ord` у БД, за умовчанням воно дорівнює 999 всім фоток. Змінюючи це значення, можна встановити будь-який порядок для фото. Також можна зробити приємний Drag'n drop інтерфейсдля зміни порядку фото, але тоді ми не вкладемося за годину:)
Тепер перейдемо до файлу gallery.php в корені нашого проекту, він відповідає за виведення нашої красивої галереї:
У head необхідно підключити скрипти jqueryі fancybox, а також ініціювати галерею:
$(document).ready(function() ( $("a.gallery").fancybox(( "transitionIn" : "elastic", "transitionOut" : "elastic", "speedIn" : 600, "speedOut" : 200) , " overlayShow " : true )); ));
А ось сам код виведення наших фоток:
