Lightbox wird nicht in Gruppe angezeigt

[Niobe]

Hallo und guten Tag,

ich habe mich beim Erstellen einer Lightbox festgefahren und wohl Fehler eingebaut. Nun bitte um Unterstützung hier im Forum bei folgendem: so sieht es aus


Mein Problem ist nun,
- die Bilder werden nebeneinander angezeigt, nicht als Gruppe, wird die "rote" Lighbox aufgerufen wird allerdings Bild 1 von 3 etc. angezeigt
- bei der Lightbox, wo muss ich die Beschreibung unter dem Bild von "Image 1 of 2" in "Bild..." ändern


Der Code sieht so aus:

<a href="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_gr.jpg" rel="lightbox[gruppe1]" title="Unter Titel"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_kl.jpg" border="0" alt="" /></a>
        
                
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_gr.jpg" rel="lightbox[gruppe2]" title="Unter Titel"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_kl.jpg" border="0" alt="" /></a>
        
                
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_gr.jpg" rel="lightbox[gruppe3]" title="Unter Titel"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_kl.jpg" border="0" alt="" /></a>
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1337-1_gr.jpg" rel="lightbox[gruppe3]" title="Alfino (m), Farbe: blau, ich bin vergeben"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1337-1_kl.jpg" border="0" alt="" /></a>
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_0988-1_gr.jpg" rel="lightbox[gruppe3]" title="Alfino (m), Farbe: blau, ich bin vergeben"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_0988-1_kl.jpg" border="0" alt="" /></a>

Vielen Dank und Gruss

//edit: Bilder rausgenommen

 

[sokie]

AW: Lightbox wird nicht in Gruppe angezeigt

Hallo Niobe,

es ist wirklich shlecht nachzuvollziehen, worum es eigentlich geht.

zunächst ist Lightbox nicht dazu gedacht, die Gruppen der Thumbnails unterschiedlich darzustellen (dafür benutzt du besser css klassen).

Screenshots helfen bei der Beschreibung nur unwesentlich weiter, ein Link zur betreffenden Seite sagt wesentlich mehr.

was die Beschreibung "Bild x von y" angeht dafür gibt es in der lightbox.js einen gesondert beschreibenen Bereich,wo das geändert werden kann.

//  Configurationl
//
LightboxOptions = Object.extend({
    fileLoadingImage:        'images/loading.gif',     
    fileBottomNavCloseImage: 'images/closelabel.gif',

    overlayOpacity: 0.8,   // controls transparency of shadow overlay

    animate: true,         // toggles resizing animations
    resizeSpeed: 7,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)

    borderSize: 10,         //if you adjust the padding in the CSS, you will need to update this variable

	// When grouping images this is used to write: Image # of #.
	// Change it for non-english localization
	labelImage: "[B][COLOR=Red]Image[/COLOR][/B]",
	labelOf: "[B][COLOR=Red]of[/COLOR][/B]"
        // kann nach "[B][COLOR=Red]Bild[/COLOR][/B]" und "[B][COLOR=Red]von[/COLOR][/B]" geändert werden
}, window.LightboxOptions || {});

// -----------------------------------------------------------------------------------

 

[Poki29]

AW: Lightbox wird nicht in Gruppe angezeigt

Hast du sowohl die Javascripts also auch die Css-Datei korrekt eingebunden und sind die auch alle vorhanden?

Poste mal den kompleten Quellcode bitte. Die Linkfetzen die ich da sehe sind auf der ersten Blick richtig.

 

[Niobe]

AW: Lightbox wird nicht in Gruppe angezeigt

Hallo Niobe,

es ist wirklich shlecht nachzuvollziehen, worum es eigentlich geht.

zunächst ist Lightbox nicht dazu gedacht, die Gruppen der Thumbnails unterschiedlich darzustellen (dafür benutzt du besser css klassen).

Screenshots helfen bei der Beschreibung nur unwesentlich weiter, ein Link zur betreffenden Seite sagt wesentlich mehr.

was die Beschreibung "Bild x von y" angeht dafür gibt es in der lightbox.js einen gesondert beschreibenen Bereich,wo das geändert werden kann.

//  Configurationl
//
LightboxOptions = Object.extend({
    fileLoadingImage:        'images/loading.gif',     
    fileBottomNavCloseImage: 'images/closelabel.gif',

    overlayOpacity: 0.8,   // controls transparency of shadow overlay

    animate: true,         // toggles resizing animations
    resizeSpeed: 7,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)

    borderSize: 10,         //if you adjust the padding in the CSS, you will need to update this variable

    // When grouping images this is used to write: Image # of #.
    // Change it for non-english localization
    labelImage: "[B][COLOR=Red]Image[/COLOR][/B]",
    labelOf: "[B][COLOR=Red]of[/COLOR][/B]"
        // kann nach "[B][COLOR=Red]Bild[/COLOR][/B]" und "[B][COLOR=Red]von[/COLOR][/B]" geändert werden
}, window.LightboxOptions || {});

// -----------------------------------------------------------------------------------

Danke für die Antworten! Die Seite steht nun auf dem Webspace hier

Ich habe den Code von einer CD aus einer Ausgabe von Fotopraxis, "Album mit Lightbox-Effekt" (so wird das beschrieben). Ich meine, dass das die Version "Lghtbox JS v2.4 von Lokesh Dhakar" ist?
Was "css klassen" kann ich nur raten, da ich kein Programmierer bin und mir das bei "try and error" selbst beigebracht habe.

Da ich das JQuery dank der Anleitung von Sokie erfolgreich eingebunden habe, wollte ich nun eine Lightbox impelmentieren.
Mir ist das zwar echt peinlich zu fragen, aber ich komme halt nicht mehr weiter.

P.S. nach der config, bzw. Beschreibungen muss ich noch suchen, das fehlt irgendwie, obwohl ich sehe wo die "next, prev etc" gif's aufgerufen werden.

 

[Steve1405]

AW: Lightbox wird nicht in Gruppe angezeigt

Mein Problem ist nun,
- die Bilder werden nebeneinander angezeigt, nicht als Gruppe, wird die "rote" Lighbox aufgerufen wird allerdings Bild 1 von 3 etc. angezeigt

Also wenn ich das Problem richtig verstanden habe, dann liegt das an den unterschiedlichen Bezeichnungen in den eckigen Klammern:

<a href="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_gr.jpg" rel="lightbox[COLOR=Red][B][gruppe1][/B][/COLOR]" title="Unter Titel"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_kl.jpg" border="0" alt="" /></a>
        
                
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_gr.jpg" rel="lightbox[B][COLOR=Red][gruppe2][/COLOR][/B]" title="Unter Titel"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_kl.jpg" border="0" alt="" /></a>
        
                
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_gr.jpg" rel="lightbox[COLOR=Red][B][gruppe3][/B][/COLOR]" title="Unter Titel"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_kl.jpg" border="0" alt="" /></a>
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1337-1_gr.jpg" rel="lightbox[B][COLOR=Red][gruppe3][/COLOR][/B]" title="Alfino (m), Farbe: blau, ich bin vergeben"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1337-1_kl.jpg" border="0" alt="" /></a>
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_0988-1_gr.jpg" rel="lightbox[B][COLOR=Red][gruppe3][/COLOR][/B]" title="Alfino (m), Farbe: blau, ich bin vergeben"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_0988-1_kl.jpg" border="0" alt="" /></a>

Wenn die alle gleich heißen also z.B. alle lightbox[gruppe1], dann könnte man alle 5 Bilder durchklicken, so wie es jetzt bei der Gruppe3 ist. Wenn du jedes Bild einzeln anzeigen willst einfach die viereckigen Klammern weglassen.

Mit der Anordung/dem Aussehen der Thumbs hat Lightbox nichts zutun.
gruß

 

[Niobe]

AW: Lightbox wird nicht in Gruppe angezeigt

Also wenn ich das Problem richtig verstanden habe, dann liegt das an den unterschiedlichen Bezeichnungen in den eckigen Klammern:

<a href="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_gr.jpg" rel="lightbox[COLOR=Red][B][gruppe1][/B][/COLOR]" title="Unter Titel"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_kl.jpg" border="0" alt="" /></a>
        
                
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_gr.jpg" rel="lightbox[B][COLOR=Red][gruppe2][/COLOR][/B]" title="Unter Titel"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_kl.jpg" border="0" alt="" /></a>
        
                
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_gr.jpg" rel="lightbox[COLOR=Red][B][gruppe3][/B][/COLOR]" title="Unter Titel"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_kl.jpg" border="0" alt="" /></a>
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1337-1_gr.jpg" rel="lightbox[B][COLOR=Red][gruppe3][/COLOR][/B]" title="Alfino (m), Farbe: blau, ich bin vergeben"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1337-1_kl.jpg" border="0" alt="" /></a>
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_0988-1_gr.jpg" rel="lightbox[B][COLOR=Red][gruppe3][/COLOR][/B]" title="Alfino (m), Farbe: blau, ich bin vergeben"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_0988-1_kl.jpg" border="0" alt="" /></a>

Wenn die alle gleich heißen also z.B. alle lightbox[gruppe1], dann könnte man alle 5 Bilder durchklicken, so wie es jetzt bei der Gruppe3 ist. Wenn du jedes Bild einzeln anzeigen willst einfach die viereckigen Klammern weglassen.

Mit der Anordung/dem Aussehen der Thumbs hat Lightbox nichts zutun.
gruß

mmh, Danke für den Tipp. Die Gruppe habe ich geändert, alle in [gruppe1]. Die Bilder werden nun von Image 1 of 6 angezeigt. Stehen aber leider immer noch alle 6 neben einander.
Es soll so aussehen, dass pro Katze eine Lightbox mit 3 Bildern angezeigt wird (deshalb dachte ich es geht mit [gruppe1] usw.
Gruss

 

[sokie]

AW: Lightbox wird nicht in Gruppe angezeigt

P.S. nach der config, bzw. Beschreibungen muss ich noch suchen, das fehlt irgendwie, obwohl ich sehe wo die "next, prev etc" gif's aufgerufen werden.

wenn du auch das lightbox 2.04 by Lokesh Dhakar verwendest findest du das script in js/lightbox.js
es ist durch gestrichelte linien in Abschnitte geteilt. der Codeblock den ich gepostet habe ist der dritte Abschnitt in dem script.

übrigens, nach deinen Bildern ist die lightbox schonmal korrekt in die Seite eingebunden (sonst würde sich die box mit dem Bild ja gar nicht öffnen).

 

[Steve1405]

AW: Lightbox wird nicht in Gruppe angezeigt

Versuchs mal so:

<a href="img_1050-1_gr.jpg" rel="lightbox[gruppe1]" title="Unter Titel"><img src="img_1050-1_kl.jpg" border="0" alt="" /></a>
<a href="bild-das-zu-katze-1-gehoert.jpg" rel="lightbox[gruppe1]"></a>

Beim 2. Link habe ich den img-Tag gelöscht, da der für das Anzeigen des Thumbs verantwortlich ist. So wie ich das verstanden habe, willst du aber nur 1 Thumb anzeigen und in der Lightbox dann 3 Bilder haben. Der 2. Link ist leer und wird dementsprechend nicht angezeigt. Die Lightbox müsste ihn aber dennoch erkennen und das Bild in der Lightbox anzeigen.

 

[Niobe]

AW: Lightbox wird nicht in Gruppe angezeigt

Also wenn ich das Problem richtig verstanden habe, dann liegt das an den unterschiedlichen Bezeichnungen in den eckigen Klammern:

<a href="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_gr.jpg" rel="lightbox[COLOR=Red][B][gruppe1][/B][/COLOR]" title="Unter Titel"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_kl.jpg" border="0" alt="" /></a>
        
                
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_gr.jpg" rel="lightbox[B][COLOR=Red][gruppe2][/COLOR][/B]" title="Unter Titel"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_kl.jpg" border="0" alt="" /></a>
        
                
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_gr.jpg" rel="lightbox[COLOR=Red][B][gruppe3][/B][/COLOR]" title="Unter Titel"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_kl.jpg" border="0" alt="" /></a>
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1337-1_gr.jpg" rel="lightbox[B][COLOR=Red][gruppe3][/COLOR][/B]" title="Alfino (m), Farbe: blau, ich bin vergeben"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1337-1_kl.jpg" border="0" alt="" /></a>
                <a href="http://www.psd-tutorials.de/modules/Forum/images/img_0988-1_gr.jpg" rel="lightbox[B][COLOR=Red][gruppe3][/COLOR][/B]" title="Alfino (m), Farbe: blau, ich bin vergeben"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_0988-1_kl.jpg" border="0" alt="" /></a>

Wenn die alle gleich heißen also z.B. alle lightbox[gruppe1], dann könnte man alle 5 Bilder durchklicken, so wie es jetzt bei der Gruppe3 ist. Wenn du jedes Bild einzeln anzeigen willst einfach die viereckigen Klammern weglassen.

Mit der Anordung/dem Aussehen der Thumbs hat Lightbox nichts zutun.
gruß

wenn du auch das lightbox 2.04 by Lokesh Dhakar verwendest findest du das script in js/lightbox.js
es ist durch gestrichelte linien in Abschnitte geteilt. der Codeblock den ich gepostet habe ist der dritte Abschnitt in dem script.

übrigens, nach deinen Bildern ist die lightbox schonmal korrekt in die Seite eingebunden (sonst würde sich die box mit dem Bild ja gar nicht öffnen).

...ja, das hast du wohl recht, aber die Bilder stehen halt nur neben einander. Ich werde wohl morgen mal einen ganz neuen Versuch starten, da ich pro Katze eine Gruppe haben will. Vielleicht habe ich was übersehen oder tatsächlich falsch gemacht?
Den Codeblock habe ich auch gefunden - Danke!

 

[Niobe]

AW: Lightbox wird nicht in Gruppe angezeigt

Versuchs mal so:

<a href="img_1050-1_gr.jpg" rel="lightbox[gruppe1]" title="Unter Titel"><img src="img_1050-1_kl.jpg" border="0" alt="" /></a>
<a href="bild-das-zu-katze-1-gehoert.jpg" rel="lightbox[gruppe1]"></a>

Beim 2. Link habe ich den img-Tag gelöscht, da der für das Anzeigen des Thumbs verantwortlich ist. So wie ich das verstanden habe, willst du aber nur 1 Thumb anzeigen und in der Lightbox dann 3 Bilder haben. Der 2. Link ist leer und wird dementsprechend nicht angezeigt. Die Lightbox müsste ihn aber dennoch erkennen und das Bild in der Lightbox anzeigen.

schade, aber das funktioniert leider auch nicht... jetzt komme ich schon etwas ins stöhnen - das kann doch nicht so schwer sein:uhm:

 

[Poki29]

AW: Lightbox wird nicht in Gruppe angezeigt

Ich verstehe dein Problem einfach nicht.. Sry

 

[Niobe]

AW: Lightbox wird nicht in Gruppe angezeigt

Ich verstehe dein Problem einfach nicht.. Sry

...wenn du dir die Mühe machen willst, hier habe ich die Seite eingestellt.

Es sollen 3 Bilder neben einander dargestellt werden, beim anklicken werden diese als Lightbox geöffnet und weitere werden gezeigt.

Gruss

 

[sokie]

AW: Lightbox wird nicht in Gruppe angezeigt

Dass Bei denVorschaubildern nur jeweils 3 nebeneinander stehen hast du ja selbst in der Hand, zB mit <br />

    <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_gr.jpg" rel="lightbox[gruppe1]" title="Unter Titel"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_kl.jpg" border="0" alt="" /></a>
    <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_gr.jpg" rel="lightbox[gruppe1]" title="Unter Titel"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_kl.jpg" border="0" alt="" /></a>                
    <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_gr.jpg" rel="lightbox[gruppe1]" title="Unter Titel"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1050-1_kl.jpg" border="0" alt="" /></a>
    <br />
    <a href="http://www.psd-tutorials.de/modules/Forum/images/img_1337-1_gr.jpg" rel="lightbox[gruppe1]" title="Alfino (m), Farbe: blau, ich bin vergeben"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_1337-1_kl.jpg" border="0" alt="" /></a>
    <a href="http://www.psd-tutorials.de/modules/Forum/images/img_0988-1_gr.jpg" rel="lightbox[gruppe1]" title="Alfino (m), Farbe: blau, ich bin vergeben"><img src="http://www.psd-tutorials.de/modules/Forum/images/img_0988-1_kl.jpg" border="0" alt="" /></a>

die Bezeichner in den eckigen Klammern lightbox[gruppex] legt nur fest, über welche Bilder nach dem Öffnen der Grossansicht mit den "zurück" und "weiter" links navigiert werden kann.

 

[Poki29]

AW: Lightbox wird nicht in Gruppe angezeigt

Wenn es drum geht 3 in eine Zeile zu machen würde ich das über eine Tabelle lösen. Bilder die zusammen angezeigt werden müssen die gleiche Gruppe haben. Möchtest du Bilder in dieser Gruppe haben die ohne die Lightbox niemand sieht so musst du das mit span und display none machen.