Вот и пошло второе деся-
тилетие
двадцать
первого
века:
в
доме
3 телевизора,
3 компьютера, б мобильных
телефонов и 1 книга.
©
hs.outlineType =
‘rounded-white’;
</script>
</head>
<body>
<a id=”thumb1 ”
v - — .
..............
—1
href=”images/pic_big.jpg” class=”highslide’’
onclick=”return hs.expand (this) “>
<img src=”images/pic_small.jpg” height=”120”
width=” 107"></a>
<divclass=’’highslide-caption”>ripnMep
12345</div>
</body>
</htm l>
В примере видно, что, на сей раз, мы подключаем
модуль
highslide.js.
Далее
проводим
начальную
инициализацию
модуля.
Затем
уже
внутри
тега
B O D Y
формируется конструкция из ссылки, а в ней
заключена картинка, для которой следует показы-
вать окно просмотра.
Для
ссылки должен
быть задан
идентификатор,
название которого
не имеет значения,
например,
так
id = ”thum b1”,
а
также
указан
специальный
класс
class=”highslide”
и обработчик события ол-
click=”return hs.expand (this) ".
Если бы большеви-
ки устраивали ре-
волюцию сейчас,
то они бы захвати-
ли в первую очередь
не почту, телеграф
и телефон, а бтаИ,
ЕасеЬоок и бкуре.
УУУ
- '
.у л у .
Для изображения нет никаких ограничений ни на
свойства, ни на стили. Вслед за ссылкой может сле-
довать, а может и нет, тег
D IV
с классом highslide-
caption, устанавливающий подпись к картинке.
В
результате
получаем
веб-страницу с
картин-
кой, при клике на которую эта картинка как бы уве-
личивается
и
превращается
в целое окно с этой
увеличенной
картинкой
и
ее
подписью
(рис.
3).
Очень эффектно и внушает уважение к сайту.
Фото-галерея (Gallery)
В
ыше описанный способ для просмотра кар-
тинок подходит лишь для единичной иллюст-
рации. А вот когда их на веб-странице много, тогда
удобнее будет для посетителя смотреть сразу
все иллюстрации в виде слайд-шоу.
При этом в окне слайд-шоу можно выбирать
для укрупненного просмотра иллюстрацию,
кликая на ее миниатюре, либо листая галерею
кнопками навигации, либо запустить воспро-
изведение (автолистание) слайд-шоу. Думаю,
вы со мной согласны. Тогда
Галерея открытая
о;
ткрытая галерея, это когда на веб-странице
видны сразу все картинки, участвующие в
галерее. В коде как обычно указываем модуль
highslide-w ith-gallery.js,
который используем. Да-
лее проводим инициализацию - для слайд-шоу
она более обширная:
<html>
<head>
<script type=”text/javascript” src=”highslide/high-
slide-with-gallery.js”x /s c rip t>
<link rel=”stylesheet” type=”text/css” h re f-’high-
slide/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.fadelnOut = 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>
где
Ьв.аИдп
задает выравнивание окна просмот-
ра галереи,
ЬвЛгапвШопв
определяет визуальный
переход при появлении окна,
Лв.и
/гаррегС1а5БЫате
определяет метод форми-
рования интерфейса окна,
hs.fadelnO ut
включает
эффект Fadeln/FadeOut при появлении/исчезнове-
нии окна, параметр Лв.
dim m ingOpacity
можно не
указывать (в примере он закомментирован и по-
этому неактивен), но если указать для него дроб-
предыдущая страница 37 Компьютер 2012 08 читать онлайн следующая страница 39 Компьютер 2012 08 читать онлайн Домой Выключить/включить текст