Hier noch eine Möglichkeit.
Globales Template erstellen mit folgenden Namen
multimedia_box
Inhalt:
Code:
<script type="text/javascript">
jQuery(document).ready(function() {
$(".video").click(function() {
$.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'title' : this.title,
'width' : 640,
'height' : 385,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
});
</script>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<thead>
<tr>
<td class="thead" colspan="2"><strong>Multimedia Box</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td width="50%" class="trow1" valign="top">
<div style="width:100%">
<div style="width:19%;float:left;padding:0;margin:0;border:0;"><a class="video" href="http://www.youtube.com/v/sVkODVL6PRM?fs=1&autoplay=1"><img src="https://i.ytimg.com/vi/sVkODVL6PRM/hqdefault.jpg" style="width:100%" alt="" /></a></div>
<div style="width:19%;float:left;padding:0;margin:0;border:0;"><a class="video" href="http://www.youtube.com/v/I4tFNfROlqk?fs=1&autoplay=1"><img src="https://i.ytimg.com/vi/I4tFNfROlqk/hqdefault.jpg" style="width:100%" alt="" /></a></div>
<div style="width:19%;float:left;padding:0;margin:0;border:0;"><a class="video" href="http://www.youtube.com/v/k5LY2VB3d2Q?fs=1&autoplay=1"><img src="https://i.ytimg.com/vi/k5LY2VB3d2Q/hqdefault.jpg" style="width:100%" alt="" /></a></div>
<div style="width:19%;float:left;padding:0;margin:0;border:0;"><a class="video" href="http://www.youtube.com/v/rOaw15p9Czo?fs=1&autoplay=1"><img src="https://i.ytimg.com/vi/rOaw15p9Czo/hqdefault.jpg" style="width:100%" alt="" /></a></div>
<div style="width:19%;float:left;padding:0;margin:0;border:0;"><a class="video" href="http://www.youtube.com/v/NgyXy89Rxa0?fs=1&autoplay=1"><img src="https://i.ytimg.com/vi/NgyXy89Rxa0/hqdefault.jpg" style="width:100%" alt="" /></a></div>
</div>
<div style="width:100%">
<div style="width:19%;float:left;padding:0;margin:0;border:0;"><a class="video" href="http://www.youtube.com/v/vDCdEHXaDqs?fs=1&autoplay=1"><img src="https://i.ytimg.com/vi/vDCdEHXaDqs/hqdefault.jpg" style="width:100%" alt="" /></a></div>
<div style="width:19%;float:left;padding:0;margin:0;border:0;"><a class="video" href="http://www.youtube.com/v/oxq2FYKz3vE?fs=1&autoplay=1"><img src="https://i.ytimg.com/vi/oxq2FYKz3vE/hqdefault.jpg" style="width:100%" alt="" /></a></div>
<div style="width:19%;float:left;padding:0;margin:0;border:0;"><a class="video" href="http://www.youtube.com/v/ITOEqXBRMW4?fs=1&autoplay=1"><img src="https://i.ytimg.com/vi/ITOEqXBRMW4/hqdefault.jpg" style="width:100%" alt="" /></a></div>
<div style="width:19%;float:left;padding:0;margin:0;border:0;"><a class="video" href="http://www.youtube.com/v/s9ZbCMHzc6M?fs=1&autoplay=1"><img src="https://i.ytimg.com/vi/s9ZbCMHzc6M/hqdefault.jpg" style="width:100%" alt="" /></a></div>
<div style="width:19%;float:left;padding:0;margin:0;border:0;"><a class="video" href="http://www.youtube.com/v/ewG8ql8RJM0?fs=1&autoplay=1"><img src="https://i.ytimg.com/vi/ewG8ql8RJM0/hqdefault.jpg" style="width:100%" alt="" /></a></div>
</div>
<div style="width:100%">
<div style="width:19%;float:left;padding:0;margin:0;border:0;"><a class="video" href="http://www.youtube.com/v/fA1fzeH4-08?fs=1&autoplay=1"><img src="https://i.ytimg.com/vi/fA1fzeH4-08/hqdefault.jpg" style="width:100%" alt="" /></a></div>
<div style="width:19%;float:left;padding:0;margin:0;border:0;"><a class="video" href="http://www.youtube.com/v/FgcQpy0Rnr4?fs=1&autoplay=1"><img src="https://i.ytimg.com/vi/FgcQpy0Rnr4/hqdefault.jpg" style="width:100%" alt="" /></a></div>
<div style="width:19%;float:left;padding:0;margin:0;border:0;"><a class="video" href="http://www.youtube.com/v/w3i18Jg0mgg?fs=1&autoplay=1"><img src="https://i.ytimg.com/vi/w3i18Jg0mgg/hqdefault.jpg" style="width:100%" alt="" /></a></div>
<div style="width:19%;float:left;padding:0;margin:0;border:0;"><a class="video" href="http://www.youtube.com/v/MDoiOIp2TlI?fs=1&autoplay=1"><img src="https://i.ytimg.com/vi/MDoiOIp2TlI/hqdefault.jpg" style="width:100%" alt="" /></a></div>
<div style="width:19%;float:left;padding:0;margin:0;border:0;"><a class="video" href="http://www.youtube.com/v/w2EmDtXcYH4?fs=1&autoplay=1"><img src="https://i.ytimg.com/vi/w2EmDtXcYH4/hqdefault.jpg" style="width:100%" alt="" /></a></div>
</div>
</td>
<td width="50%" class="trow1" valign="top">
<div id="banner" style="width:100%;">
<div class="item active"><img src="https://s-media-cache-ak0.pinimg.com/736x/eb/af/b9/ebafb95dfc67635a3314580bbdb43816.jpg" border="0" style="width:100%;" height="315" /></div>
<div class="item special">
<div class="content">
<h1>Slide title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec sapien nunc. Proin aliquet imperdiet felis id semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque purus tellus, iaculis id iaculis vel, tincidunt non lectus.</p>
<p>Vivamus a massa est. Nunc nulla mauris, interdum at hendrerit eget, condimentum ut orci. Pellentesque id congue eros. Suspendisse convallis nibh non lacus molestie adipiscing. Nunc vel dolor sed sem dictum tristique id quis magna. Etiam eu est nec arcu tristique fermentum.</p>
</div>
</div>
<div class="item"><img src="http://localhost/50/images/logo.png" border="0" style="width:100%;" height="315" /></div>
<div class="item"><img src="http://images.china.cn/attachement/jpg/site1003/20141031/7427ea210a2a15bd6d8001.jpg" border="0" style="width:100%;" height="315" /></div>
</div>
</td>
</tr>
</tbody>
</table><br />
<script type="text/javascript">
$(document).ready(function() {
$('#banner').slideshow();
});
</script>
Template "
headerinclude" öffnen und an letzter Stelle dies einfügen
Code:
<!-- Video -->
<link rel="stylesheet" href="fancybox/style.css" />
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<!-- Video und Slider-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<!-- Video -->
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="fancybox/video.js"></script>
<!-- Slider -->
<script src="slider/jquery.slideshow.advanced.js" type="text/javascript"></script>
Eine neue css Datei im ACP erstellen.
Name:
multimedia-box.css
Inhalt:
Code:
#banner {
margin: 0;
padding: 0;
width: 100%;
height: 315px;
overflow: hidden;
position: relative;
left: 0;
}
#banner .item {
position: absolute;
width: 100%;
height: 315px;
background-color: #fefefe;
}
#banner .active {
z-index: 7;
}
#banner .last-active {
z-index: 6;
}
#banner .navigation {
position: absolute;
bottom: 0;
margin: 0;
list-style: none;
z-index: 8;
padding: 0;
}
#banner .navigation li {
float: left;
width: 10px;
height: 10px;
background: black;
margin-left: 5px;
cursor: pointer;
}
#banner .navigation li.active {
background: red;
}
#banner .special {
background: #eee;
}
#banner .content {
padding: 20px;
text-align: center;
}
Anhang laden und entpacken, und in das MyBB Hauptverzeichnis kopieren.
So sollte es am Ende aussehen.
Multimedia Box
