Довольно часто у веб разработчика появляется ситуация когда нужно вывести некоторую информацию во всплывающем окне. Например на сайте художника можно вывести список картин в таком окне или в интернет магазине на странице продукта можно вывести большие изображения в красивом всплывающем окне. ThickBox для таких целей идеально подходит.
Скачать ThickBox тут. Для того чтобы данный плагин работал также нужно скачать саму библиотеку jQuery. Но если вы используете популярный движок например wordpress или drupal, тогда jQuery уже встроена в движок. В других случаях нужно скачивать и подключать.
Давайте для пример подключим библиотеку к обычной html страницы:
1. Скачиваем в одну папку сам thickbox, стили, изображение загруски и загружаем cаму библиотеку jQuery.
2. Создаем файл в папке в которую мы загружали thickbox.
3. Подключаем jquery и сам thickbox в заголовке документа -
<script src="jquery-latest.pack.js" type="text/javascript"></script> <script src="thickbox-compressed.js" type="text/javascript"></script>
4. Нужно зайти в thickbox.js и правильно прописать путь к изображению на строчке 8
var tb_pathToImage = "images/loadingAnimation.gif";
В нашем случае путь на строчке 8 будет такой – “loadingAnimation.gif”.
Все успешно подключено теперь примеры.
Выводим фотографии – фотоальбом.
Для данного примера нужен jquery 1.2.6(На момент написание материала jquery 1.3.2 не работал с этим примером) Создаем папку img в нашей папке и помещаем туда фотографии.
Код Фотоальбома -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>thickbox</title>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="thickbox.js" type="text/javascript"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />
</head>
<body>
<a href="img/1.jpg" class="thickbox" rel="album"><img src="img/1.jpg" ></a>
<a href="img/2.jpg" class="thickbox" rel="album"><img src="img/2.jpg"></a>
<a href="img/3.jpg" class="thickbox" rel="album"><img src="img/3.jpg"></a>
</body>
</html>
Для того чтобы большая фотка выводилась через thickbox нужно для изображения устанавливать class=”thickbox”. Чтобы фотки были в виде фотоальбома нужно писать rel с одинаковыми значениями, тогда во всплывающем окне появляются ссылки на следующею и предыдущею фотку. Если убрать rel тогда фотки будут независимы.
Наш пример выводит(кликните на фотку) –
На этом все. В следующем материале раскажу как подключать thickbox к wordpress и как выводить текст.
Всех благ!
