Einzelnen Bilder beim Anklicken vergrößert darstellen

Sonne · 21. Juni 2011 13:24

Hallo,
ich würde gerne ein einzelnen normal eingebundenes Bild in Großansicht anzeigen lassen, wenn ich es anklicke, ohne extra das Galeriemodul hierfür zu verwenden. Gibt es hierfür irgendeine Alternativ-Möglichkeit?

nockenfell · 21. Juni 2011 21:51

Es gibt verschiedene Möglichkeiten. Eine Möglichkeit dazu ist Autolightbox:
http://www.cmsmadesimple.de/forum/viewtopic.php?id=296

die konvensionelle Methode die ich meistens einsetze:

Binde jQuery und die jQueryLightbox in deiner Webseite ein.
www.jquery.com
http://leandrovieira.com/projects/jquery/lightbox/

Danach baue folgendes JavaScript ein:

Hier klicken, um den Code zum Kopieren zu markieren

[== JavaScript ==]
jQuery(function($) {
    $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png'], a[href$='.JPG'], a[href$='.JPEG'], a[href$='.GIF'], a[href$='.PNG']").attr( {rel: "page"}).lightBox();
});

Nun lade 2 Bilder hoch, ein Thumbnail und ein grosses Bild das in der Lightbox angezeigt werden soll. Das Thumbnail fügst du auf deiner Seite ein. Das Thumbnail verlinkst du mit den grossen Bild.
jQuery fügt nun die Lightbox dem Link an.

Natürlich kannst du das auch mit einem anderen Lightbox Plugin machen. Der Code ist jeweils grösstenteils ähnlich.

Sonne · 22. Juni 2011 20:50

... also ich habe es selber hingekriegt. Hier wie es geht:
TinyMCE verwenden, Bild einfügen und dann einen Link auf das Bild sezten. Im Link-Menü Pop-up auswählen, Bildadresse und Größe angeben und fertig.

Sunnyday · 01. März 2012 11:07

Hallo Community, nockenfell
ich möchte gerne meine Seiten mit Lightbox-Effekt versehen, wo man beim Anklicken eines Vorschaubildes ein größeres Bild zu sehen hat.
Ich habe gegooglet und bin hier gelandet.
Ich hab mir wie beschrieben den jQuery lightBox plugin gedownloadet und im Verzeichnis uploads reinkopiert.
Anschließen habe ich den eingegebenen Code in Template im head-Bereich zugefügt:

Hier klicken, um den Code zum Kopieren zu markieren

jQuery(function($) {
    $("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png'], a[href$='.JPG'], a[href$='.JPEG'], a[href$='.GIF'], a[href$='.PNG']").attr( {rel: "page"}).lightBox();
});

Meihn Problem:

Das verlinkte Vorschaubild auf der Seite zeigt kein Lightbox-Effekt!
Kann mir bitte Jemand erklären, was ich falsch gemacht habe.
Oder gibt es einen anderen Weg dies zu realisieren?

Gruss
Sunnyday

nockenfell · 01. März 2012 11:29

Hast du mir eine URL deiner Seite wo ich das ganze anschauen kann? Wahrscheinlich fehlt das eine oder andere.

NaN · 01. März 2012 12:19

Ich hab mir wie beschrieben den jQuery lightBox plugin gedownloadet und im Verzeichnis uploads reinkopiert.
Anschließen habe ich den eingegebenen Code in Template im head-Bereich zugefügt:

Ich vermisse hier zwei wesentliche Dinge:
1. Wo ist jQuery?
2. Sind sowohl jQuery als auch jQuery Lightbox im Head-Bereich des Templates eingefügt worden?

Klenkes · 01. März 2012 12:53

Wenn das CSS der Lightbox fehlt, geht's auch nicht.

nockenfell · 01. März 2012 13:12

Ich kann nochmals auf meinen Blogartikel dazu verweisen:
http://www.blattertech.ch/blog/23/Autolightbox.htm

Sunnyday · 01. März 2012 19:50

Hallo miteinander,
zunächst vielen Dank für eure Antworten.
Ich teste gerade alles im Moment auf meinem XAMPP, deshalb kann ich leider hier keinen Link posten.
Diese Prozedur mit Autolightbox ist mir zu kompliziert.

Ich habe inzwischen einen anderen Weg geschlagen.
Ich habe mir Lightbox runtergeladen und in Verzeichnis uploads kopiert und dann habe ich den Code:

Hier klicken, um den Code zum Kopieren zu markieren

<link rel="stylesheet" type="text/css" href="{root_url}/uploads/lightbox/jquery.lightbox.css" />
<script type="text/javascript" src="{root_url}/uploads/lightbox/jquery.js"></script>
<script type="text/javascript" src="{root_url}/uploads/lightbox/jquery.lightbox-de.js"></script>

ins Template eingegeben.
Nun funktioniert Lightbox-Effekt ganz gut. smile
Nur ein kleines Problem zu lösen übrig bleibt, nämlich, dass das Kreuz SchließenX, der Bildtitel und Pfeil weiter und Zurück beim vergrößerten Bild nicht sichtbar ist.
Gibt es eine Möglichkeit dieses Problem auch zu beheben?

Schöner Gruß
sunnyday

Beitrag geändert von Sunnyday (01. März 2012 19:53)

nockenfell · 01. März 2012 22:56

Das sind Grafiken. Hast du diese Dateien? Wenn ja, musst du im Stylesheet allenfalls den Pfad zu den Dateien anpassen.

Sunnyday · 02. März 2012 10:14

Hallo nockenfell,
Ich habe die Datei jquery.lightbox.css vom Lightbox in Editor DW. bearbeitet. Es ist mir gelungen nur das Bild Close zum Vorschein zu bringen, naja immerhin. wink
Den Lightbox-Effekt auf einer Seite zu erstellen hätte ich mir mit wenig Handgriffe und viel einfacher vorgestellt.
Besten Dank für deine Hilfe.
Gruss
sunnyday

nockenfell · 02. März 2012 10:27

Sunnyday schrieb:

Den Lightbox-Effekt auf einer Seite zu erstellen hätte ich mir mit wenig Handgriffe und viel einfacher vorgestellt.

Wenn die Grundlagen stimmen, ist das ganze sehr einfach. Wenn aber ein Pfad nicht stimmt, eine Grafik nicht vorhanden ist, etc. braucht das ganze natürlich länger und ist aufwändiger in der Fehlersuche.

Forum für CMS/made simple

#1 21. Juni 2011 13:24

Einzelnen Bilder beim Anklicken vergrößert darstellen

#2 21. Juni 2011 21:51

Re: Einzelnen Bilder beim Anklicken vergrößert darstellen

#3 22. Juni 2011 20:50

Re: Einzelnen Bilder beim Anklicken vergrößert darstellen

#4 01. März 2012 11:07

Re: Einzelnen Bilder beim Anklicken vergrößert darstellen

#5 01. März 2012 11:29

Re: Einzelnen Bilder beim Anklicken vergrößert darstellen

#6 01. März 2012 12:19

Re: Einzelnen Bilder beim Anklicken vergrößert darstellen

#7 01. März 2012 12:53

Re: Einzelnen Bilder beim Anklicken vergrößert darstellen

#8 01. März 2012 13:12

Re: Einzelnen Bilder beim Anklicken vergrößert darstellen

#9 01. März 2012 19:50

Re: Einzelnen Bilder beim Anklicken vergrößert darstellen

#10 01. März 2012 22:56

Re: Einzelnen Bilder beim Anklicken vergrößert darstellen

#11 02. März 2012 10:14

Re: Einzelnen Bilder beim Anklicken vergrößert darstellen

#12 02. März 2012 10:27

Re: Einzelnen Bilder beim Anklicken vergrößert darstellen

Fußzeile des Forums