Сайтостроительство (8)

PHP-кодинг (25)

Веб-дизайн (9)

DHTML/JavaScript (8)

Подкастинг (1)

Безопасность в PHP (3)

Секретный раздел

Карта блога

Регистрация пользователей на PHP+MySQL

Скрипт гостевой книги с красивым дизайном

Галерея на jQuery

Простая система регистрации пользователей на сессиях

Форма обратной связи с защитой типа капча

Галерея на php+jquery

Шаблоны запросов и placeholders

Быстрое перенаправление средствами php

Flash плеер для вашего сайта

Сортировка столбцов в таблице на php+mysql

Вертикальное меню в виде закладок

История развития Всемирной паутины

Перенос длинных строк в комментариях

Добавляем списки выбора в форму регистрации

WEB 2.0 HTML-шаблоны

За весь период

За 2010-11

За 2009-06

За 2009-05

За 2009-04

За 2009-03

За 2009-02

За 2008-08

Бегун контекстная реклама

Ruseller видеоуроки

Letitbit файлообменник

Tak.Ru $$$ вебмастеру

WMmail почтовые рассылки

WMlink продажа трафика

Sape.Ru продажа ссылок

Главная » PHP-кодинг

Галерея на php+jquery

Демо-версия фотогалереи на php+jquery

Скачать исходники фотогалереи на php+jquery

Для работы этой галереи нам потребуется подключить скрипты и CSS-стили, прописав следующий код между тегами <head> вашего html-документа или php-скрипта:


<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iload.js"></script>

Пути к скриптам лучше прописать абсолютные, т.е. полные. В данном случае исполняемый скрипт будет находиться в том же каталоге, что и скрипты.

В файле iload.js указаны все настройки для отображения изображений и навигационной графики этой галереи. В частности в параметре var loadSource указывается путь в папку с картинками для навигационной графики.

Создайте папку image и загрузите эти картинки в папку с js-скриптами этой галереи.

Теперь напишем небольшой php-скрипт для вывода изображений из указанного в скрипте каталога с вашими фотографиями. Поэтому для начала создайте на вашем сайте каталог для их хранения и загрузите несколько однотипных (по размеру) фотографий.

Откройте файл, где мы подключали все необходимые для работы скрипты и вставьте в него следующий php-код:


<?
$d = dir('gal/'); //указываем директорию с файлами изображений
$i = 0; //обнуляем счетчик текущей позиции изображения
$e = $_GET['e']; //извлекаем переменную для хранения имени файла
	while(false !== ($e = $d->read()))//цикл чтения директории
	{
		//определяем условие для считывания файлов с подстановкой расширения *jpg
		if(strpos($e,'.jpg'))
		{
			++$i; //увеличиваем счетчик текущей позации файла на единичку
			//вывод изображений-ссылок
			echo '<div class="thumbnail">
			<a class="gallery" href="gal/'.$e.'" rel="iload::fields" title="">
			<img src="gal/'.$e.'" alt="Photo" width="120" height="150" /></a>
			</div>'.chr(10);
			//если 6 изображений, то делаем перенос на следующую строчку
			if(!($i%6)) echo '<br />';
		}
	}
?>

Работа основана на циклическом считывании файлов в указанной директории (gal/). Имя файла храниться в переменной $e с указанным расширением (*jpg). В данном варианте все фотографии должны быть пронумерованы, т.е. в качестве имени файла используется цифра (от 1...N) + расширение (.jpg). Каждая фотография выводиться в блоке thumbnail, стиль которого описан в файле style.css, поэтому можете его изменить и настроить по своему вкусу. На каждую выводимую картинку формируется ссылка для открытия её в полноразмерном варианте, для этого в атрибуте ссылки указывается параметр rel="iload::fields". Настройка эффектов для показываемых изображений осуществляется с помощью подключаемой библиотеки iload.js. Описание для картинок указывается в параметре title ссылки.

Также не забудьте указать для уменьшенных изображений необходимые значения атрибутов alt(описание), width(ширина) и height(высота).

Если число изображений, выводимых в строчку оказалось 6шт, то делаем перенос на следующую строчку путем вставки тэга переноса строки <br />.

Галерея готова! Пользуйтесь =)

Комментировать

Автор: admin | Добавлена: 31.05.2009 | Просмотров: 21560
Рейтинг: 58 | Голосов: 12

Оцените заметку: 1 2 3 4 5

Последние обновления в категории: PHP-кодинг

Комментарии (0)

Комментариев пока нет!

Только авторизованные пользователи могут добавлять комментарии. Зарегистрироваться.

Логин:
Пароль:
 

Регистрация

: Тема:

Заметок в базе: 56
Комментариев: 0
Всего юзеров: 114
Сейчас онлайн: 1