CMS Made Simple Forums

Ich suche für folgende Situation eine einfache Lösung:
Der Kunde will ein Vorschaubild einfügen. Daneben soll entsprechender Text stehen. Am einfachsten wäre das mit einer Tabelle.
Auf Klick soll das Bild groß erscheinen und sich wieder schließen lassen(ähnlich wie beim Album-Modul).

Ich habe nicht mal ansatzweise einen Plan, wie ich das umsetzen kann. Evtl. brauche ich aber auch nur einen Stubser in die richtige Richtung.
Das Ganze muss für den Kunden als Editor einfach zu bewerkstelligen sein. Hat jemand evtl. einen Tip?

Gruß Wurst

Auf die Schnelle fällt mir da nur der Hinweis auf jQuerry ein.
Du müsstest nur die entsprechende jQuerry libary im Template einbinden und der Editor müsste dem Bild eine entsprechende Klasse und eine ID geben.
Mehr fällt mir dazu leider erstmal nicht ein, da ich mich selber noch nicht eingehend genug mit jQuerry beschäftigt habe.

Eine einfachere aber unschöne Variante wäre, das Vorschaubild mit dem Bild zu verlinken und im neuen Fenster oder als PopUp öffnen zu lassen.
Das sollte jeder Editor hinbekommen.

Erst mal Danke für die rasche Antwort.

...und der Editor müsste dem Bild eine entsprechende Klasse und eine ID geben

Zu kompliziert.

Das Vorschaubild mit dem eigentlich Bild zu verlinken war auch meine erste Idee, aber selbst das wäre für den nicht einfach und wie Du schon richtig bemerkt hast eher unschön.

jQuerry sagt mir gar nix, werde es mir aber mal anschauen.

Nachtrag:
jQuery kannste ich dich schon.
Pretty Photo wäre wohl das Richtige dafür. Mal sehen, ob ich damit was anfangen kann.

Gesucht, gefunden:
http://plugins.jquery.com/project/uBox








$(function(){
$(".uBox").uBox();
});

uBox
































[/quote]
In der css ist nur der Hintergrund definiert. Das Script easing.js ist nicht nötig.
Jemand eine Idee?

Im Prinzip ist das genau das, was ich Dir schon gesagt habe.
Ein ähnliches Beispiel findet sich auch hier:

http://colorpowered.com/colorbox/

Ein Tutorial für CMSms hat Sonja hier bereitgestellt:

http://www.icms.info/tutorial/design/colorbox

Diese Idee gefällt mir besser als uBox, da bei uBox die Bilder alle in ihrer vollen Größe geladen und per Javascript nur skaliert werden.
Bei Colorbox werden nur die Thumbs geladen und erst beim Klick werden per Ajax dann die großen Bilder geladen.


Bei uBox fügst Du einfach nur die Bilder in den Content ein und gibst ihnen eine Klasse.
In dem Falle ist es "uBox".
Den Rest erledigt jQuery.
Hab mich die letzten Tage mit jQuery angefreundet.
Ich finds genial.

Wichtig sind die Scripte im Head Deines Templates.
Besonders das Kleine am Ende:
Damit wird jedem Element der Klasse "uBox" die Funktion "uBox()" zugewiesen.
Und die macht dann halt das, was Du in der Demo siehst.

Um dem Editor zu ersparen, dass er jedem Bild selber eine Klasse zuweisen soll, kannst Du das kleine Script im Head auch so anpassen:
Somit wird die Funktion allen Bildern zugewiesen.

Wenn Du Deinen Inhalt in einen Extra DIV mit einer bestimmten ID einkapselst (z.B. {content}), dann kannst Du mit jQuery so ziemlich genau bestimmen auf welche Bilder das alles passen soll:
Somit wird die Funktion nur Bildern im Element mit der ID "content" zugewiesen.

Du merkst warscheinlich schon, dass man bei der Zuweisung von jQuery Funktionen einen ähnlichen Syntax verwendet wie bei Stylesheets.
So hätte z.B. folgendes Stylesheet ebenfalls nur Auswirkungen auf Bilder im Content-DIV:
Wenn man jQuery einmal verstanden hat, wird man es lieben.

Danke für Deine ausführliche Antwort! Werde mir noch mal Colorbox anschauen.