Dowbloads (PDF) vorher anzeigen

**Barbar1902** · 30.09.2013, 10:57

Hallo zusammen

Ich habe im internen Bereich ein Downloadbereich erstellt, wo jedes Mitglied seine Musiknoten Downliaden kann.
Dies funktioniert einwandfrei. Die Frage ist nun, ob dies geht das ich, wenn ich auf die jeweilige Datei klicke, bevor der Downliad sich öffnet die datei in einer vorschau sehen kann und falls ich es doch noch downliafen möchte dies auch noch tun kann?

Gruss lukas

**marcos** · 01.10.2013, 08:47

Hallo Lukas

Was für eine Vorschau möchtest du denn? Nur eine Seite oder das ganze PDF? Das ganze PDF würde aber kaum Sinn machen, denn dann würde ja sowieso bereits der AcrobatReader aufgehen.
Du könntest z.B. ein Bild der ersten Seite erstellen. Auf dieses Bild (bzw. Thumbnail) kann man klicken und es öffnet sich eine Lightbox mit der Grossansicht. Daneben würde ich dann den Download-Button platzieren.

Eine weitere, schöne Möglichkeit wäre, dass du via JS einen Hover-Effekt auf dem Download-Link erstellst. Also wenn man über den Link fährt, wird das Bild angezeigt. Klickt man auf den Link, kann man das PDF herunterladen.

LG
Marco

**Barbar1902** · 01.10.2013, 10:29

Dangge für deine anregungen aber was ich suche ist, dass wenn ich auf den pdf Link klicke das im gleichen fenster im design integriert mit dem acrobatreader eine ansicht kommt wo man gleich ausdrucken kann und nebrn dem link der downloaf link steht.
Ich selber habe leider jaum programmier wissen, deshalb stehe ich hier an

Gruss lukas

www.barbara-club.ch

PS: zudem suche uch einen counter fürcden footer der nur eine zeile text hat ubd steht

Besucher Total: xxxx Heute: xxxx

**ciaobello** · 01.10.2013, 12:29

Hier mal eine Alternative Suchmaschine für die Erweiterung die Du suchst:
http://www.contao-pool.de/ceris.html

**marcos** · 02.10.2013, 08:41

Hallo Lukas

Dann würde ich es am besten mit iframe und JS (jQuery) lösen. Wenn man auf den Link klickt, öffnet sich das PDF unten in einem iFrame = deine Vorschau.

Zum Beispiel so:

HTML-Code:

<body>
<a href="#" class="preview test">Dokument 1</a>
<a href="#" class="preview test2">Dokument 2</a>
<br />
<iframe width="400" height="200" id="myiframe" src="dummy.pdf"></iframe>
<script>
$(document).ready(function() {
  $(".preview").click(function() {
     //Wenn die entsprechende Klasse gesetzt ist, PDF-Link im iframe ändern
    if($(this).hasClass("test"))
         $("#myiframe").attr("src", "test.pdf"); 
    if($(this).hasClass("test2"))
          $("#myiframe").attr("src", "test2.pdf");
  });
});
</script>
</body>

LG
Marco

**Barbar1902** · 02.10.2013, 19:33

Zitat von marcos

Hallo Lukas

Dann würde ich es am besten mit iframe und JS (jQuery) lösen. Wenn man auf den Link klickt, öffnet sich das PDF unten in einem iFrame = deine Vorschau.

Zum Beispiel so:

HTML-Code:

<body>
<a href="#" class="preview test">Dokument 1</a>
<a href="#" class="preview test2">Dokument 2</a>
<br />
<iframe width="400" height="200" id="myiframe" src="dummy.pdf"></iframe>
<script>
$(document).ready(function() {
  $(".preview").click(function() {
     //Wenn die entsprechende Klasse gesetzt ist, PDF-Link im iframe ändern
    if($(this).hasClass("test"))
         $("#myiframe").attr("src", "test.pdf"); 
    if($(this).hasClass("test2"))
          $("#myiframe").attr("src", "test2.pdf");
  });
});
</script>
</body>

LG
Marco

Danke Marco, nun wie isch schon erwänte ich bin nit der Programmierer aber wo muss ich nun diesen code einfügen?

**marcos** · 03.10.2013, 07:26

Zitat von Barbar1902

Danke Marco, nun wie isch schon erwänte ich bin nit der Programmierer aber wo muss ich nun diesen code einfügen?

Hallo Lukas

Ok, dann mache folgendes:

Auf der Seite, auf der die Vorschau angezeigt werden soll, erstellst du ein Inhaltselement Text und fügst dort deine Links ein. Also z.B. Dokument1, Dokument2 usw. Verlinke die jeweiligen Links via Link-Symbol. Es öffnet sich dann ja ein Fenster. Trage bei Adresse nur # ein. Bei CSS-Klasse wähle (wert) und schreibe dann preview dokument1 rein (nicht bei allen. Jeder muss ein andere Klasse haben. Also z.B. dokument1, dokument2 usw.) Du kannt auch etwas anderes anstatt das Wort dokument1 schreiben. Es muss nachher im JavaScript einfach gleich heissen. Nachdem du alle Links entsprechend verlinkt hast, speichere dieses Element.

Als nächstes würde ich unterhalb dieses Inhaltelements ein Element Typ HTML anlegen und dort folgendes eintragen:

HTML-Code:

<iframe width="600" height="800" id="myiframe" src="#"></iframe>

Hier drin werden dann deine PDFs angezeigt. Aber achtung! Damit das iframe gespeichert werden kann, musst du bei Contao unter Einstellungen > Sicherheitseinstellungen > Erlaubte HTML-Tags noch den Tag <iframe> hinzufügen.
Also so: iframe.png

Nachdem du das HTML-Element erstellt hast, gehe zur Layoutverwaltung (Themes > Seitenlayouts) und bearbeite das entsprechende Layout. Wähle unten jQuery laden.
Anschliessend bei Eigener JavaScript-Code folgendes einfügen:

HTML-Code:

<script>
$(document).ready(function() {
  $(".preview").click(function() {
     //Wenn die entsprechende Klasse gesetzt ist, PDF-Link im iframe ändern
    if($(this).hasClass("document1"))
         $("#myiframe").attr("src", "files/dokumente/meindokument1.pdf"); 
    if($(this).hasClass("document2"))
          $("#myiframe").attr("src", "files/dokumente/meindokument2.pdf");
  });
});
</script>

Hier musst du entsprechend die Werte anpassen. Also dokument1, dokument2 usw. und das dazugehörige PDF angeben.
Der Code macht eigentlich nichts anderes als zu fragen "hat der angeklickte Link die Klasse dokument1?"
Ja? > angegebenes PDF im iframe anzeigen! Nein? > nichts machen!

Du hast wahrscheinlich mehr als zwei Links. Dann einfach folgendes kopieren und unten anfügen:

HTML-Code:

if($(this).hasClass("document2"))
          $("#myiframe").attr("src", "files/dokumente/meindokument2.pdf");

Also so:

HTML-Code:

<script>
$(document).ready(function() {
  $(".preview").click(function() {
     //Wenn die entsprechende Klasse gesetzt ist, PDF-Link im iframe ändern
    if($(this).hasClass("document1"))
         $("#myiframe").attr("src", "files/dokumente/meindokument1.pdf"); 
    if($(this).hasClass("document2"))
          $("#myiframe").attr("src", "files/dokumente/meindokument2.pdf");
    if($(this).hasClass("document3"))
          $("#myiframe").attr("src", "files/dokumente/meindokument3.pdf");
    if($(this).hasClass("document4"))
          $("#myiframe").attr("src", "files/dokumente/meindokument4.pdf");
  });
});
</script>

Ich hoffe, ich konnte es dir einigermassen verständlich erklären.

LG
Marco