Druckfunktion in Lightbox (milkbox)

Danny_54640b · 11. November 2019 um 23:09

Hallo liebe wissenden,

ich habe eine kleine website auf welcher Grafiken in einer Lightbix angezeigt werden. Die Lightbox die ich verwende ist „Milkbox“ (http://reghellin.com/milkbox/).
In dieser Lightbox würde ich gern eine Druckfunktion unterbringen…leider kann ich mit Java Script jedoch so ziehmlich nichts anfangen :-s…koennte mir also einer von euch Profies evtl. dabei behilflich sein?
In dem Milkbox code gibts eine Funktion die heisst prepareHTML:function…ich denke das der code hier hinnenin müsste, oder?
der Code der Funktion ist
prepareHTML:function(){

this.overlay = new Element(‚div‘, { ‚id‘:‚mbOverlay‘,‚styles‘:{ ‚opacity‘:0,‚visibility‘:‚visible‘,‚height‘:0,‚overflow‘:‚hidden‘ }}).inject($(document.body));

this.center = new Element(‚div‘, {‚id‘:‚mbCenter‘, ‚styles‘:{‚width‘:this.options.initialWidth,‚height‘:this.options.initialHeight,‚marginLeft‘this.options.initialWidth/2),‚opacity‘:0 }}).inject($(document.body));
this.canvas = new Element(‚div‘, {‚id‘:‚mbCanvas‘}).inject(this.center);

this.bottom = new Element(‚div‘,{‚id‘:‚mbBottom‘}).inject(this.center).setStyle(‚visibility‘,‚hidden‘);

this.navigation = new Element(‚div‘,{‚id‘:‚mbNavigation‘}).setStyle(‚visibility‘,‚hidden‘);
this.description = new Element(‚div‘,{‚id‘:‚mbDescription‘}).setStyle(‚visibility‘,‚hidden‘);

this.bottom.adopt(this.navigation, this.description, new Element(‚div‘,{‚class‘:‚mbClear‘}));

this.close = new Element(‚a‘,{‚id‘:‚mbCloseLink‘});
this.next = new Element(‚a‘,{‚id‘:‚mbNextLink‘});
this.prev = new Element(‚a‘,{‚id‘:‚mbPrevLink‘});
this.playpause = new Element(‚a‘,{‚id‘:‚mbPlayPause‘});
this.count = new Element(‚span‘,{‚id‘:‚mbCount‘});

$$(this.next, this.prev, this.count, this.playpause).setStyle(‚display‘,‚none‘);

this.navigation.adopt(this.close, this.next, this.prev, this.playpause, new Element(‚div‘,{‚class‘:‚mbClear‘}), this.count);
},
…

kann mir jemand helfen bitte…aslo es soll neben der schliessen Schaltflaeche einfach eine klein „Print“ schaltflaeche mit einem kleinen Duckersymbol sein…

ist das irgendwie machbar?

Mit freundlichen Grüssen
Danny

Nitya · 11. November 2019 um 23:09

Hallo Danny,

In dieser Lightbox würde ich gern eine Druckfunktion
unterbringen…

Und es soll wahrscheinlich nur das Bild ausgedruckt werden.
Daher muss ein neues Fenster mit diesem Image geöffnet werden. Habe dafür aber keine Optionen gefunden. (also dann selbst eine schreiben)

prepareHTML:function(){

schon richtig … da wird allerlei „zusammengetragen“ und für die Ausgabe bereitgestellt - auch mit den functionen von mootools. Also lieber erstmal nicht da „rumwerkeln“ )

Über das title-attribut geht es auch!
Also im title=„was das Drucken bewirkt“ reinschreiben.
Habe das mal mit der index.html aus dem download-Paket getestet… funktioniert prima:

Diese Funktion ist für das Öffnen und Ausdrucken zuständig:

function Drucken(){
var elem = document.getElementById(‚mbCanvas‘)
var img = elem.getElementsByTagName(‚img‘)
var bild=img[0].src
var hoehe=img[0].height
var breite=img[0].width
var fenster= window.open(bild ,‚Bildausdruck‘,‚height=‘ + hoehe + ‚,width=‘ + breite + „’“);
fenster.print()
}

und die function Drucken wird durch onclick im title-attribute aufgerufen:

h♥rzlichen Gruß
Nitya

Danny_54640b · 11. November 2019 um 23:11

Hallo Nitya,

vielen Dank für deine Antwort.
leider druckt er bei mir nur eine leere Seite mit „about:blanc“ als adresse!
ich habe das script in den Kopf gepackt

function Drucken(){
var elem = document.getElementById(‚mbCanvas‘)
var img = elem.getElementsByTagName(‚img‘)
var bild=img[0].src
var hoehe=img[0].height
var breite=img[0].width
var fenster= window.open(bild ,‚Bildausdruck‘,‚height=‘ + hoehe + ‚,width=‘ + breite + „’“);
fenster.print()
fenster.close()
}

und im Body das:
<a href="…/img/CantoDS.jpg" target="_blank" rel=„nofollow“&gt:stuck_out_tongue_winking_eye:rint</span>"><img src="…/img/colors-button.png" width=„163“ height=„52“ alt=„Details“ /></a>

aber irgendwie gehts nicht so ganz!

hast du eine Idee?

Lieben Gruss
Danny

Nitya · 11. November 2019 um 23:11

Hallo Danny,

fenster.print()
fenster.close()

print() löst ja nur den Druck-Dialog aus und bevor es zum Ausdruck kommt, ist fenster schon wieder geschlossen - also nichts zu Drucken vorhanden.

h♥rzlichen Gruß
Nitya

Danny_54640b · 11. November 2019 um 23:11

Hi Nitya,

ich habs auch ohne die close Funktion versucht!
Es geht trotzdem nicht!
Es sieht so aus als würde er die Bild Variable nicht erkennen!

Nitya · 11. November 2019 um 23:11

Hallo Danny,

wenn Du meinst, die URL wäre nicht in der var bild, dann lasse doch mal mit alert(bild) ausgeben.

Kann auch sein, dass es mit der Ladezeit zu tun hat.
Ich hatte es nur lokal getestet.

Also mal direkt ins Fenster schreiben:

function Drucken(){
var elem = document.getElementById(‚mbCanvas‘)
var img = elem.getElementsByTagName(‚img‘)
var bild=img[0].src
var hoehe=img[0].height
var breite=img[0].width
var fenster= window.open(’’ ,’’,‚height=‘ + hoehe + ‚,width=‘ + breite + „’“);
with(fenster.document) {
open();
write(’’);
write(’’);
write(’’);
close();
}
fenster.focus()
}

Print wird ausgeführt, sobald das Bild geladen ist und wenn man jetzt auf das Bild im Fenster clickt, wird das Fenster geschlosssen.

Ich habe das mit der index.html aus dem Paket getestet.
Funktioniert im FF 4 und IE 8.

h♥rzlichen Gruß
Nitya

Danny_54640b · 11. November 2019 um 23:11

Hi,

vielen Dank für deine Antwort. Ich kann’s leider erst wieder am Montag probieren! alert(bild) ist eine gute idee…

also dann schoenes Wochenende
Lieben Gruss vom Genfer See
Danny

Nitya · 11. November 2019 um 23:11

Hallo Danny,

vielen Dank für deine Antwort. Ich kann’s leider erst wieder
am Montag probieren!

wohl bekommt’s )

alert(bild) ist eine gute idee…

wenn bilde nicht die URL enhält, dann bindest Du milkbox anders ein, als diese „basic“ Möglichkeit.

Lieben Gruss vom Genfer See

die Gegend kenne ich sogar ein bißchen. War ein paar Mal in Villars zum Ski-Fahren.

h♥rzlichen Gruß aus dem Windecker Ländchen/NRW/DE
Nitya

Danny_54640b · 11. November 2019 um 23:17

alert(bild) ist eine gute idee…

wenn bilde nicht die URL enhält, dann bindest Du milkbox
anders ein, als diese „basic“ Möglichkeit.

also alert(bild) enthaelt die richtige URL…aber drucken tut er das bild nicht…nur about blank!
Ich glaube trotzdem das der „druckbefehl“ ausgeloest wird bevor das bild geladen wurde!
Gibts keine moelichkeit das solange zu verzoegern bis das fenster vollstaendig geladen ist?
Irgendwas mit …onload… oder so?
Ich habe versucht selbst was hinzubekommen aber das wird nix…

Lieben Gruss vom Genfer See

die Gegend kenne ich sogar ein bißchen. War ein paar Mal in
Villars zum Ski-Fahren.

klein ist doch die Welt

h♥rzlichen Gruß aus dem Windecker Ländchen/NRW/DE

Ich komme ursprünglich auch aus DE…aber aus einer anderen Ecke!

Nitya

Gruss
Danny

Nitya · 11. November 2019 um 23:17

Gibts keine moelichkeit das solange zu verzoegern bis das
fenster vollstaendig geladen ist?
Irgendwas mit …onload… oder so?

Hatte das auch ein bißchen getestet.
Bei einem window.onload den print() auszuführen gab beim IE Probleme.
Darum habe ich am 1.4.2011 22:05 den script gepostet, wo in das neue Fenster geschrieben wird und für das image ein onload eingerichtet wird.

Hast Du das mal getestet?

h♥rzlichen Gruß
Nitya

Danny_54640b · 11. November 2019 um 23:17

Darum habe ich am 1.4.2011 22:05 den script gepostet, wo in
das neue Fenster geschrieben wird und für das image ein onload
eingerichtet wird.

Hast Du das mal getestet?

und wie teste ich das? Ich verstehe wirklich nichts von JavaScript :-s

h♥rzlichen Gruß
Nitya

Lieben Gruss Danny

Danny_54640b · 11. November 2019 um 23:18

ahhhhh…
habe den post eben erst gesehen…wie konnte ich den denn uebersehen!
Ja so druckt er…aber nicht richtig skalliert!
ich sehe jetzt nur einen ausschnitt des Bildes!

aber soweit schon mal super
Hast du fuer die Skallierung auf A4 noch eine Idee?

Nitya · 11. November 2019 um 23:18

Hast Du das mal getestet?

und wie teste ich das? Ich verstehe wirklich nichts von
JavaScript :-s

Ich denke Du hast die Funktion Drucken() schon „eingebaut“.
Du brauchst doch nur diese Funkion „auszutauschen“ bzw. löschen und die neue einzufügen.

h♥rzlichen Gruß
Nitya
Anlage
index.html aus dem Download-Paket





Milkbox - Lightbox for Mootools 1.2
 @import url(css/default.css);
 @import url(css/main.css);
 @import url(css/milkbox/milkbox.css);/* Milkbox css */

function Drucken(){
	var elem = document.getElementById(‚mbCanvas‘)
	var img = elem.getElementsByTagName(‚img‘)
	var bild=img[0].src
	var hoehe=img[0].height
	var breite=img[0].width
	var fenster= window.open(’’ ,’’,‚height=‘ + hoehe + ‚,width=‘ + breite + „’“);
 with(fenster.document) {
 open();
 write(’<!doctype html><html><head></head><body>’);
 write(’<img src="’ + bild + ‚" onclick=„window.close()“ onload=„print()“>‘);
 write(’</body><html>’);
 close();
 }
 fenster.focus()
}









 For specs, see the Milkbox site.

Nitya · 11. November 2019 um 23:18

das hängt mit den Druckeinstellungen des Browsers zusammen.
Im FF unter Menu/Datei/Seite einrichten…

Danny_54640b · 11. November 2019 um 23:19

Hi Nitya,

danke, habs jetzt soweit hinbekommen…aber jetzt zeigt er auf dem link (nicht in der „Milkbox“) der das drucken ausloest natuerlich das Titel Tag an was mit . etwas bloed aussieht!
Kann man das irgenwie verstecken? entweder so das man garnichts sieht, oder eben etwas anderes?
lg
Danny

Nitya · 11. November 2019 um 23:19

Hallo Danny,

natuerlich das Titel Tag an was mit . etwas bloed aussieht!

Du könntest noch ein onmouseover bei dem title geändert wird in den a-tag einfügen:

Müsste funktionieren, da title-value mittels getAttribute aus dem Quelltext geholt wird.

h♥rzlichen Gruß
Nitya

Danny_54640b · 11. November 2019 um 23:19

das funktioniert…super!
Danke fuer die Hilfe

Nitya · 11. November 2019 um 23:19

gern geschehen …

h♥rzlichen Gruß
Nitya

Druckfunktion in Lightbox (milkbox)

h♥rzlichen Gruß Nitya Anlage index.html aus dem Download-Paket

h♥rzlichen Gruß
Nitya
Anlage
index.html aus dem Download-Paket