MyBB.de Forum
Multimedia Box - Druckversion

+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Plugin-Diskussionen (https://www.mybb.de/forum/forum-38.html)
+--- Thema: Multimedia Box (/thread-34534.html)

Seiten: Seiten: 1 2


RE: Multimedia Box - Erkan - 17.04.2017

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


RE: Multimedia Box - MrBrechreiz - 17.04.2017

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.
   


RE: Multimedia Box - Erkan - 17.04.2017

man erkennt nicht viel und du hast nicht viel geschrieben, ist das Bild oder Video? kannst du noch einen einen Screenshot ohne popup machen.


RE: Multimedia Box - MrBrechreiz - 17.04.2017

Hier ohne PopUp


RE: Multimedia Box - Erkan - 17.04.2017

Danke ,sieht sehr gut aus Cool
also links sind Videos und rechts Bilder Slider richtig?
werde es morgen testen Danke sehr Rolleyes


RE: Multimedia Box - MrBrechreiz - 17.04.2017

Ja richtig erkannt.


RE: Multimedia Box - Erkan - 23.04.2017

@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


RE: Multimedia Box - Jockl - 23.04.2017

Suche nach Templates und deren Inhalt


RE: Multimedia Box - Erkan - 23.04.2017

@MrBrechreiz..... &.... @òóGlubscher

Danke sieht sehr gut aus Cool