Nextgen Gallery - Bilder nicht zentriert

hilfe...

ich versuche auch seit Tagen eine Möglichkeit zu finden, meine Slideshows/ Nextgen zu zentrieren. Sämtliche Versuche die Css anzupassen oder aber im Artikel, wo die Galerie laufen soll... mit codes zu arbeiten, hat nichts gebracht. Ich bin am verzweifeln. Ausserdem rückt sich jede Galerie bei mir beim starten automatisch um einige pixel nach links und zieht dadurch das ganze layout um diese pixel nach links... bitte. kann mir jemand helfen!!!!!

Ich häng mich da einfach mal mit dran. Meine Bilder werden alle linksbündig angezeigt, was ich nicht möchte. Ich möchte eine zentrierte Darstellung. Weiß jemand, wie das geht?

Edit: Ich kann nicht gut genug Englisch und hab vor allem kaum Ahnung vom Programmieren, aber dies scheint eine Lösung zu sein. Vielleicht kann jemand sagen, wie und wo man das umsetzen muss.

Ich habe das selbe Problem. Komisch, dass so eine Kleinigkeit noch nicht gelöst wurde.

Wenn hier mal die Adresse einer zu ändernden Seite genannt wird, kann auch geholfen werden. Die Anordnung von Bildern wird i.d.R. in den css-Dateien geregelt. Die finden sich im Theme- oder im NGG-Ordner, je nach dem wie sie eingefügt werden.

Zitat von bgeissler

Wenn hier mal die Adresse einer zu ändernden Seite genannt wird, kann auch geholfen werden. Die Anordnung von Bildern wird i.d.R. in den css-Dateien geregelt. Die finden sich im Theme- oder im NGG-Ordner, je nach dem wie sie eingefügt werden.

Achso, sorry. Na klar können wir gern am konkreten Beispiel die Sache verfolgen.
Hier der Link

Wie gut zu erkennen ist richten sich die Bilder weder auf der Seite mittig aus noch zueinander. Ich konnte wenigstens einen kleinen Kompromiss finden, indem ich die Galerie links ausrichten lasse (float) und die Bilder selbst rechtsbündig. Zufriedenstellend ist das jedoch nicht. In beiden Fällen wäre mittig super, idealerweise sogar die vertikale Ausrichtung mittig wäre... (mir fehlen die Worte) :D, aber das ist dann doch bestimmt zu viel gewollt ;).

Du hast eine feste Contentbreite in px. Also würde ich die thumbnailgröße so wählen, dass sie alle in gleicher Breite sind und die gesamte Contentbreite ausfüllen. Dann brauchst du dich nicht um die Ausrichtung zu kümmern.
Contentbreite durch 6 Spalten= thumbnailbreite incl. Rand

Außerdem würde ich den thumbnails formatunabhängig immer die gleiche Breite geben, das kann bei der thumnailerstellung gewählt werden. Ein thumbnail muss ja nicht das Originalformat darstellen. So wie die Seite jetzt aussieht wirkt sie sehr unruhig.

Also ich habe das jetzt mal probiert. So richtig in die Mitte bekomme ich es immer noch nicht und so das Optimum ist es auch noch nicht. Alle Bilder auf ein festes Format zu trimmen hatte ich am Anfang probiert. Das ist keine Option, da viele Fotos dabei ihren Charakter verlieren und es dazu noch eine menge Arbeit macht bei jedem einzelnen Foto die Thumbs anzupassen.

Also ich bin nach wie vor interessiert an einer gescheiten zentrierten Ausrichtung.

Dann machen wir es anders herum und passen die Gesamtbreite an die thumbnailbreite an:
in der nggallery.css ändern (rot):

Zitat

.ngg-galleryoverview {
overflow: hidden;
margin-top: 10px;
[COLOR=Red]width: 880px;[/COLOR]
clear:both;
display:block !important;
}

Alles anzeigen

Spitze, auf der Seite ist es jetzt perfekt mittig *hüpf* :D

Gibt es jetzt noch eine Möglichkeit die Bildchen selber zu zentrieren, horizontal und vertikal? Das ist zwar jetzt nur noch ein ästhetisches Detail, aber das Auge ließt ja mit ;) *lol*

Das liegt jetzt an den verschiedenen Formaten der thumbnails.

Ist das nicht wie eine Tabelle aufgebaut, in der man die Ausrichtung der Zellen definieren kann?

Nein. Das ist mit float ausgerichtet und da alle thumbnails automatisch innerhalb einer Box nach rechts ausgerichtet werden, gibt es diese Lücken.

Ok, center als Befehl gibt es da nicht, sonst hätte das schon jemand geschrieben. Hmm...

Dann wird es wohl so bleiben müssen. Alle Bilder auf die Gleiche Breite zu bringen ist auch ungünstig, da manche Fotos dann winzig sind durch Querformat und andere riesig. Das es da keine Möglichkeit geben soll finde ich erstaunlich, aber ich bin ja auch kein Programmierexperte, eher Leihe ;).

Auf jeden Fall vielen Dank für den Tipp mit der Breite, das hilft schon mal kräftig ;)

Hier hab ich das gemacht, kannst dir ja mal anschauen
http://birgarolsen.com/blog/

Zitat von pauernet

Hier hab ich das gemacht, kannst dir ja mal anschauen
http://birgarolsen.com/blog/

Schön Aufnahmen :)

Wie hast du das mit dem zentrieren hinbekommen? genau so hatte ich mir das vorgestellt, nur kleiner eben ;).

Ich habe auch ein "spezielles" Zentrierungsproblem, und hoffe, dass mir hier geholfen wird. :smile:

Ich bekomme es nicht hin, daß das Thumpnail und auch das nachfolgende große Bild in NextGen Gallery zentriert dargestellt werden.

Beschreibung Thumpnail:
Meine Besonderheit liegt darin, daß nur das erste Thumpnail einer Galerie angezeigt wird (werden soll) damit der Überraschungseffekt größer ist wenn der Betrachter das nächste Bild sich anzeigen läßt (Klar, ein Klick auf die Navigation, dann hat man auch eine Voransicht).
Link zur Ansicht

Beschreibung großes Bild:
Alle Bilder haben eine feste Breite von 600 Pixeln.
Da die Bilder nicht skaliert werden sollen, sondern 1:1 angezeigt werden sollen, habe ich die Bildbreite (Image browser style) auf 600 Pixel fest definiert.
Link zur Ansicht

Leider habe ich (und auch mein Bekannter der die Grundkonfiguration der Seite gemacht hat) bisher vergebends versucht weder das eine noch das andere zu zentrieren.

NGG Version 1.8.2
Black_Minimalism.css

Hier die Einträge der css für die Thumpnails

/* ----------- Gallery style -------------*/


.ngg-galleryoverview {
    overflow: hidden;
    margin-top: 10px;
    width: 100%;
    clear:both; 
    display:block !important;
}


.ngg-gallery-thumbnail-box {
    float: left;
    width: 20%;
}


.ngg-gallery-thumbnail {
    float: left; 
    background: url(shadowAlpha.png) no-repeat bottom right !important;
    background: url(shadow.gif) no-repeat bottom right;
    margin: 10px 0 0 10px !important;
}


.ngg-gallery-thumbnail img {
    margin: -6px 6px 6px -6px;
    background-color:#FFFFFF;
    border:1px solid #A9A9A9;
    display:block; 
    padding:4px;
    position:relative;
}


.ngg-gallery-thumbnail img:hover {
    background-color: #A9A9A9;
} 


.ngg-gallery-thumbnail span {
    /* Images description */
    font-size:90%;
    padding-left:5px;
    display:block;
}


.ngg-clear {
    clear: both;
}

Und hier die Einträge für das große Bild

/* ----------- Image browser style -------------*/


.ngg-imagebrowser {
    
}


.ngg-imagebrowser h3 {
    text-align:center;
}


.ngg-imagebrowser img {
    border:1px solid #A9A9A9;
    margin-top: 10 px; 
    margin-bottom: 10 px;
    width: 600 px;
    display:block !important;
    padding:5px;
}


.ngg-imagebrowser-nav {
    padding:5px;
    margin-left:10px;    
}


.ngg-imagebrowser-nav .back {
    float:left;
    border:1px solid #DDDDDD;
    margin-right:3px;
    padding:3px 7px;
}


.ngg-imagebrowser-nav .next {
    float:right;
    border:1px solid #DDDDDD;
    margin-right:3px;
    padding:3px 7px;
}


.ngg-imagebrowser-nav .counter {
    text-align:center;
    font-size:0.9em !important;
}


.exif-data {
      margin-left: auto !important;
    margin-right: auto !important;    
}

Hoffe, mir kann geholfen werden.
Danke schon mal im Vorraus.

Gruß Frank

Da #wrapper in der style.css eine feste Breite von 940px hat kannst du mit einem festen margin in der black_minimalism.css arbeiten:
thumbnail:

Zitat

.ngg-gallery-thumbnail-box {
float: left;
width: 20%;
[COLOR=Red]margin-left:400px;[/COLOR]
}

Bild:

Zitat

.ngg-imagebrowser img {
border:1px solid #A9A9A9;
margin-top: 10 px;
margin-bottom: 10 px;
width: 600 px;
display:block !important;
padding:5px;
[COLOR=Red]margin-left:150px;[/COLOR]
}

Alles anzeigen

Vielen herzlichen Dank, hat nach dem zweiten Anlauf geklappt.

Mein Fehler waren die Leerzeichen wegen der Optik.

...so hat es nicht geklappt

[COLOR=Red]margin-left: 400 px;[/COLOR]

...aber so wie du es geschrieben hast, hat es geklappt...

[COLOR=Red]margin-left:400px;[/COLOR]

Warum werden bei manchen Befehlen die Leerzeichen akzeptiert, und bei anderen nicht???
(Fragen über Fragen).
...deshalb hatte es bei mir auch bisher nicht geklappt.

Vielen herzlichen Dank für die superschnelle Hilfe.

Bin jetzt glücklich
Frank