http://sulfurzona.ru/
News
Service
Magazine
Software (Battle City Game, Wallpaper manager, Superpad, VG-NOW, Puzzle Game, Netler Internet Browser, ..)
Wing-Thunder Game (fly simulator)
Dune Game (Dune III, Dune IV, Cheats, Forum, ..)
Games free
Turbo Pascal (Assembler, Docs, Sources, Debbugers, ..)
Books (Docs for developers)
Guest book
Компьютерная диагностика двигателя автомобиля (адаптер К-линии)Компьютерная диагностика двигателя автомобиля (адаптер К-линии)
 
 
Скачать игру Крыло-Гром (Wing-Thunder) бесплатно
 
 

PHP и WEB для новичков: фотогалереи

 
Автор: Владислав Демьянишин
 
PHP и WEB для новичковДобрий день!
Я передплачую ваш журнал не дуже довго, але у мене вже з'явилась пропозицуя. Я надуюся що Ви яя виконайте.
Будь ласка розкажуть по детальнуше про веб-дизайн у його всу секрети. Якщо можна на прикладу вашого сайта. Буду дуже вдячний!
Влад крошенко
 
Предполагается, что читатель уже знаком с HTML и JavaScript. Без знаний этих языков усвоение дальнейшего материала будет затруднительным.
 

Библиотека Highslide JS

 
Данная библиотека (http://highslide.com) предоставляет обширные возможности по созданию на сайте всплывающих окон текстовых сообщений, предпросмотра картинок и даже целых галерей со встроенным слайд-шоу. Модули данной библиотеки успешно работают в различных браузерах, таких как FireFox, Chrome, Opera, Internet Explorer.
Хочу рассказать об этой библиотеке детально, рассматривая каждый ее модуль отдельно, хотя все они вместе могут применяться одновременно на одной веб-странице.
Сайт с описанием возможностей библиотеки и примерами на русском языке находится по адресу www.evgeniypopov.ru/index.php?/Knowledgebase/Article/View/124/0/highslide. Если такой страницы не найдете, то воспользуйтесь поиском на данном сайте и попытайтесь найти по слову “highslide”. Архив библиотеки имеет размер 1,8 Мб и доступен по адресу http://evgeniypopov.com/files/34/high44.zip.
 

Всплывающее окно (Popup)

 
Всплывающее окно может пригодиться для выдачи посетителю сайта какого-то сообщения или подсказки. Чтобы обеспечить работу библиотеки, следует в заголовочной части веб-страницы в теге HEAD указать ссылку на подключаемый модуль highslide-with-html.js и стили, необходимые для его работы:
 
<script type="text/javascript" src="highslide/highslide-with-html.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
 
При этом, предполагается, что вся сборка используемых библиотек и ее компонентов лежит на сервере в папке highslide. Далее в этом же теге выполняем начальную инициализацию параметров модуля:
 
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
</script>
 
Здесь мы обязательно указываем параметр hs.graphicsDir, можем поиграться с параметром hs.outlineType, предустановленные стили для которого можно найти в файле highslide.css (такие как rounded-white и glossy-dark, а можно создать и свои). В таком стиле можно настроить фоновый рисунок окна и прочее.
 
Для параметра hs.wrapperClassName предусмотрены классы draggable-header, titlebar, no-footer, wide-border, borderless, outer-glow, colored-border, dark, floating-caption, controls-in-heading.
 
Ну вот, наш модуль настроен, теперь можем верстать само тело веб-страницы. Т.е. закрываем тег HEAD и открываем тег BODY.
 
<a href="index.htm" onclick="return hs.htmlExpand(this)">Показать окно</a>
<div class="highslide-maincontent">
<h3>Заголовок</h3>
Текст текст текст текст текст текст
</div>
 
Как видно из данного примера, вся конструкция сводится к созданию ссылки на совершенно произвольный адрес, главное – чтобы у ссылки был обработчик клика с вызовом метода hs.htmlExpand(this) глобального объекта библиотеки.
 
После ссылки обязательно должен следовать тег DIV с указанием класса highslide-maincontent. А уже внутри него веб-мастер может насладиться всеми доступными средствами разметки HTML. В результате получим такое простенькое симпатичное окошко (рис. 1), где и закругленная рамка с градиентом, и тащить его можно за заголовок, и кнопка закрытия есть, и даже в правом нижнем углу есть треугольник растягивания окна. Вот! ;)
 
Советы по WEB-разработке: фотогалереи
Рис. 1
 
Но что это?! В заголовке окна мы видим текст “Powered by Highslide JS”, который является ссылкой на сайт разработчика библиотеки. При желании это можно убрать, указав в начальной инициализации дополнительный код:
 
hs.creditsHref = '#" onclick="return false';
hs.lang.creditsTitle = '';
hs.lang.creditsText = '';
 
А если вас не устраивает размер окна по умолчанию, то вы можете его размеры настроить такими строками в начальной инициализации:
 
hs.width = 500;
hs.height = 400;
 
Но как-то глупо получается, заголовок окна теперь пустует. Это дело поправимое, достаточно в обработчик onclick ссылки добавить перед вызовом метода return hs.htmlExpand(this) код, который вместо заголовка окна со ссылкой на сайт разработчика подставит наш заголовок с любым стилем, указанным явно, или косвенно через класс.
 
Еще для наглядности я добавил в пример отображение картинки в нашем всплывающем окне. Тогда код получится такой:
 
<a href="index.htm" onclick="hs.lang.creditsText='<div style='font-size: 16px; font-weight: bold'>Заголовок окна</div>';return hs.htmlExpand(this)">Показать окно</a>
<div class="highslide-maincontent">
<h3>Заголовок</h3>
<img src="comput.png" align="left" width="150" hspace="10" vspace="5">Текст текст текст текст текст текст
</div>
 
и окно у нас получится уже таким (рис. 2).
 
Советы по WEB-разработке: фотогалереи
Рис. 2
 
Замечу, что такое окно нельзя отобразить в произвольных координатах, поскольку оно привязано к определенному объекту с классом highslide-maincontent. Поэтому отображение окна происходит относительно этого объекта.
 
Следовательно, можно генерировать такие окна заблаговременно для тех объектов, на которых должна быть предусмотрена такая реакция, как показ всплывающего окна. А для этого, как видно из примера, нужно совсем не много.
 

Просмотр фото (Preview)

 
Любой сайт – это, прежде всего, контент, текстовое наполнение. Практически любой текст, для наглядности, да и просто для красоты или чтобы притягивало (цепляло) взгляд посетителя, дополняется иллюстрациями.
 
И если иллюстрация имеет большое разрешение, то отображается она на веб-странице в уменьшенном виде. Но иногда такая иллюстрация имеет важное значение и возникает необходимость дать посетителю возможность увидеть ее в укрупненном виде.
 
Для этого и существует просмотровое окно для фото. Как правило, оно появляется при клике на иллюстрации, и разворачивает иллюстрацию на всю ее величину в пределах окна браузера. Такие возможности нам предоставляет библиотека highslide:
 
<html>
<head>
<script type="text/javascript" src="highslide/highslide.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
 
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'rounded-white';
</script>
</head>
 
<body>
<a id="thumb1" href="images/pic_big.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="images/pic_small.jpg" height="120" width="107"></a>
 
<div class="highslide-caption">Пример 12345</div>
</body>
</html>
 
В примере видно, что, на сей раз, мы подключаем модуль highslide.js. Далее проводим начальную инициализацию модуля. Затем уже внутри тега BODY формируется конструкция из ссылки, а в ней заключена картинка, для которой следует показывать окно просмотра.
 
Для ссылки должен быть задан идентификатор, название которого не имеет значения, например, так id="thumb1", а также указан специальный класс class="highslide" и обработчик события onclick="return hs.expand(this)".
 
Советы по WEB-разработке: фотогалереи
Рис. 3
 
Для изображения нет никаких ограничений ни на свойства, ни на стили. Вслед за ссылкой может следовать, а может и нет, тег DIV с классом highslide-caption, устанавливающий подпись к картинке.
 
В результате получаем веб-страницу с картинкой, при клике на которую эта картинка как бы увеличивается и превращается в целое окно с этой увеличенной картинкой и ее подписью (рис. 3). Очень эффектно и внушает уважение к сайту.
 

Фото-галерея (Gallery)

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

Галерея открытая

 
Открытая галерея, это когда на веб-странице видны сразу все картинки, участвующие в галерее. В коде как обычно указываем модуль highslide-with-gallery.js, который используем. Далее проводим инициализацию – для слайд-шоу она более обширная:
 
<html>
<head>
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
 
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'controls-in-heading';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;
 
// Добавляем панель управления
if (hs.addSlideshow) hs.addSlideshow({
 interval: 5000,
 repeat: false,
 useControls: true,
 fixedControls: false,
 overlayOptions: {
 opacity: 1,
 position: 'top right',
 hideOnMouseOut: false
} });
</script>
</head>
 
где hs.align задает выравнивание окна просмотра галереи, hs.transitions определяет визуальный переход при появлении окна, hs.wrapperClassName определяет метод формирования интерфейса окна, hs.fadeInOut включает эффект FadeIn/FadeOut при появлении/исчезновении окна, параметр hs.dimmingOpacity можно не указывать (в примере он закомментирован и поэтому неактивен), но если указать для него дробное значение, то при появлении окна галереи вся веб-страница под слоем окна будет затемнена.
 
Далее следует код настройки панели управления слайд-шоу. Параметр interval задает паузу в миллисекундах для автолистания. Параметр repeat включает автоповтор автолистания. Параметр opacity задает степень прозрачности панели с кнопками (имеет смысл, когда панель располагается прямо поверх изображения), position задает ее расположение, а hideOnMouseOut включает скрытие кнопок при уходе курсора мыши с окна просмотра. Теперь формируем сами картинки галереи:
 
<body>
 
<div class="highslide-gallery">
<a href="1.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="1small.jpg"></a>
<div class="highslide-heading">Заголовок 1</div>
 
<a href="2.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="2small.jpg"></a>
<div class="highslide-heading">Заголовок 2</div>
</div>
</body>
</html>
 
Наблюдательный читатель наверняка заметил, что все элементы галереи заключены в тег DIV с классом highslide-gallery. Каждая картинка заключена в ссылку с классом highslide и уже знакомым нам обработчиком события onclick. После каждой ссылки с картинкой может следовать заголовок для ней в теге DIV с классом highslide-heading. Получим такую галерею (рис. 4).
 
Советы по WEB-разработке: фотогалереи
Рис. 4
 

Галерея скрытая

 
Это галерея, в которой на веб-странице видна только одна картинка, по клику на которой открывается окно просмотра всей галереи, и уже в этом окне видны все картинки (рис. 5).
 
Советы по WEB-разработке: фотогалереи
Рис. 5
 
Код тут почти тот же самый, но сразу после объявления модуля и файла стилей подключается еще один файл стилей специально для браузера IE.
 
<!-[if lt IE 7>]
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]->
 
Затем инициализация немного более обширная:
 
<script type="text/javascript">
 hs.graphicsDir = 'highslide/graphics/';
 hs.align = 'center';
 hs.transitions = ['expand', 'crossfade'];
 hs.fadeInOut = true;
 hs.outlineType = 'glossy-dark';
 hs.wrapperClassName = 'dark';
 hs.captionEval = 'this.a.title';
 hs.numberPosition = 'caption';
 hs.useBox = true;
 hs.width = 600;
 hs.height = 400;
 //hs.dimmingOpacity = 0.8;
 
 // Добавляем панель управления
 hs.addSlideshow({
 interval: 5000,
 repeat: false,
 useControls: true,
 fixedControls: 'fit',
 overlayOptions: {
 position: 'bottom center',
 opacity: .75,
 hideOnMouseOut: true
 },
 thumbstrip: {
 position: 'above',
 mode: 'horizontal',
 relativeTo: 'expander'
 }
 });
 
 // Осуществляем анимацию картинок в единственной видимой миниатюре
 var miniGalleryOptions1 = {
 thumbnailId: 'thumb1'
 }
</script>
</head>
 
Тут нам уже почти все знакомо. Остается сформировать галерею. В теге BODY ставим тег DIV с классом highslide-gallery. Первой идет ссылка с видимой картинкой. После нее во вложенном теге DIV класса hidden-container перечисляем ссылки с картинками, которые должны быть не видны на веб-странице.
 
<body>
<div class="highslide-gallery">
<a class='highslide' id="thumb1" href='1.jpg' title="Фото 1" onclick="return hs.expand(this, miniGalleryOptions1)"><img src='1.jpg'></a>
 
<div class="hidden-container">
<a class='highslide' href='2.jpg' title="Фото 2" onclick="return hs.expand(this, miniGalleryOptions1)"><img src='2.jpg'></a>
<a class='highslide' href='3.jpg' title="фото 3" onclick="return hs.expand(this, miniGalleryOptions1)"><img src='3.jpg'></a>
 </div>
</div>
</body>
</html>
 
В ссылках можно указывать свойство title, которое будет отображаться как название картинки. А если хочется уж совсем упростить HTML-код галереи, то можно и так:
 
<a class='highslide' href='1.jpg' onclick="return hs.expand(this)">
<img src='1.jpg' width=’100’></a>
<a class='highslide' href='2.jpg' onclick="return hs.expand(this)">
<img src='2.jpg' width=’100’></a>
 

Дополнительная настройка

 
Библиотека имеет собственный стиль выделения иллюстрации на веб-странице, при наведении курсора мыши на картинку. Цвет рамки выделения может не соответствовать цветовой гамме стиля сайта. Поэтому цвет рамки можно изменить, переопределив стиль таким образом с указанием служебного слова !important:
 
<style>
.highslide img { border: 0px solid #FFF !important; }
.highslide:hover img {border-color: #FFF !important;}
</style>
 
Помимо этого можно навсегда отключить отображение всяких намеков на то, что данные всплывающие окна являются результатом разработки Highslide JS.
Для этого, в зависимости от того, какой модуль вы применяете, в файлах highslide-with-gallery.js, highslide-with-html.js и highslide.js найти строчку с параметром showCredits и установить для нее значение false.
 
И, на всякий случай, чтобы было уже совсем безотказно, находим рядом строку с параметром creditsHref и его значение ставим как пустую строку, т.е. между одинарными кавычками текст убираем вот так (то же самое делаем и для параметров creditsText и creditsTitle):
 
showCredits : false,
creditsHref : '',
creditsText : '',
creditsTitle : '',
 
Еще можно перевести на русский язык подсказки к кнопкам окна. Для этого в этих же модулях достаточно найти область конфигурации lang и для каждого параметра с английским текстом вписать русский перевод, например, так:
 
lang : {
cssDirection: 'ltr',
loadingText : 'Загрузка...',
fullExpandTitle : 'Оригинальный размер (F)',
previousText : 'Предыдущее',
nextText : 'Следующее',
moveText : 'Переместить',
closeText : 'Закрыть',
closeTitle : 'Закрыть (ESC)',
playText : 'Автопоказ (Play)',
playTitle : 'Запустить слайд-шоу (spacebar)',
 
Советы по WEB-разработке: фотогалереи
Рис. 6
 
Данная библиотека широко применяется веб-мастерами многих сайтов. Например, на этом сайте (рис. 6).
 

Как на этом можно заработать?

 
Изучив HTML, CSS, PHP, JavaScript, вы сможете приобрести хорошую, востребованную и высоко оплачиваемую профессию. И тогда сможете устроиться на солидную работу или трудиться в свободном полете, ища вакансии на известном ресурсе для IT-профессионалов, как например, www.weblancer.net, подбирая себе интересные проекты, которые придутся вам по душе. И на постоянной или на в нештатной работе сможете зарабатывать в месяц $500-2000.
 
Даже будучи не в курсе языков программирования, а зная лишь общие принципы HTML, можно найти себе работу по размещению объявлений на сайте, модератором сайта или контент-менеджером за $200 в месяц – это может оказаться удобным для тех, кто хочет зарабатывать в свободное от учебы время. К тому же никто не запрещает вам найти себе работу на нескольких сайтах, от чего ваш заработок умножится в разы.
 
Трудитесь и богатейте! Богатство – не порок! ;)
 
 
© Владислав Демьянишин
 
Вы находитесь на официальном сайте Владислава Демьянишина - разработчика игры Dune IV (Dune 4). На нашем сайте Вы можете бесплатно скачать игры Dune IV (Dune 4), Battle City (Танчики с Dendy/Nintendo), читы к играм и многое другое. Также Вы можете скачать бесплатно программы и полезные утилиты. Все программы чистые, т.е. не содержат вирусов и иного вредоносного ПО.
 
 
 

Журнал > Программирование > PHP и WEB для новичков (HTML, JavaScript, PHP, MySQL) > PHP и WEB для новичков: фотогалереи
 
 
 
 
 
 
На главную страницу На предыдущую страницу На начало страницы