Новые сообщения · Участники · Правила форума · Поиск
  • Страница 1 из 1
  • 1
Форум о uCoz и Web » Вопросы по веб » JavaScript и jQuery » Multi Media Bar (by uNiceGroup)
Multi Media Bar
AimedДата: Понедельник, 13.06.2011, 20:55 | Сообщение # 1
Генерал-лейтенант
Сообщений: 648
Репутация: 60
Социальная репутация:

Статус: Оффлайн

Всем здрасти. Меня попросили адаптировать один интересный скрипт. Чем я и занялся. Теперь расскажу как же его нам установить и как он работает. Искренне надеюсь, что выполняю непустую работу. Смотрим ДЕМО
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 -->  


Все, удачи всем =)
Как установить кнопки социальных сетей?

 
GhostДата: Вторник, 14.06.2011, 02:38 | Сообщение # 2
Генералиссимус
Сообщений: 1298
Репутация: 122
Социальная репутация:

Статус: Оффлайн
Aimed, интересный слайдер, по поводу jQuery я с тобой согласен, но у меня на 1.6.1 обычно всё работает, но только от того что сам всё ручмами переделывал. Слайдер к варезникам отлично подойдёт.
 
AimedДата: Вторник, 14.06.2011, 06:55 | Сообщение # 3
Генерал-лейтенант
Сообщений: 648
Репутация: 60
Социальная репутация:

Статус: Оффлайн
Ghost, там такое дело, что я скрол бар себе на сайт писал на версии 1.3.2. а на версии 1.6.1 он не пашет =( А если версия ниже 1.4.4, то при наведении на изображения, там не будут иконки появлятся =(
 
GhostДата: Вторник, 14.06.2011, 14:52 | Сообщение # 4
Генералиссимус
Сообщений: 1298
Репутация: 122
Социальная репутация:

Статус: Оффлайн
Aimed, эммм... я вчера, ну тоесть сегодня ночью, ставил на тест сайт с 1.6.1 и всё работало)
Ты с какого браузера лез? На лисе оно реал чёт не пахало((
 
AimedДата: Вторник, 14.06.2011, 15:03 | Сообщение # 5
Генерал-лейтенант
Сообщений: 648
Репутация: 60
Социальная репутация:

Статус: Оффлайн
Quote (Ghost)
Aimed, эммм... я вчера, ну тоесть сегодня ночью, ставил на тест сайт с 1.6.1 и всё работало)

Скрипт ставил? Я и говорю, с 1.6.1. работает. Я на лисе.

 
GhostДата: Вторник, 14.06.2011, 15:04 | Сообщение # 6
Генералиссимус
Сообщений: 1298
Репутация: 122
Социальная репутация:

Статус: Оффлайн
Aimed, да скрипт, я доп библиотеки не подключал...
Я просто не понял тебя)
 
kirSANДата: Воскресенье, 15.04.2012, 14:26 | Сообщение # 7
Сержант
Сообщений: 30
Репутация: 0
Социальная репутация:

Статус: Оффлайн
а где сам архив???? sad
 
AimedДата: Воскресенье, 15.04.2012, 14:29 | Сообщение # 8
Генерал-лейтенант
Сообщений: 648
Репутация: 60
Социальная репутация:

Статус: Оффлайн
http://www.unicegroup.ru/blog/multi_media_bar/2011-06-13-6
 
kirSANДата: Понедельник, 16.04.2012, 03:30 | Сообщение # 9
Сержант
Сообщений: 30
Репутация: 0
Социальная репутация:

Статус: Оффлайн
ребята.. что то не получаеться... поставил. первое- появилась белая рамка не только вокруг скрипта но и над всеми новостями((((
второе. нажимаю на картинку он окрывает полную картинку где...без фанзибокса.... у меня стоит 1.6.1.
 
AimedДата: Понедельник, 16.04.2012, 07:40 | Сообщение # 10
Генерал-лейтенант
Сообщений: 648
Репутация: 60
Социальная репутация:

Статус: Оффлайн
Попробуй с демо взять, потому, что ставишь видимо криво
 
kirSANДата: Понедельник, 16.04.2012, 15:55 | Сообщение # 11
Сержант
Сообщений: 30
Репутация: 0
Социальная репутация:

Статус: Оффлайн
http://sakh-neformal.my1.ru/index/4444/0-131 - вот посмотри
Code
<link rel="stylesheet" href="/mmb/style.css" type="text/css">
<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>  
<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">
    <a href="http://sakh-neformal.my1.ru/3.jpg" rel="media" class="fancybox" title="ПОДПИСЬ">
    <img src="http://sakh-neformal.my1.ru/3.jpg" 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 -->
    </div> <!-- end .media-slide -->
    </div> <!-- end #media-slides -->
    </div> <!-- end #et-multi-media -->
    </div> <!-- end #multi-media-bar -->
 
AimedДата: Понедельник, 16.04.2012, 17:04 | Сообщение # 12
Генерал-лейтенант
Сообщений: 648
Репутация: 60
Социальная репутация:

Статус: Оффлайн
Какого хрена у Вас после каждой строки <br>? И уж простите, но на такой сайт я больше не нагой
Можете поскать в интернете js карусели

 
kirSANДата: Четверг, 19.04.2012, 14:16 | Сообщение # 13
Сержант
Сообщений: 30
Репутация: 0
Социальная репутация:

Статус: Оффлайн
Aimed, да причем тут сайт????? я тебе про скрипт!!!

Добавлено (19.04.2012, 14:15)
---------------------------------------------
ну тогда подскажите карусель какую нить.

Добавлено (19.04.2012, 14:16)
---------------------------------------------
и что бы под каждой картинкой текст был.

 
Форум о uCoz и Web » Вопросы по веб » JavaScript и jQuery » Multi Media Bar (by uNiceGroup)
  • Страница 1 из 1
  • 1
Поиск: