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&version=3&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&version=3&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:
vor
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:
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,
Multimedia Box
