Всем здрасти. Меня попросили адаптировать один интересный скрипт. Чем я и занялся. Теперь расскажу как же его нам установить и как он работает. Искренне надеюсь, что выполняю непустую работу. Поехали.
1. Для начала качаем архив и заливаем в корень сайта.
2. CSS
Между head и /head вставляем:
Code
<link rel="stylesheet" href="/mmb/style.css" type="text/css">
3. JS
Подключаем скрипты. Библиотеку fancybox, cycle и superfish. Для этого в самом конце страницы, перед /body вставляем:
Code
<link media="screen" type="text/css" href="/mmb/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" />
<script type='text/javascript' src='/mmb/js/jquery.cycle.all.min.js?ver=1.0'></script>
<script src="/mmb/js/superfish.js" type="text/javascript"></script>
<script src="/mmb/js/custom.js" type="text/javascript"></script>
<script type='text/javascript' src='/mmb/fancybox/jquery.easing-1.3.pack.js?ver=1.3.4'></script>
<script type='text/javascript' src='/mmb/fancybox/jquery.fancybox-1.3.4.pack.js?ver=1.3.4'></script>
<script type='text/javascript' src='/mmb/js/et-ptemplates-frontend.js?ver=1.1'></script>
Внимание! В uCoz теперь стандартно подключается jQuery (чем лично я сильно недоволен, т.к. версий библиотек предусмотрено всего две 1.3.2 и 1.6.1). Нам же нужна версия выше 1.4.4. Можете, конечно поставить в настройках подключение версии 1.6.1, но с некоторыми моими скриптами на этом сайте она конфликтует. Так что попробуйте, если конфликтов не будет, изменяйте в настройках библиотеку на 1.6.1.
4. HTML
Код оболочки:
Code
<div id="multi-media-bar">
<h3 class="title">Multi Media Bar</h3>
<div id="et-multi-media" class="clearfix">
<a id="left-multi-media" href="#">Previous</a>
<a id="right-multi-media" href="#">Next</a>
<div id="media-slides">
<div class="media-slide">
<div class="thumb">
СУДА КОДЫ ЯЧЕЕК, те что ниже
</div> <!-- end .media-slide -->
</div> <!-- end #media-slides -->
</div> <!-- end #et-multi-media -->
</div> <!-- end #multi-media-bar -->
Код 1 ячейки. Создавать Вы их можете сколько угодно. И так это для ичейки с изображением:
Code
<a href="ссылка на полноразмерное изображение" rel="media" class="fancybox" title="ПОДПИСЬ">
<img src="ссылка на изображение" class='multi-media-image' alt='Название' width='48' height='48' /> <span class="more"></span>
</a>
<div class="media-description">
<p>Текст к изображению</p>
<span class="media-arrow"></span>
</div>
</div> <!-- end .thumb -->
А это для ячейки с видео:
Code
<div class="thumb">
<a href="ссылка на видео" class="et-video et_video_lightbox" title="Название">
<img src="ссылка на изображение" class='multi-media-image' alt='Название' width='48' height='48' /> <span class="more"></span>
</a>
<div class="media-description">
<p>Текст к изображению</p>
<span class="media-arrow"></span>
</div>
</div> <!-- end .thumb -->
Размеры задаются в css, каждому замыкающему элементу нужно указывать класс не просто "thumb", а "Thumb last" и замыкать блок дополнительным div`ом, а перед следующей партией ставить:
Code
<div style="position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0; width: 222px; height: 58px;" class="media-slide">
