HTML5-Slideshow ausdrucken

Post Reply
Message
Author
User avatar
hastifranki
Posts: 259
Joined: 06. May 2006 19:58

HTML5-Slideshow ausdrucken

#1 Post by hastifranki »

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: Select all

articles {
        opacity: 1;
}
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: Select all

<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

User avatar
hastifranki
Posts: 259
Joined: 06. May 2006 19:58

#2 Post by hastifranki »

Ich glaube, ich habe eine Lösung gefunden.

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

Code: Select all

<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

Post Reply