|
| |||||||||||||||||
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), где и закругленная рамка с градиентом, и тащить его можно за заголовок, и кнопка закрытия есть, и даже в правом нижнем углу есть треугольник растягивания окна. Вот! ;)
![]() Рис. 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).
![]() Рис. 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)".
Рис. 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).
Рис. 4
Галерея скрытаяЭто галерея, в которой на веб-странице видна только одна картинка, по клику на которой открывается окно просмотра всей галереи, и уже в этом окне видны все картинки (рис. 5).
Рис. 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)',
…
![]() Рис. 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 для новичков: фотогалереи
| ||||||||||||||||||
|
||||||||||||||||||