HTML5-Slideshow ausdrucken

Nachricht

hastifranki · #1 Beitrag von **hastifranki** » 01. Mai 2012 19:50

Hallo,

ich versuche mich gerade etwas in HTML5 und JS einzuarbeiten.

Nach folgender Vorgabe habe ich eine Slideshow erstellt:

www.youtube.com/watch?v=R4G_IygDK3Y&fea ... EVXC4R6VNo

Über position: relativ oder position: absolut habe ich Bilder und Texte (article) übereinander angeordnet.

Mit Hilfe von Java Script wird opacity verändert.

Für den Druck habe ich die Datei druck.css mit folgendem Inhalt angelegt:

Code: Alles auswählen

articles &#123;
        opacity&#58; 1;
&#125;

Wenn die Seite längere Zeit geöffnet ist und ich im Browser auf die Druckvorschau gehe, sind nur das erste und das gereade gezeigte Bild mit Text zu sehen. Nach dem Betätigen der Tastenkombination STRG+R im Browser werden alle Bilder mit Text in der Druckvorschau angezeigt.

Vielleicht kann man folgendes Script noch so anpassen, damit opacity nur für screen verändert wird und für print auf 1 stehen bleibt:

Code: Alles auswählen

<script type="text/javascript">
var articles = document.getElementById&#40;"overview"&#41;.querySelectorAll&#40;"article"&#41;, a = 0, l = articles.length;
            var slideshow = setInterval&#40;function&#40;&#41; &#123;
                for&#40;var i=&#40;l-1&#41;; i>0; i--&#41; &#123;
                    if&#40;i==a&#41; &#123;
                        articles&#91;i&#93;.style.opacity = 1;
                    &#125; else &#123;
                        articles&#91;i&#93;.style.opacity = 0;
                    &#125;
                &#125;
                if&#40;a==&#40;l-1&#41;&#41; &#123;
                    a=0;
                &#125; else &#123;
                    a++;
                &#125;
            &#125;, 8000&#41;;
</script>

Einen Link auf der Seite, über den die druckbare Version ausgegeben wird, möchte ich vermeiden.

Über Hinweise, wie man alle Bilder und Texte der Slideshow untereinander im Browser ausgedrucken kann, würde ich mich freuen.

Viele Grüße
Frank

hastifranki · #2 Beitrag von **hastifranki** » 02. Mai 2012 8:46

Ich glaube, ich habe eine Lösung gefunden.

Folgenden Tag habe ich verändert: <body onbeforeprint="drucken()" >

Code: Alles auswählen

<script type="text/javascript">
				var articles = document.getElementById&#40;"overview"&#41;.querySelectorAll&#40;"article"&#41;, l = articles.length, a=l;
				function drucken&#40;&#41;&#123;
					for &#40;var i=1; i<l; i++&#41; &#123;
                    		articles&#91;i&#93;.style.opacity = 1;
                    	&#125;
				&#125;				
            var slideshow = setInterval&#40;function&#40;&#41; &#123;
                if&#40;a==1&#41; &#123;
                    	a=l;
                    	for &#40;var i=1; i<l; i++&#41; &#123;
                    		articles&#91;i&#93;.style.opacity = 1;
                    	&#125;
                &#125; else &#123;                		
                   	a--;
                   	articles&#91;a&#93;.style.opacity = 0;
                &#125;
            &#125;, 5000&#41;;
</script>

Mit Firefox 12 funktioniert es.

Viele Grüße
Frank