Joomla 3.x Bootstrap 3: Carousel, Collapse, tabs, video

Практически весь материал основан на: Bootstrap
Редактирование: Редактор - CodeMirror
Carousel - Карусель
Аналог компонент DJ-ImageSlider

Спойлер: код Carousel

Код (CODE):

1. <div id="myCarousel" class="carousel slide">
2.   <ol class="carousel-indicators">
3.     <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
4.     <li data-target="#myCarousel" data-slide-to="1"></li>
5.     <li data-target="#myCarousel" data-slide-to="2"></li>
6.   </ol>
7.   <!-- Carousel items -->
8.   <div class="carousel-inner">
9.     <div class="active item">…</div>
10.     <div class="item">…</div>
11.     <div class="item">…</div>
12.   </div>
13.   <!-- Carousel nav -->
14.   <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
15.   <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
16. </div>

Без этого карусель плохо работает

Спойлер: код Script

Код (CODE):

1. $('.carousel').carousel()

Или

Код (CODE):

1. $('.carousel').carousel({
2.   interval: 2000
3. })

Есть и такой вариант спойлера который создан на основе Collapse

Спойлер: код Спойлер

Код (CODE):

1. <div class="accordion" id="accordion5">
2.   <div class="accordion-group">
3.     <div class="accordion-heading">
4.       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion5" href="#istoriya">
5.         Collapsible Group Item #0
6.       </a>
7.     </div>
8.     <div id="istoriya" class="accordion-body collapse">
9.       <div class="accordion-inner">
10.         Anim pariatur cliche...
11.       </div>
12.     </div>
13.   </div>
14. </div>

Спойлер: код Collapse

Код (CODE):

1. <div class="accordion" id="accordion2">
2.   <div class="accordion-group">
3.     <div class="accordion-heading">
4.       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
5.         Collapsible Group Item #1
6.       </a>
7.     </div>
8.     <div id="collapseOne" class="accordion-body collapse in">
9.       <div class="accordion-inner">
10.         Anim pariatur cliche...
11.       </div>
12.     </div>
13.   </div>
14.   <div class="accordion-group">
15.     <div class="accordion-heading">
16.       <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
17.         Collapsible Group Item #2
18.       </a>
19.     </div>
20.     <div id="collapseTwo" class="accordion-body collapse">
21.       <div class="accordion-inner">
22.         Anim pariatur cliche...
23.       </div>
24.     </div>
25.   </div>
26. </div>
27. ...

Тab
Плагин Tabs & Sliders

Спойлер: код Tabs

Код (CODE):

1. <ul class="nav nav-tabs">
2.   <li><a href="#home" data-toggle="tab">Home</a></li>
3.   <li><a href="#profile" data-toggle="tab">Profile</a></li>
4.   <li><a href="#messages" data-toggle="tab">Messages</a></li>
5.   <li><a href="#settings" data-toggle="tab">Settings</a></li>
6. </ul>

Спойлер, ну я особо не задумывался в его реализации, брал за основу кнопки

Спойлер: код Спойлер

Код (CODE):

1. <p style="text-align: center;"><a class="btn btn-secondary btn-lg btn-block" href="#istoriya" data-toggle="collapse">Заголовок</a></p>
2. <div id="istoriya" class="collapse">
3. <div class="well">
4. текст
5. </div>
6. </div>

С видео как-то в Bootstrap проблемы, но и это решается.
Плагин JoomlaWorks AllVideos Player

Спойлер: код Video

Код (CODE):

1. <div style="position: relative; padding-bottom: 56.25%; height: 0">
2. <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;border-width: 0px;overflow: hidden;" src="https://www.youtube.com/embed/tj_V7BDHTxk?rel=0&amp;fs=1&amp;wmode=transparent" width="600" height="450"  allow="autoplay; fullscreen; encrypted-media" title="Videos Player"></iframe>
3. </div>

Есть еще способ для Videos, проверил

Спойлер: код

Код (CODE):

1. div.video{
2. position: relative;
3. padding-bottom: 56.25%; /* соотношение сторон 16:9 */
4. height: 0;
5. overflow: hidden;
6. }
7. div.video iframe{
8. position:absolute;
9. top:0;
10. left:0;
11. width:100%;
12. height:100%;
13. border-width: 0;
14. outline-width: 0;
15. border-width: 0px;
16. overflow: hidden;
17. }

Код (CODE):

1. <div class="video">
2. <iframe src="https://www.youtube.com/embed/tj_V7BDHTxk?rel=0&amp;fs=1&amp;wmode=transparent" width="600" height="450"  allow="autoplay; fullscreen; encrypted-media" title="Videos Player"></iframe>
3. </div>

Также вам может помочь по вставке кода в контент:
Компонент Content Templater
Компонент Snippets
Компонент RoKCandy

Что ещё в заключении можно вывести и CSS запихнул его в файл jquery-add-css-to-head
Кому интересно jquery-add-css-to-head

Спойлер: код jquery-add-css-to-head

Код (CODE):

1. $("head link[rel='stylesheet']").last().after("<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>");

или но мне он не подошёл

Код (CODE):

1. var $head = $("head");
2. var $headlinklast = $head.find("link[rel='stylesheet']:last");
3. var linkElement = "<link rel='stylesheet' href='/css/masterBlaster.css' type='text/css' media='screen'>";
4. if ($headlinklast.length){
5.    $headlinklast.after(linkElement);
6. }
7. else {
8.    $head.append(linkElement);
9. }

Демо