В сегодняшнем уроке я расскажу Вам как создать плагин, который позволит просматривать большие фотографии в маленьком окне.
Мне показался данный плагин очень интересным, так как порой необходимо показать действительно большие фото своим посетителям для передачи всех деталей. И горизонтальная прокрутка практически всегда портит внешний вид любой страницы. Именно в такой ситуации нам будет полезен данный плагин.
Первым делом в шапке документа прописываем все необходимы скрипты и таблицу стилей:
Code
<link href="mbImgNav.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="inc/jquery.metadata.js"></script>
<script type="text/javascript" src="inc/ui.core.min.js"></script>
<script type="text/javascript" src="inc/ui.draggable.min.js"></script>
<script type="text/javascript" src="inc/mbImgNav.js"></script>
<script type="text/javascript">
$(function(){
$("#navArea").imageNavigator(
{
areaWidth: 700,
areaHeight:500,
draggerStyle:"1px dotted red",
navOpacity:.8
})
})
</script>
Как Вы видите здесь есть некоторые настройки, которые можно менять. Это areaWidth, areaHeight (высота, ширина окна просмотра); draggerStylе (внешний вид прямоугольника на карте изображения); navOpacity (прозрачности миниатюры - карты на изображении)
Второй шаг - это добавление изображения. Делать мы это будет вот так:
Code
<div id="navArea">
</div>
<div style="display:none;" class="imagesContainer {imageUrl:'iStock_2.jpg', navPosition:'TR', navWidth: 100, NavCoordinates:'1700,1700' }">
<span class="title">donna</span>
<div class="description"><STRONG>описание</STRONG></div>
<div class="additionalContent" style='color:white; font-size:100px; top:0; width:1000px; height:1000px; text-align:left;'>
сюда можно поместить любой текст!
</div>
</div>
Код позволит Вам добавить текст на любое Ваше изображение.
[off]сюда можно поместить любой текст![/off]
Также в скобках для каждого изображения можно задать дополнительные параметры:
imageUrl: УРЛ картинки
navPosition: возможные значение TL (верхний левый), BL (нижний левый), TR (верхний правый), BR (нижний правый) - расположение миниатюры карты
navWidth: ширина навигатора
NavCoordinates: координаты начального положения
Доступно только для пользователей
Сайт
Форум
Фотоальбом
Настройки
Расширенный поиск
Лента новостей
05.06.2010, Суббота в 23:21
