FAQ Вкладки с видео youtube, vk, kinostok, allserials, myhit

Администратор · Регистрация: 27.02.2009

Скачиваем скрипт вкладок на jQuery

Файл tabs.js копируем в папку js вашего стиля (в нашем случае Default)

CSS стиль для горизонтальных табов, копируем в самый низ файла styles.css, находящегося в папке style вашего стиля:

Код HTML:

/* Вкладки */
.section {
    width:640px;
    background:#EFEFEF;
    margin:0px;
}
ul.tabs {
    height: 28px;
    line-height: 24px;
    list-style: none;
    background: #FFF;
    margin:0;
}
.tabs li {
    float: left;
    display: inline;
    margin: 0 1px -1px 0;
    padding: 0 13px 1px;
    color: #777;
    cursor: pointer;
    background: #F9F9F9;
    border: 1px solid #E4E4E4;
    border-bottom: 1px solid #F9F9F9;
    position: relative;
}
.tabs li:hover,
.vertical .tabs li:hover {
    color: #F70;
    padding: 0 13px;
    background: #FFFFDF;
    border: 1px solid #FFCA95;
}
.tabs li.current {
    color: #444;
    background: #EFEFEF;
    padding: 0 13px 2px;
    border: 1px solid #D4D4D4;
    border-bottom: 1px solid #EFEFEF;
}
.box {
    display: none;
    border: 1px solid #D4D4D4;
  border-width: 0 1px 1px;
    background: #EFEFEF;
    padding:0px;
}
.box.visible {
    display: block;
}

Открываем админку DLE и создаем доп.поля (можно указать в каких категориях сайта они будут работать):

Название: youtube
Тип поля: Одна строка
Использовать при желании: ставим галочку

Название: vk
Тип поля: Одна строка
Использовать при желании: ставим галочку

Название: kinostok
Тип поля: Одна строка
Использовать при желании: ставим галочку

Название: myhit
Тип поля: Одна строка
Использовать при желании: ставим галочку

Название: allserials
Тип поля: Одна строка
Использовать при желании: ставим галочку

Просто ссылку страницы с видео добавлять в доп. поля не получится к сожалению.

youtube из ссылки вида

Код HTML:

http://www.youtube.com/watch?v=6zhN0mzFRqE

мы должны вставлять только ucZBbErEkUM

vk - (Поделиться -> Получить код видео)

Код HTML:

<iframe src="http://vk.com/video_ext.php?oid=4910858&id=106975663&hash=c36009736b1a4346&sd" width="607" height="360" frameborder="0"></iframe>

Из полученного кода берем только

Код HTML:

http://vk.com/video_ext.php?oid=4910858&id=106975663&hash=c36009736b1a4346&sd

Такая же система, как и для vk, для ссылок kinostock, myhit и allserials (из предоставленных кодов для вставки видео на сайт, берем только ссылку из атрибута src="")

Теперь при создании новой новости, или редактировании старой у нас появятся 5 необязательных для заполнения полей:

Теперь открываем шаблон fullstory.tpl

Ищем {full-story} и перед ним вставляем следующий код:

Код HTML:

<script type="text/javascript" src="{THEME}/js/tabs.js"></script>
<div class="section">
    <ul class="tabs">
        [xfgiven_youtube]<li class="current">Youtube</li>[/xfgiven_youtube]
        [xfgiven_vk]<li[xfnotgiven_youtube] class="current"[/xfnotgiven_youtube]>Вконтакте</li>[/xfgiven_vk]
        [xfgiven_kinostok]
            <li[xfnotgiven_youtube][xfnotgiven_vk] class="current"[/xfnotgiven_vk][/xfnotgiven_youtube]>
                KinoStok
            </li>
        [/xfgiven_kinostok]
        [xfgiven_myhit]
            <li[xfnotgiven_youtube][xfnotgiven_kinostok][xfnotgiven_vk] class="current"[/xfnotgiven_vk][/xfnotgiven_kinostok][/xfnotgiven_youtube]>
                Myhit
            </li>
        [/xfgiven_myhit]
        [xfgiven_allserials]
            <li[xfnotgiven_youtube][xfnotgiven_myhit][xfnotgiven_kinostok][xfnotgiven_vk] class="current"[/xfnotgiven_vk][/xfnotgiven_kinostok][/xfnotgiven_myhit][/xfnotgiven_youtube]>
                Allserials
            </li>
        [/xfgiven_allserials]
    </ul>
    [xfgiven_youtube]
        <div class="box visible">        
            <iframe width="640" height="360" src="http://www.youtube.com/embed/[xfvalue_youtube]" frameborder="0" allowfullscreen></iframe>        
        </div>
    [/xfgiven_youtube]
    [xfgiven_vk]
        <div class="box
            [xfnotgiven_youtube] visible[/xfnotgiven_youtube]
            ">    
            <iframe src="[xfvalue_vk]" width="640" height="360" frameborder="0"></iframe>
        </div>
    [/xfgiven_vk]
    [xfgiven_kinostok]
        <div class="box
            [xfnotgiven_youtube]
                [xfnotgiven_vk] visible[/xfnotgiven_vk]
            [/xfnotgiven_youtube]
            ">
            <embed src="[xfvalue_kinostok]" wmode="transparent" width="640" height="360" allowscriptaccess="always" allowfullscreen="true" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" /></embed>
        </div>
    [/xfgiven_kinostok]
    [xfgiven_myhit]
        <div class="box
        [xfnotgiven_youtube]
            [xfnotgiven_kinostok]
                [xfnotgiven_vk] visible[/xfnotgiven_vk]
            [/xfnotgiven_kinostok]
        [/xfnotgiven_youtube]
            ">
            <iframe width="640" height="360" src="[xfvalue_myhit]" frameborder="0" allowfullscreen></iframe>
        </div>
    [/xfgiven_myhit]
    [xfgiven_allserials]
        <div class="box
        [xfnotgiven_youtube]
            [xfnotgiven_myhit]
                [xfnotgiven_kinostok]
                    [xfnotgiven_vk]
                        visible
                    [/xfnotgiven_vk]
                [/xfnotgiven_kinostok]    
            [/xfnotgiven_myhit]
        [/xfnotgiven_youtube]
        ">
            <iframe src="[xfvalue_allserials]" width="640" height="360" frameborder="0" scrolling="no"></iframe>
        </div>
    [/xfgiven_allserials]
</div>

Пользователь · Регистрация: 25.08.2012

Vector, поправьте ссылку для скачивание.
И ещё подскажите, как сделать по стилю как тут? http://dom-filmov.ru/filmy/dramy/667...kachestve.html
Allserial - не работает! Переключатель ужасно лагает, попробуйте включить видел с myhit, потом с вк, увидите что получится!
Я связался с владельцем сайта dom-filmov.ru и он мне сказал что использует вот эти переключатели! http://test-templates.com/developmen...ates-tabs.html Сможете сделать тоже самое, только с этими переключателями?

Администратор · Регистрация: 27.02.2009

Цитата:

Сообщение от hvarts

Сможете сделать тоже самое, только с этими переключателями?

Отправную точку я дал, осталось только прочитать всю информацию и разобраться в ней.

Пользователь · Регистрация: 25.08.2012

Подключить то, я подключил. Как теперь через доп.поля сделать вставку видео? Подскажите.
http://u-film.ru/331-gfdg.html - вот как получилось.

Код HTML:

<div class="tt-tabs">
    <div class="index-tabs">
        <span>Первая вкладка</span>
        <span>Вторая вкладка</span>
        <span>Третья вкладка</span>
    </div>
    <div class="index-panel">
        <div class="tt-panel">
           2222
        </div>
        <div class="tt-panel">
            222222
        </div>
        <div class="tt-panel">
            33333
        </div>
    </div>
</div>

Пользователь · Регистрация: 25.08.2012

help!!!!!!!!!!!!!!!

Администратор · Регистрация: 27.02.2009

Код HTML:

<div class="tt-tabs">
    <div class="index-tabs">
        [xfgiven_youtube]<span>Youtube</span>[/xfgiven_youtube]
        [xfgiven_vk]<span>Вконтакте</li>[/xfgiven_vk]
        [xfgiven_kinostok]<span>KinoStok</span>[/xfgiven_kinostok]
        [xfgiven_myhit]<span>Myhit</span>[/xfgiven_myhit]
        [xfgiven_allserials]<span>Allserials</span>[/xfgiven_allserials]
    </div>
    <div class="index-panel">    
        [xfgiven_youtube]
            <div class="tt-panel">
                <iframe width="640" height="360" src="http://www.youtube.com/embed/[xfvalue_youtube]" frameborder="0" allowfullscreen></iframe>
            </div>
        [/xfgiven_youtube]
        [xfgiven_vk]
            <div class="tt-panel">
                <iframe src="[xfvalue_vk]" width="640" height="360" frameborder="0"></iframe>
            </div>
        [/xfgiven_vk]
        [xfgiven_kinostok]
            <div class="tt-panel">
                <embed src="[xfvalue_kinostok]" wmode="transparent" width="640" height="360" allowscriptaccess="always" allowfullscreen="true" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" /></embed>
            </div>
        [/xfgiven_kinostok]
        [xfgiven_myhit]
            <div class="tt-panel">
                <iframe width="640" height="360" src="[xfvalue_myhit]" frameborder="0" allowfullscreen></iframe>
            </div>
        [/xfgiven_myhit]
        [xfgiven_allserials]
            <div class="tt-panel">
                <iframe src="[xfvalue_allserials]" width="640" height="360" frameborder="0" scrolling="no"></iframe>
            </div>
        [/xfgiven_allserials]
    </div>
</div>

А allserials может и конфликтовать как то с другими плеерами, как вариант.

потому как вот его код вставки (меняйте как хотите):

<iframe src="[xfvalue_allserials]" width="640" height="360" frameborder="0" scrolling="no"></iframe>

[xfvalue_allserials] - это вставка значения доп.поля allserials

Пользователь · Регистрация: 25.08.2012

Vector, а как сделать что бы при смене плеера другое видео отключалось? Из-за этого остальные видео начинают глючить!

Добавлено через 10 минут

Администратор · Регистрация: 27.02.2009

Цитата:

Сообщение от hvarts

Vector, а как сделать что бы при смене плеера другое видео отключалось?

Это не в моих силах.

Пользователь · Регистрация: 25.08.2012

Я разобрался, связался с основателем сайта, он мне все растолковал. Побольше бы таких людей. Спасибо вам, Vector!

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
BB код YouTube	Vector	BB коды	11	03.10.2015 10:48
Вопрос Вкладки в vBulletin 4	Hkr	Вопросы по vBulletin 4.х	1	16.02.2013 09:48
Вопрос Вставка видео с других видео хостингов	legioner	Вопросы по vBulletin 4.х	3	10.01.2013 07:41
Проблема Вылез лишний кусок вкладки	Serguei	Вопросы по vBulletin 4.х	5	23.11.2011 00:13
Проблема Ссылка на видео youtube	westbam	Вопросы по vBulletin 4.х	3	15.05.2011 12:52

hvarts #5
00 МГц Пользователь Вес репутации: 0 Регистрация: 25.08.2012 Адрес: Челябинск Сообщений: 244 Сказал(а) спасибо: 81 Поблагодарили 1 раз в 1 сообщении	Re: Вкладки с видео youtube, vk, kinostok, allserials, myhit - 20.02.2013, 12:32 help!!!!!!!!!!!!!!!