Увеличение картинок Shadowbox
Красивое увеличение картинок для uCoz и не только, это увеличение будет работать на всех CMS. Когда вы нажимаете на картинку она плавно увеличивается и плавно затемняется фон. Что бы закрыть увеличенную картинку нужно нажать на крестик снизу. Когда идет загрузка картинки показывается картинка и написана загрузка, про исчезновение тоже не забыли все сделано плавно и красиво. Лучше всего посмотреть демо.
Установка:
1) Самый простой способ это в <head>...</head> вставить:
Вот чуть по сложнее потому что используется литерал объекта, что бы указать несколько вариантов. Параметры, передаваемые этому методу будет по умолчанию для всех экземпляров Shadowbox на странице.
2) Перейдем к использованию
Вот пример использования через html разметку. Что бы воспользоваться этим вы должны добавить rel="shadowbox" атрибут каждой ссылки.
Рассмотрим на примере. У вас есть простая ссылка на картинку
Но что бы сделать увеличение с помощью Shadowbox мы изменим ее и получится следующее:
My Image вы можете заменить к примеру на:
Вот и все! При нажатии на ссылку картинка откроется в Shadowbox.
Title будет плавно всплывать над картинкой при увеличении, красивый эффект.
Пример использования title в Shadowbox:
Установка:
1) Самый простой способ это в <head>...</head> вставить:
Код
<link rel="stylesheet" type="text/css" href="http://uwebo4ka.3dn.ru/scripts/shadowbox/shadowbox.css">
<script type="text/javascript" src="http://uwebo4ka.3dn.ru/scripts/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<script type="text/javascript" src="http://uwebo4ka.3dn.ru/scripts/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
Вот чуть по сложнее потому что используется литерал объекта, что бы указать несколько вариантов. Параметры, передаваемые этому методу будет по умолчанию для всех экземпляров Shadowbox на странице.
Код
<link rel="stylesheet" type="text/css" href="http://uwebo4ka.3dn.ru/scripts/shadowbox/shadowbox.css">
<script type="text/javascript" src="http://uwebo4ka.3dn.ru/scripts/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
handleOversize: "drag",
modal: true
});
</script>
<script type="text/javascript" src="http://uwebo4ka.3dn.ru/scripts/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
handleOversize: "drag",
modal: true
});
</script>
2) Перейдем к использованию
Вот пример использования через html разметку. Что бы воспользоваться этим вы должны добавить rel="shadowbox" атрибут каждой ссылки.
Рассмотрим на примере. У вас есть простая ссылка на картинку
Код
<a href="myimage.jpg">My Image</a>
Но что бы сделать увеличение с помощью Shadowbox мы изменим ее и получится следующее:
Код
<a href="myimage.jpg" rel="shadowbox">My Image</a>
My Image вы можете заменить к примеру на:
Код
<img width="250px" src="youimage.png">
Вот и все! При нажатии на ссылку картинка откроется в Shadowbox.
Title будет плавно всплывать над картинкой при увеличении, красивый эффект.
Пример использования title в Shadowbox:
Код
<a href="myimage.jpg" rel="shadowbox" title="My Image">My Image</a>
О материале:
Дата добавления: 06.01.2013 в 18:18
Материал просмотрен: 984 раз
Категория: Скрипты и модификации для uCoz
Оставлены: 0 комментария
Рейтинг материала
По мнению пользователей
5.0
Поделиться
Комментарии
0 комментариев
Навигация
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Онлайн никого нет