Elegantes Javascript Popup

[Neofred]

Hallo zusammen.

Ich bin auf ein schönes Javascript gestolpert (Im Forum von Tiny) und wüsste gerne, ob das vielleicht schon jemand in das Contenido integriert hat. Zu finden ist es hier.
Ein Problem ist auch die Mehrsprachigkeit. Wäre schön, wenn sich das jemand anschauen und seine Meinung kundtun könnte. Das wäre genau das, was ich schon seit langem suche.
Danke im Voraus.

[xmurrix]

Hallo Neofred,

die Integration des Lightbox JS in Contenido ist kein Problem.
Du packst die JS-Dateien und die CSS in den Header-Bereich deines Layouts. Diese Dateien sind natürlich vorher im Mandantenverzeichnis abzulegen.
Die Image-Tags müssen folgende Konvention haben:

Code: Alles auswählen

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Das Attribut rel="lightbox" sorgt dafür dass nur Bilder mit dieser Angabe von der Lightbox gehandelt weden.
Das Attribut title="my caption" wird dann von der Lightbox für die Erstellung der Beschreibung hergenommen. Da man ja in Contenido diese Bildbeschreibung in jeder Sprache definieren kann, ist der Mehrsprachigkeit auch möglich.

Gruß
xmurrix

P.S.: Die Lightbox JS v2.0 verwende ich auf meiner Seite www.purc.de unter Referenzen, ist ein nettes Feature

[Neofred]

Supertipp, danke.

Aber wie sag ich's meinen Autoren??? Gibt es eine Möglichkeit im Tiny auszuwählen, ob das Bild das rel= hat oder nicht.
Vielleicht so ähnlich, wie ich es mit css-Stilen mache, in einem Pulldown.
Kann man rel= ähnlich wie eine class definieren, so dass es im Tiny angezeigt wird? Das Problem ist nähmlich, wenn man im Tiny den Link ändern will, sagen wir um den Titel zu ergänzen, dann ist das rel= Attribut auch wieder weg.

[xmurrix]

Hallo,

um das Attribut rel in Anker über Tiny zu lösen, ist schon etwas arbeit an den Tiny-Sourcen nötig. Du kannst aber dem Anker über Tiny eine CSS-Klasse zuweisen, und in der Datei lightbox.js die Zeile:

Code: Alles auswählen

var relAttribute = String(anchor.getAttribute('rel'));

gegen

Code: Alles auswählen

var relAttribute = String(anchor.getAttribute('class'));

ersetzen.

Dann die folgenden Zeilen:

Code: Alles auswählen

			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
				anchor.onclick = function () {myLightbox.start(this); return false;}
			}

gegen

Code: Alles auswählen

			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('myclassname'))){
				anchor.onclick = function () {myLightbox.start(this); return false;}
			}

ersetzen, wobei dann 'myclassname', die über Tiny angegebene CSS-Klasse für den Anker ist. Getestet habe ich es jetzt nicht, müsste aber so funzen...

Gruß
xmurrix

P.S.: Es wird an anderen Stellen auch mit dem 'rel'-Attribut gearbeitet, auch diese Bereiche mal unter die Lupe nehmen und anpassen.

[Neofred]

Hallo xmurrix,

sorry, dass ich so blöd frage , aber reicht es in der css die class so zu notieren:

Code: Alles auswählen

a.myclass{}

oder muss ich noch mehr angeben?
Ich sitz grad ein wenig auf der Leitung Mit dem rel= hat's so schön geklappt. Aber ich kann nicht verlagen, dass andere im html-code rumwühlen müssen.

[xmurrix]

... reicht es in der css die class so zu notieren:

Code: Alles auswählen

a.myclass{}

oder muss ich noch mehr angeben?

Nein, Lightbox muss ja wissen, welche Anker zum Handling der "Popups" verwendet werden sollen. Durch die alleinige Angabe der Klassendefinition in der CSS bringst du Lightbox nicht dazu...
Mach mal folgendes in der Datei 'lightbox.js':
Zeilen

Code: Alles auswählen

			var relAttribute = String(anchor.getAttribute('rel'));
			
			// use the string.match() method to catch 'lightbox' references in the rel attribute
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
				anchor.onclick = function () {myLightbox.start(this); return false;}
			}

ersetzen gegen

Code: Alles auswählen

			var relAttribute = String(anchor.getAttribute('class'));
			
			// use the string.match() method to catch 'lightbox' references in the rel attribute
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('myclass'))){
				anchor.onclick = function () {myLightbox.start(this); return false;}
			}

und Zeilen

Code: Alles auswählen

		// if image is NOT part of a set..
		if((imageLink.getAttribute('rel') == 'lightbox')){
			// add single image to imageArray
			imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));			
		} else {

ersetzen gegen

Code: Alles auswählen

		// if image is NOT part of a set..
		if((imageLink.toLowerCase().match('myclass'))){
			// add single image to imageArray
			imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));			
		} else {

Dann sollte es mit

Code: Alles auswählen

<a href="images/image-1.jpg" class="myclass" title="my caption">image #1</a>

klappen...

Gruß
xmurrix

[Neofred]

Hallo xmurrix,

vielleicht liegt's daran, dass es Freitag Nachmittag ist...

Ich hab also eine jungfreuliche lightbox.js genommen und nur Deine letzten Änderungen vom letzten Post eingetragen. Aber es funktioniert nicht
Ich habe folgenden href:

Code: Alles auswählen

<a target="_self" class="myclass" href="upload/bilder/vollbild.jpg"><img width="250" height="169" border="0" src="upload/bilder/thumbnail.jpg" /></a>

Das ist das, was der TinyMCE anbietet. In dem Script ist noch ein Punkt mit 'rel'

Code: Alles auswählen

// loop through anchors, find other images in set, and add them to imageArray
			for (var i=0; i<anchors.length; i++){
				var anchor = anchors[i];
				if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
					imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
				}

ist der auch wichtig?

P.S.: Bin ich eigentlich der einzige, der sowas braucht?!? Oder wie macht der Rest der Comunity Vorschaubildchen im Text mit Zoomfunktion bei Klick?

[xmurrix]

Ja, es liegt wohl am Freitagnachmittag, habe hier falschen Code gepostet...
Wenn man über DOM auf das class-Attribut zugreifen will, so geht das nicht mit element.getAttribute('class'), sondern mit element.getAttribute('className').

Habe mal die Lightbox inkl. der Anpassung für Tiny (Steuerung über class anstelle über rel) zum Download abgelegt:
lightbox_2.02_mp.rar

Mit dieser Version funzt es bei einem Bild. Bildersets müssten auch laufen, hier wird wohl die Angabe von "myclass-a", "myclass-b", usw. ausreichen.
Was nicht geht, ist die Verwendung mehrerer Bildersets auf einer Seite. Dafür ist die lightbox.js so zu ändern, dass es mit mehreren Klassenbezeichnungen arbeitet.

Gruß
xmurrix

[Neofred]

Vielen Dank xmurrix für Deinen Download. Im IE 6 futzt es echt gut, aber leider nicht in meinem Lieblingsbrowser Firefox (1.5.0.6).
Ich geh' jetzt eine Runde heulen...

[xmurrix]

Vielen Dank xmurrix für Deinen Download. Im IE 6 futzt es echt gut, aber leider nicht in meinem Lieblingsbrowser Firefox (1.5.0.6).
Ich geh' jetzt eine Runde heulen...

Habe es angepasst und online gestellt. Einfach nochmal downloaden.
Nun sollte mit den gängigsten modernen Browsern funktionieren. Beim Lesen des class-Attributes muss man bei IE anders verfahren als bei Firefox, Opera, usw... (siehe http://burstproject.org/tests/testbrowser/style.html).

Gruß
xmurrix

[KreativeStube.de]

hallo xmurrix,

hast du vielleicht noch nen tipp an was es liegen kann wenn der tiny ständig das rel="lightbox" oder das " class="myclass" verschluckt. ich nutze die neueste contenido version.

vg,
marco

[xmurrix]

Hallo,

hallo xmurrix,

hast du vielleicht noch nen tipp an was es liegen kann wenn der tiny ständig das rel="lightbox" oder das " class="myclass" verschluckt. ich nutze die neueste contenido version.

vg,
marco

es wird sehr wahrscheinlich an den Tiny-Einstellungen liegen. Überprüfe, ob in Mandanteneinstellungen folgende Variablen vorhanden sind, und welche Werte die haben:

Code: Alles auswählen

Typ     Name                              Wert
----------------------------------------------
wysiwyg tinymce-extended-valid-elements   *[*]
wysiwyg tinymce-valid-elements            *[*]

Wenn nicht, kannst du dann diese Variablen dort anlegen. Wenn du bei beiden *[*] angibst, lässt Tiny alles durch. Kann halt ein Problem bei Usern werden, die nicht wissen was sie tun.

Alternativ kannst du z. B. nur folgendes eingeben:

Code: Alles auswählen

Typ     Name                              Wert
----------------------------------------------
wysiwyg tinymce-valid-elements            a[class|rel]

Dann sollte Tiny bei Anker die Attribute "class" und "rel" nicht entfernen.

Gruß
xmurrix

[KreativeStube.de]

Dann sollte Tiny bei Anker die Attribute "class" und "rel" nicht entfernen.

hey das klappt! vielen vielen dank! ich wäre da nie drauf gekommen!

[HerrB]

Dann möchte ich Dich auf den Bereich Tipps &Tricks V4.6.x hinweisen... vielleicht finden sich da noch andere schöne Tipps.

Gruß
HerrB