Данный вид модальных окон является дополнением для uCoz. При клике на
ссылку или картинку, будет по разному (вертеться, вылетать) модальное
окно. Для просмотра вида окон смотрим ДЕМО. Инструкция:
1) Заходим в Панель Управления (ПУ) и после </head> на нужных страницах ставим код:
<link rel="stylesheet" type="text/css" href="/css/wowwindow.css">
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.wowwindow.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.popups a').wowwindow({
draggable: true
});
$('.popups-rotate a').wowwindow({
rotate: true,
draggable: true
});
$('.popups-rotate-multiple a').wowwindow({
rotate: true,
rotations: 3,
draggable: true
});
/**
* The YouTube IFRAME doesn't work on local content,
* so for the purposes of this demo, the 'videoIframe'
* option has been set to false. It is recommended to
* keep it set to true (the default) for compatibility
* with devices that are not Flash enabled.
*/
$('a[rel=video]').wowwindow({
draggable: true,
height: 225,
width: 400,
videoIframe: false
});
$('a[rel=video_rotate]').wowwindow({
draggable: true,
rotate: true,
height: 225,
width: 400,
videoIframe: false
});
$('a[rel=video_multi_rotate]').wowwindow({
draggable: true,
rotate: true,
rotations: 3,
height: 225,
width: 400,
videoIframe: false
});
$('#youtube-auto-thumbnails a').wowwindow({
draggable: true,
width: 480,
height: 390,
videoIframe: false,
autoYouTubeThumb: 'default'
});
});
</script>
2) Эти коды ставим там, где бы Вы хотели видеть ссылки: Image Content <div class="popup-section">
<div class="popups">
<a href="Ссылка на изображение"><img src="Ссылка на миниатюру" border="0" alt="Название ссылки"></a>
</div>
<div class="popups-rotate">
<a href="Ссылка на изображение"><img src="Ссылка на миниатюру" border="0" alt="Название ссылки"></a>
</div>
<div class="popups-rotate-multiple">
<a href="Ссылка на изображение"><img src="Ссылка на миниатюру" border="0" alt="Название ссылки"></a>
</div>
</div>
</div>
Inline Content <div class="popup-section">
<div class="popups">
<a title="Описание" href="#example1">Ваш текст</a>
</div>
<div class="popups-rotate">
<a title="Описание" href="#example1">Ваш текст</a>
</div>
<div class="popups-rotate-multiple">
<a title="Описание" href="#example1">Ваш текст</a>
</div>
</div>
<div style="display:none;">
<div id="example1">
<div class="window-inner">
<img src="Ссылка на изображение" border="0" alt="Описание" class="left" />
<p>Ваш текст примера.</p>
</div>
</div>
</div>
Iframe Content <div class="popup-section">
<div class="popups">
<a title="Описание" href="Ссылка на сайт">Заголовок сайта</a>
</div>
<div class="popups-rotate">
<a title="Описание" href="Ссылка на сайт">Заголовок сайта</a>
</div>
<div class="popups-rotate-multiple">
<a title="Описание" href="Ссылка на сайт">Заголовок сайта</a>
</div>
</div>
Video Content <div class="popup-section">
<a rel="video" title="Описание" href="Ссылка на видео"><img src="Ссылка на миниатюру" alt="" /></a>
<a rel="video_rotate" title="Описание" href="Ссылка на видео"><img src="Ссылка на миниатюру" alt="" /></a>
<a rel="video_multi_rotate" title="Описание" href="Ссылка на видео"><img src="Ссылка на миниатюру" alt="" /></a>
</div>
YouTube Content with Auto-Generating Thumbnails <div class="popup-section">
<a rel="video" title="Описание" href="http://www.youtube.com/watch?v=Xt1C00e__5c"><img src="http://img.youtube.com/vi/JK2hKzZss5Y/default.jpg" border="0" alt="" /></a></p>
</div>
<div id="youtube-auto-thumbnails">
<a title="Описание" href="http://www.youtube.com/watch?v=Xt1C00e__5c"><img src="http://img.youtube.com/vi/JK2hKzZss5Y/default.jpg" border="0" alt=""></a>
</div>
Заливаем файлы из архива по папкам, которые указаны в нем.
| 
