MyBB.de Forum

Normale Version: Multimedia Box
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Seiten: 1 2
Naja es gibt schon Bildslider wo auch das Video mit wie ein Bild geslidet wird,

wegen Style Maße von Multimedia Box, man kann es auch Responsive erstellen so das es sich Automatisch an die Maße anpasst,

..und der Name sagt schon eigentlich alles, Multimedia Box, also es wird gezielt für bestimmte Zwecke eingesetzt, bei mir ist es Info Video, Live-stream von YouTube, und etwas Werbung,

Das ganze wirkt wie ein Info-Pinnwand Cool 

weil die Info wand ständig Aktualisiert wird ist es sinnvoller über eine Grafische oberflächliche im AC zu Bedienen. Rolleyes
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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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&amp;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.
[attachment=11478]
man erkennt nicht viel und du hast nicht viel geschrieben, ist das Bild oder Video? kannst du noch einen einen Screenshot ohne popup machen.
Hier ohne PopUp
Danke ,sieht sehr gut aus Cool
also links sind Videos und rechts Bilder Slider richtig?
werde es morgen testen Danke sehr Rolleyes
Ja richtig erkannt.
@MrBrechreiz

Zitat:Template "headerinclude" öffnen und an letzter Stelle dies einfügen

Bin gerade dabei, aber wo ist headerinclude? Sad

EDIT: ok hat sich erledigt Cool
@MrBrechreiz..... &.... @òóGlubscher

Danke sieht sehr gut aus Cool
Seiten: 1 2