MyBB.de Forum

Normale Version: Multimedia Box
Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
Seiten: 1 2
Ich habe eine idee weis aber nicht ob es schon so etwas gibt.

Ähnlich wie hier über dem Forum "Übersicht" aber eine Multimedia Box ,soll über dem Forum erscheinen.

Ich habe eine Illustration gemacht wie aussehen könnte mit,

-YouTube Video zum einbetten
und einem
-Bild Slider drin

.....gibt es schon so was ? ansonsten nach Wunsch Plugin verschieben Cool 

siehe Illustration im Anhang.
Vielleicht ist ja die ezGallery etwas für Dich oder dieses Plugin von MrBrechreiz:
https://www.mybb.de/erweiterungen/18x/pl...lideshow2/
ja das von Bilderslideshow kommt sehr nah, wen man nur noch Youtube video einbetten könnte und das in einer Box ähnlich wie in Illustration dann sieht es im Header nicht zerstreut aus. Cool
Hier eine Möglichkeit von mir, ohne Plugin.

Öffne im ACP das Globale Templates und erstelle eine neues Template.

Name: multimedia_box

Inhalt:
Code:
<style type="text/css">
#banner {
    margin-top:10px;
    width:560px;
    height:315px;
    overflow:hidden;
    position:relative;
}

#banner .item {
    position:absolute;
    width:560px;
    height:315px;
}

#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;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="./jquery.slideshow.advanced.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
            $('#banner').slideshow();
        });
</script>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
    <tr>
        <td class="thead" colspan="2"><strong>Multimedia Box</strong></td>
    </tr>
    <tr>
        <td width="50%" class="trow1" valign="top">
            <iframe width="560" height="315" src="https://www.youtube.com/embed/I4tFNfROlqk" frameborder="0" allowfullscreen></iframe>
        </td>
        <td width="50%" class="trow1" valign="top">
            <div id="banner">
        <div class="item active trow1"><img src="https://s-media-cache-ak0.pinimg.com/736x/eb/af/b9/ebafb95dfc67635a3314580bbdb43816.jpg" border="0" width="560" height="315" /></div>
        <div class="item special trow1">
            <div class="content trow1">
                <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 trow1"><img src="http://localhost/50/images/logo.png" border="0" width="560" height="315" /></div>
        <div class="item trow1"><img src="http://images.china.cn/attachement/jpg/site1003/20141031/7427ea210a2a15bd6d8001.jpg" border="0" width="560" height="315" /></div>
    </div>
        </td>
    </tr>
</table><br />

Hier die benötigen jscripts laden.
https://github.com/etiennetremel/jQuery-...-Slideshow

Die Datei "jquery.slideshow.advanced.min.js" in dein Rootverzeichnis vom MyBB laden.

Im Template Index Page Templates->index trägst Du diese Variable

Code:
{$multimedia_box}

vor

Code:
{$forums}

ein, oder an anderer Stelle im index Template.

Öffne nun die index.php und Suche nach

PHP-Code:
eval('$index = "'.$templates->get('index').'";'); 

darüber dies einfügen.

PHP-Code:
eval('$multimedia_box = "'.$templates->get('multimedia_box').'";'); 
Danke, werde morgen testen und berichten Cool
MrBrechreiz hat ja schon mal gute Vorarbeit geleistet. Hier eine zweite Variante diese ist vom Gedanken genauso aufgebaut wie die von MrBrechreiz aber benutzt einen anderen Slider und Youtube Code.

Dieser Slider Erlaubt bei jedem Bild eine Beschreibung und eine Verlinkung zu hinterlegen.
Der Youtube Code Benutzt anstatt iframe wird object verwendet. Die Filmchen sollten automatisch in HD (falls die Internet Geschwindigkeit es zu lässt) abgespielt werden.

Öffne im ACP das Globale Templates und erstelle eine neues Template.

Mit dem Namen: multimedia_box

Code:
<style type="text/css">
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }

.cs-buttons { font-size: 0px; padding: 10px; float: left; }
.cs-buttons a { margin-left: 5px; height: 10px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF; text-indent: -1000px; }
.cs-active { background-color: #B8C4CF; color: #FFFFFF; }

.cs-title { width: 545px; padding: 10px; background-color: #000000; color: #FFFFFF; }

.cs-prev,
.cs-next { background-color: #000000; color: #FFFFFF; padding: 0px 10px; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="./coin-slider.min.js" type="text/javascript"></script>

   <script type="text/javascript">
     $(document).ready(function() {
       $('#coin-slider').coinslider({ width: 560, height: 315, navigation: false, delay: 5000 });
     });
   </script>

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
   <tr>
       <td class="thead" colspan="2"><strong>Multimedia Box</strong></td>
   </tr>
   <tr>
       <td width="50%" class="trow1" valign="top" align="center">
<object width="560" height="315">
<param name="movie" value="https://www.youtube.com/v/I4tFNfROlqk?hl=de_DE&vq=hd720&amp;version=3&amp;rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
 <embed src="https://www.youtube.com/v/I4tFNfROlqk?hl=de_DE&vq=hd720&amp;version=3&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
       </td>
       <td width="50%" class="trow1" valign="top" align="center">
<div id='coin-slider'>
<!-- Slider 1 Start -->
<a href="img01_url" target="_blank"><img src='uploads/multimediabox/helene001.jpg' >
        <span>
          Description for img01
        </span>
</a>
<!-- Slider 1 Ende -->
<!-- Slider 2 Start -->
<a href="img01_url" target="_blank"><img src='uploads/multimediabox/helene002.jpg' >
        <span>
          Description for img01
        </span>
</a>
<!-- Slider 2 Ende -->
</div>
       </td>
   </tr>
</table><br />

Die benötigen JS Datei hier laden: http://workshop.rs/2010/04/coin-slider-i...ue-effects

Aus dem Paket wird nur die coin-slider.min.js benötigt diese ladet ihr in euer Rootverzeichnis hoch.

Im Template Index Page Templates->index trägt Ihr diese Variable:

Code:
{$multimedia_box}

vor

Code:
{$forums}

ein, oder an anderer Stelle im index Template.

Öffne nun die index.php und Suche nach:

PHP-Code:
eval('$index = "'.$templates->get('index').'";'); 

füge DARÜBER ein:

PHP-Code:
eval('$multimedia_box = "'.$templates->get('multimedia_box').'";'); 

erstellt nun im Ordner uploads den Ordner multimediabox und ladet dort eure Bilder hoch.

Sollte dann so aussehen:
[attachment=11474]

Handhabung:

Youtube Filmchen ändern suche 2 mal im Template multimedia_boxx nach: youtube.com/v/I4tFNfROlqk? und ändere den Rot Markierten Teil.


Slider weitere Optionen zum Ausbau:

   spw: 7, // squares per width
   sph: 5, // squares per height
   sDelay: 30, // delay beetwen squares in ms
   opacity: 0.7, // opacity of title and navigation
   titleSpeed: 500, // speed of title appereance in ms
   effect: '', // random, swirl, rain, straight
   navigation: true, // prev next and buttons
   links : true, // show images as links
   hoverPause: true // pause on hover

Eine weitere Funktion hinzufügen suche im Template multimedia_box nach:

navigation: false, füge dahinter z.B.: ein hoverPause: true,
Danke Glubscher, werde ich auch testen,
Die Multimedia Box'en sehen so gut aus verstehe nicht warum ihr sie nicht gleich als Plugin erstellt  Cool Rolleyes 
wo man im AC nur die Bilder und Video einbetten braucht oder Links einfügt.
Mit Plugins erstellen wie beschrieben ist so eine Sache, denn meistens stellt sich heraus, dass das Plugin nicht dem genügt was der Fragesteller wollte, weil er es nicht richtig beschrieben hat und es meistens anders meint als er schreibt. Daher in erster Linie der Hardcode. Danach kann noch immer ein Plugin erstellt werden.
@ MrBrechreiz
Mir geht es darum einen saubere Bedienung über AC fälsche ohne in den Quellcode einzugreifen,
also wie bei deinem Bilderslideshow wo man nur noch Links einfügen muss.

Aber jetzt habe ich die Anleitung von @Glubscher benutzt und es sieht so aus siehe unten Bild.
musste nur die Breite anpassen.

Vielleicht machst du Bilderslideshow V3 mit diesen erweiterungen Cool scheint beliebt zu sein Downloads: 189
mit der neuen Bilderslideshow wehre es die Neue Version Version Multimedia Box V3 Wink
Ich sehe in einem Plugin im mom keinen Sinn. Warum? Es wäre nur was für denjenigen der auch wirklich beides in einem haben möchte. Doch viele möchten das eben nicht also müsste man einen ein/aus Button für die Box Youtube/Slider mit einbauen kein Problem !aber! nun ist der Slider oder Youtube Zentriert alleine zusehen.

Wollen wir mal ehrlich sein wie beknackt sieht dann so eine Multimedia Box aus wenn man eine Style mit 1000px und breiter hat wenn der Zentrierte teil 500px ist und man Links und Rechts je 250px Luft hat?

Das nächste was du ja schon selber gemerkt hast das man an die Höhe und Breite eh noch Hand anlegen muss das hat auch mit den einzelnen Style breiten zu tun. Bei den Youtube Videos ist da noch ein Harken wenn das Video zu klein ist hat man schwarze Balken oben/unten/recht oder links am Rand das ist auch nicht gerade schön.

Dann Lieber so wie jetzt im Template Rumpfuschen ist meine Meinung.
Seiten: 1 2