- Подробности
-
Категория: PHP. Графика
Представим, что вам нужно сделать страницу, на которой будут выводиться ваши последние работы. Очевидный способ — встроить изображения в код вашего документа. Явное последствие такого решения — каждый раз, когда нужно будет добавить новый пункт, вам придется вручную обновлять ваш HTML документ. Другой способ — хранить данные в базе MySQL и выводить их с помощью скрипта. Такой способ значительно лучше, но для многих сайтов он потребует использования гораздо больших мощностей от сайта, чем действительно нужно, не будем забывать также и о стоимости хостинга.
demosourse
В таком случае лучшим решением будет создание сканера на PHP, который будет просматривать вашу папку с портфолио и динамически создавать код для страницы. Если нужно добавить новое изображение, то все что нужно — просто скопировать изображение и его миниатюру в соответствующие папки — все остальное сделает PHP!
Наша цель
Коротко обозначим, чего мы хотим добиться:
Используем PHP для сканирования папки портфолио. Затем организуем цикл по списку файлов и каждое изображение выводим на страницу.
Стили для содержимого будут задаваться в CSS.
Когда пользователь нажимает на миниатюре, используем jQuery для загрузки большого изображения на основную панель.
Если пользователь деактивировал Javascript, просто направлем его на новую страницу, которая содержит полноразмерное изображение
Как использовать
Добавление нового изображения в портфоли — очень простой процесс. Берем снимок веб сайта, брошюры, картинки и т.д, и изменяем его размер до значений 500px x 350px. Размещаем изображение в папку “images/featured”.
Затем, создаем миниатюру размером 50px x 50px. Помещаем ее в папку “images/tn”.
01 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
IE6 Problem
Нужно подправить один момент. Если вы посмотрите на изображение сверху, то увидите, что неупорядоченный список #options не включает свои плавающие пункты. В новых браузерах все исправляется с помощью свойства “overflow: hidden;”, но IE6 требует дополнительных действий. Нужно добавить следующее свойство.
1 ul#options {
2 …прочие свойства…
3 height: 1%;
4 }
Код скрипта Javascript(jQuery)
01 $(function() {
02 $.preloadImage = function(path) {
03 $("#featured img").attr("src", path);
04 }
05
06 $('ul#options li img').click(function() {
07 $('ul li img').removeClass('selected');
08 $(this).addClass('selected');
09
10 var imageName = $(this).attr('alt');
11
12 $.preloadImage('images/featured/' + imageName);
13
14 var chopped = imageName.split('.');
15 $('#featured h2').remove();
16 $('#featured')
17 .prepend('<h2>' + chopped[0] + '</h2>')
18 .children('h2')
19 .fadeIn(500)
20 .fadeTo(200, .6);
21 });
22
23 $('ul#options li a').click(function() {
24 return false;
25 });
26 });
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: net.tutsplus.com/articles/news/scanning-folders-with-php/
Перевел: Сергей Фастунов
