"Overlay"-Bildanzeige?

[tbillert]

Danke Dir, hatte ich schon probiert, bekomme ich aber nicht hin. Es gibt immer diese Fehlermeldung, siehe:

http://geojena.billert.de/index.php?pag ... neralfunde

string(142) "Smarty error: [in content:content_en line 3]: syntax error: invalid attribute name: 'thumbextra' (Smarty_Compiler.class.php, line 1550)" string(126) "Smarty error: [in content:content_en line 3]: syntax error: invalid attribute name: '=' (Smarty_Compiler.class.php, line 1550)" string(151) "Smarty error: [in content:content_en line 3]: syntax error: invalid attribute name: ''class="alignright"'' (Smarty_Compiler.class.php, line 1550)"

Das Bild ist eingebunden ueber diesen Code:

{Lytebox href='uploads/images/Karneolperle.jpg' title='Karneolperle' text='' thumbsrc='uploads/images/thumb_Karneolperle.jpg' thumbextra='class="alignright"'}

Was stimmt denn bloss da an der Syntax nicht? Die Klasse alignright ist im CSS definiert wie oben von Goran beschrieben.

Gruss,

Thomas.

[tbillert]

aaaah... Funktioniert jetzt. Schuld war dieser verdammte tinyMCE (an den ich mich noch nicht so recht gewoehnen kann), der hatte - warum auch immer - meinen nachtraeglichen Einschub im Code ("thumbextra='class="alignright"') nicht als eingefuegt. Das konnte nicht gut gehen. Erst bei Umschalten von WYSIWYG nach HTML habe ich das bemerkt.

Fazit: alle Probleme geloest! Ich danke Euch nochmal sehr!

Viele Gruesse,

Thomas.

[tbillert]

Hallo nochmal,

ich bin mit der Overlay-Bilder-Sache zwar weitergekommen, nun aber wieder an einer Stelle angekommen, wo ich graue Haare bekomme.

Zum einen klappt die Einbindung von Lytebox sehr gut, spielt sogar mit Image Captions. Jedoch gibt es zwei Nachteile:

1. Bekomme ich Lytebox-Bilder mit Captions nicht zentriert posotioniert (gilt auch fuer nicht-Lytebox-Bilder mit Captions). Siehe dazu auch:
http://forum.cmsmadesimple.org/viewtopi ... 19#p241319
Dieses Problem harrt noch seiner Loesung.

2. Laeuft Lytebox im IE 8 extrem traege. Es geht besser, wenn man den Kompatibilitaetsmodus zum IE 7 aktiviert, jedoch a) klappt das leider nicht immer - trotz entsprechendem meta-Tag im Template:

Code: Select all

<!--[if IE 8]> 
<meta http-equiv="X-UA-Compatible" content="IE=7">
<![endif]-->

und b) hat das Nebenwirkungen bei der Bilddarstellung auf anderen Seiten (letztes Bild auf http://geojena.billert.de/index.php?pag ... ossilfunde wird nicht vollstaendig angezeigt). Hier habe ich also nur die Wahl, mit der traegen Darstellung im IE 8 zu leben.

Meine Beispielseite dafuer: http://geojena.billert.de/index.php?page=testseite

Deswegen hatte ich heute das Lightbox-Modul probiert. Test unter http://geojena.billert.de/index.php?pag ... -testseite. Dieses funktioniert in Firefox und IE 8 erstmal gleich gut. Leider bekomme ich es aber nicht mit Image Captions zum Spielen (man kann dem IMG zwar ueber z.B. addtext="class="leftcaption"" eine Klasse zuweisen, das klappt hier aber nicht), und demzufolge bekomme ich die Bilder auch nicht mit Textumfluss eingebunden.

Klingt wie eine Entscheidung zwischen Sodom und Gomorrha.

Gibt es denn kein Modul fuer die Bildanzeige per Overlay, welches diese Kriterien erfuellt:

- arbeitet browseruebergreifend performant
- kommt auch mit Bildern in Unterverzeichnissen von /uploads/images/ klar
- spielt mit Image Captions (oder einer anderen Moeglichkeit, Bildunterschriften zu erzeugen)
- Bilder koennen links- und rechtsbuendig mit Textumfluss sowie zentriert positioniert werden.

Ja, man koennte so etwas sicher selber stricken, aber das uebersteigt sowohl meine Faehigkeiten als auch meine Zeit.

Fuer alle Hinweise, wie ich aus diesem Dielemma rauskommen kann, bin ich dankbar...

Viele Gruesse,

Thomas.

[uniqu3]

Hi,

zentrieren kannst du es mit einer neuen klasse.

Code: Select all

div.centeredcaption {
 margin:auto;
}

Das Lightbox-Modul mit captions nicht richtig spielt, liegt denke ich daran das Lytebox-Modul dies mit JavaScript steuert was den Lightbox-Modul fehlt. Bedeutet Du könntest versuchen das Skript selbst nach lib/jquery.js einzufügen.

Code: Select all

<__script__ type="text/javascript">
	$(window).load(function(){
		$("img.rightcaption").each(function(i) { 
			var imgwidth = $(this).width(); 
			var thetext = $(this).attr("title"); 
			$(this).wrap("<div class='captionborderright'></div>");	
			$(this).parent().width(imgwidth);     
				if ((thetext != null)&&(thetext != "")) 
				{$(this).parent().append("<p class='captiontext'>" + thetext + "</p>");}	 
			}); 
			$("img.leftcaption").each(function(i) { 
				var imgwidth = $(this).width(); 
				var thetext = $(this).attr("title"); 
				$(this).wrap("<div class='captionborderleft'></div>");	 
				$(this).parent().width(imgwidth);  
				if ((thetext != null)&&(thetext != "")) 
				{$(this).parent().append("<p class='captiontext'>" + thetext + "</p>");}	 
		});  
			$("img.caption").each(function(i) { 
				var imgwidth = $(this).width(); 
				var thetext = $(this).attr("title"); 
				$(this).wrap("<div class='captionborder'></div>");	 
				$(this).parent().width(imgwidth);  
				if ((thetext != null)&&(thetext != "")) 
				{$(this).parent().append("<p class='captiontext'>" + thetext + "</p>");}	 
		});  
	});
</__script>

Einfach übersetzt, das Skript sucht nach Bilder mit klassen caption, captionright, captionleft und fügt <div class="captionborder"> </div> und <p class='captiontext'> </p> hinzu, was für Captions sorgt.
Was dein Ordner Problem betrifft, Du könntest ebenso auf alle Module verzichten (unnötiger resourcen verbrauch) da Thumbs eh schon automatisch durch das System erstellt werden, so könntest Du einfach unter TinyMCE Einstellungen, eigene Platzhalter erstellen.
Erweiterungen -> TinyMCE -> Weitere Optionen (tab) -> Benutzerdefiniertes Listenfeld (textarea)

Code: Select all

---|---
Bild links einfügen|<a href=\"deinpfad/zum großen bild/deinbild.jpg\" rel="lytebox" title=\"Dein titel\"><img src=\"deinpfad/zum kleinen bild/thumb_bild.jpg\" title=\"dein titel\" alt=\"alternativ text\" class=\"leftcaption\" \/><\/a>
---|---
Bild rechts einfügen|<a href=\"deinpfad/zum großen bild/deinbild.jpg\" rel="lytebox" title=\"Dein titel\"><img src=\"deinpfad/zum kleinen bild/thumb_bild.jpg\" title=\"dein titel\" alt=\"alternativ text\" class=\"rightcaption\" \/><\/a>
---|---
Bild mitte einfügen|<a href=\"deinpfad/zum großen bild/deinbild.jpg\" rel="lytebox" title=\"Dein titel\"><img src=\"deinpfad/zum kleinen bild/thumb_bild.jpg\" title=\"dein titel\" alt=\"alternativ text\" class=\"centeredcaption\" \/><\/a>

Danach einfach beim Seiten bearbeiten auf "custom dropdown-menu" klicken und eine der Optionen auswählen, links und Bilder mit TinyMCE und FileManager auswählen.

Bezüglich deine IE Probleme, schau dir Fancybox an, kannst es ja mal auf der Demo Seite testen, so könntest Du stattdessen auch Fancybox verwenden http://fancybox.net/home und ein alternativ Captions jQuery plugin wäre auch http://www.gethifi.com/blog/jcaption-a- ... e-captions, beides kann ebenfalls mit "customdropdown-menu" umgesetzt werden, einfach entsprechende klassen hinzufügen.

Viel erfolg

[tbillert]

Hallo Goran,

danke fuer diese ausfuehrliche Antwort! Das ist "ne Menge Holz" und geht hart an die Grenzen meines momentanen Durchblicks, aber ich probiere das mal aus...

Das mit den custom dropdowns ist ja ne tolle Sache - genau was ich brauche. Mein Webiste-Mitbetreiber hat gar keinen Plan von HTML, da kommt sowas mehr als gelegen.

BTW, die Loesung fuer's Zentrieren funktioniert leider so einfach nicht. Siehe Testseite, Absatz "Bild mit Caption, zentriert". Das ist aber auch ein img, dem die Klasse centeredcaption zugewiesen wird (genauso wie es auch im Falle von leftcaption oder rightcaption passiert - nur wie ich schon schrieb, ich sehe nicht, wo diese Klassen definiert werden)...

Gruss,

Thomas.

[tbillert]

Hallo Goran,

ich hatte heute nun endlich wieder mal - da ich grade krank bin - etwas Ruhe, mich mit diesen Problemen auseinanderzusetzen. Fazit: Loesung gefunden. fancybox und jCaption konnte ich nach einigem Probieren gut einbinden, und damit kann man sowohl Captions, Bildausrichtung und Overlay-Anzeige steuern, ohne Ahnung von HTML zu haben - geht alles aus tinyMCE heraus (wichtig fuer meinen Website-Mitbetreiber). Auch zentrieren klappt nun, dafuer hat jCaption eine Option, die Klasse des Bildes fuer das Wrapper-div zu uebernehmen. jCaption und fancybox kommen wunderbar miteinander klar - und ich konnte heute einige Module und Stylesheets loeschen, die ich nicht mehr benoetige.

Danke fuer die Tips!

Gruss,

Thomas.

[Hmelk]

Hallo.

Ich habe das ähnliche Problem. Es klappt mit den Bildunterschriften, aber ich kriege die Bilder nicht links, rechts oder zentriert.
Könntest Du das genau erklären, wie Du das mit Fancybox hin bekommen hast?
Ich nutze das jquery und die image caption.
Bei mir landen die Bilder immer links bzw. zentriert, aber erst durch das JS.
Klingt ein wenig doof, was ich da schreibe, war ja schon froh, dass Bildbeschreibung endlich geklappt hat.
Gruß

Hmelk

[tbillert]

Hallo Hmelk,

hm, en Detail kriege ich das jetzt aus dem Kopf nicht mehr hin. Es war aber relativ simpel. Jedenfalls kann ich das Placement der Bilder jetzt vom tinyMCE aus steuern - das einzige, was nicht geht, sind mehrere Bilder nebeneinander mit Captions und das ganze zentriert. Kann man aber auch drauf verzichten.

Ich hatte damals viel im deutschen Forum gepostet, siehe:

http://forum.cmsmadesimple.de/search.ph ... ser_id=110

Meine Site ist http://geojena.billert.de, da kannst Du ja die von mit verwendeten Scripts und CSS einsehen.

Ich hoffe, das hilft Dir fuer's erste - bei Detailfragen muss ich nachsehen, das ist alles schon fast 3 Monate her und bekomme die Probleme + Loesungen nicht mehr aus dem Kopf zusammen...

Gruss,

Thomas.

[Hmelk]

Danke.
Was mir aber auch fehlt, ein todo wie ich die Fancybox installiere und einbinde.
Hat da wer dazu einen Link?

Gruß

Hmelk

[tbillert]

Das habe ich analog

http://www.fancybox.net/howto

gemacht. Ich erinnere mich, dass ich das binnen eines Vormittags fertig und am Laufen hatte.

Jetzt laeuft das so: Bilder, die mit Fancybox verknuepft sind, sind Links vom Thumb auf's grosse Bild (kann man mit tinyMCE ganz einfach anlegen), dort in den Eigenschaften des Links kann ich auswaehlen, dass es sich um einen Fancybox-Overlay handelt, dann wird das rel entsprechend gesetzt. Wie ich genau dies hinbekommen hatte - keine Ahnung mehr...

Gruss,

Thomas.

[Hmelk]

Hallo.

Habe nun:
<__script__ type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jq ... "></__script>

<__script__ type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></__script>

und

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

nach dem header vom Template eingefügt.

und was muss ich dann machen?

[tbillert]

Schoen. Du hast die Scripts auch da liegen, wo die Pfade hinzeigen?

Ich habe mal versucht zu rekonstruieren, wie es dann bei mir weiterging. Keine Garantie auf Vollstaendigkeit...

- schau unter Erweiterungen -> tinyMCE -> Erweiterungen, ob das Plugin "advlink" installiert und aktiv ist. Wenn nicht, dies tun.

- Such dann das File "link.html" in modules/TinyMCE/tinymce/jscripts/tiny_mce/plugins/advlink. Dort um Zeile 200 herum findest Du einen solchen Block, bitte entsprechend meiner Vorlage aendern:

Code: Select all

					<tr>
							<td><label id="rellabel" for="rel">{#advlink_dlg.rel}</label></td>
							<td><select id="rel" name="rel"> 
									<option value="">{#not_set}</option> 
									<option value="overlay">Overlay</option> 
<!--									<option value="lightbox">Lightbox</option> 
									<option value="alternate">Alternate</option> 
									<option value="designates">Designates</option> 
									<option value="stylesheet">Stylesheet</option> 
									<option value="start">Start</option> 
									<option value="next">Next</option> 
									<option value="prev">Prev</option> 
									<option value="contents">Contents</option> 
									<option value="index">Index</option> 
									<option value="glossary">Glossary</option> 
									<option value="copyright">Copyright</option> 
									<option value="chapter">Chapter</option> 
									<option value="subsection">Subsection</option> 
									<option value="appendix">Appendix</option> 
									<option value="help">Help</option> 
									<option value="bookmark">Bookmark</option>
									<option value="nofollow">No Follow</option>
									<option value="tag">Tag</option> -->
								</select> 
							</td>
						</tr>

Dieses File steuert den erweiterten Link-Dialog in tinyMCE. In meinem Snippet oben wird eine Option "Overlay" angegeben, alle anderen sind auskommentiert. Damit bekommst Du im Link-Dialog unter "Erweitert" -> Beziehung der Seite zum Linkziel" nur noch die Option "Overlay". Damit legst Du fest, dass der Link fancybox oeffnet, diese Option pappt ein rel="overlay" an den Link.

Ich weiss jetzt nicht mehr genau, wo das "xyz" festgelegt wird, damit ein Link mit rel="xyz" grade fancybox aktiviert - dazu muesstest Du nochmal die Hilfeseiten zu Fancybox durchschauen.

Um ein Bild mit Fancybox zu oeffen, dessen Thumbnail also einfach mittels tinyMCE in die Seite einfuegen und einen Link auf die grosse Version setzen, dann in den Eigenschaften des Links unter "Erweitert -> Beziehung der Seite zum Linkziel" einfach "Overlay" auswaehlen, fertig. Zumindest geht das so bei mir.

Viel Erfolg!

Gruss,

Thomas.