So, hier ist meine Lösung. Aber bitte vorsichtig, sie ist nicht updatesicher, das bedeutet dass du einen Teil der Änderungen (Schritt 4, 5 und 6) nach einer Aktualisierung von Contao wieder durchführen musst.
Schritt 1
Erstelle dir ein Download-Icon deiner Wahl und lege es irgendwo unter tl_files ab, z.B.
/tl_files/mediabox/mediabox-download.gif
Schritt 2
Backend > Themes > Stylesheets
Erstelle hier in deinem CSS den Style für die Darstellung des Download-Icons, z.B.
Code:
#myImageDownload
{
width:24px;
height:20px;
float:right;
display:block;
margin:0;
outline:none;
background:transparent url("tl_files/mediabox/mediabox-download.gif") no-repeat center;
}
Schritt 3
Backend > Layout > Templates: Erstelle hier das Template „moo_mediabox.tpl“ und kopiere diesen Code an den Anfang im Template:
Code:
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$down_host = window.location.hostname;
$down_URL_1 = window.location.pathname;
$down_URL_2 = '?file=';
//--><!]]>
</script>
Schritt 4
/plugins/mediabox/js/mediabox_src.js
Ändere diese Datei, das ist übersichtlicher als die komprimierte Version „mediabox.js“.
Je nach Contao-Version ist diese Mediabox-Datei aber unterschiedlich, deshalb schreibe ich hier auch etwas original Beispiel-Code (schwarz) und meine Ergänzungen (rot) sowie die ungefähren Zeilennummern, das Original war übrigens von Contao 2.9.1
etwa Zeile 37
Code:
prevLink = new Element("a", {id: "mbPrevLink", href: "#"}).addEvent("click", previous),
myImageDownload = new Element("a", {id: "myImageDownload"}),
etwa Zeile 255
Code:
function keyDown(event) {
switch(event.code) {
case 27: // Esc
case 88: // 'x'
case 67: // 'c'
close();
break;
case 37: // Left arrow
case 80: // 'p'
previous();
break;
case 39: // Right arrow
case 78: // 'n'
next();
break;
case 40: // Down arrow
case 68: // 'd'
download();
}
if (options.stopKey) { return false; };
}
Etwa Zeile 873
Code:
number.set('html', (options.showCounter && (images.length > 1)) ? options.counterText.replace(/{x}/, activeImage + 1).replace(/{y}/, images.length) : "");
$down_end = URL.substr(URL.indexOf($down_host)+$down_host.length+1);
myImageDownload.setProperty('href', $down_URL_1+$down_URL_2+$down_end).set('html', '');
Etwa Zeile 892
Code:
function download() {
window.location.href = $down_URL_1+$down_URL_2+$down_end;
}
function imageAnimate() {
fx.image.start(1);
}
Schritt 5
Die geänderte Datei „mediabox_src.js“ z.B. mit einem Komprimierungstool verkleinern und als „mediabox.js“ in das selbe Verzeichnis kopieren.
Komprimieren kannst du z.B. hier: http://www.refresh-sf.com/yui/
Schritt 6
Die nun komprimierte Datei noch mit gzip packen als „mediabox.js.gz“ wieder ins selbe Verzeichnis kopieren.
Für gzip gibt es tausend Möglichkeiten, auf meinem Mac nutze ich das Terminal mit dem Befehl „gzip mediabox.js“ (Vorsicht, löscht das Original, deshalb vorher duplizieren).
Schritt 7
Mit den obigen Anpassungen bekommst du das Download-Icon und das nötige JavaScript in die Mediabox, dass dann aber der Download wirklich funktioniert muss man die selben Bilder auf der selben Seite noch einmal mit dem Content Element „Downloads“ einbinden. Dass diese Download-Links nicht stören habe ich ihnen im Content-Element die Klasse „invisible“ zugewiesen, dann sind sie unsichtbar.
Ich hoffe ich habe hier nun alles aufgeführt was nötig ist um Bilder per Mausklick oder Tastendruck direkt aus der Mediabox runterzuladen. Ist halt nicht ganz trivial das Ganze.
Falls noch jemand einen einfacheren Weg hat, her damit 
Galerie mit Schutz und Download gesucht
Zitieren
Zitat von Andreas
Alternative Lösung
Lesezeichen