Gallerie-Thumbs ohne Abstand zwischen den Bildern?

IngoRichter

Hallo zusammen

ich benutze derzeit die NextGen Gallerie. Diese gefällt mir von der Handhabung u.s.w. sehr gut.

Allerdings hätte ich gern eine Gallerie bei der die Thumbnails ohne Abstand zwischen den Thumbnails angezeigt werden.
Gibt es so etwas?

Oder anders ausgedrückt, passende Thumbnails zu meiner Startseite:
http://www.manufaktur-richter.de

(seite momentan im aufbau und nur für meine fragen hier sind fremde Bilder u.s.w. online.)

Danke im voraus
Gruß
Ingo

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Tutrix

jeweils das rote entfernen

wp-content/plugins/nextgen-gallery/css/Black_Minimalism.css ab Zeile 112

CSS

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


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


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

Alles anzeigen

IngoRichter

Hat perfekt geklappt! Vielen vielen Dank!

IngoRichter

Ich habe nun doch noch eine weiterführende Frage:

Es trat doch ein Problem bei der zuvor gegebenen Antwort auf:
Die Lücken und Rahmen zwischen den Bildern sind zwar verschwunden, allerdings sind die jeweils nachfolgenden Thumbnails ein paar Pixel zu weit links. Also wird immer ein kleiner teil rechts pro Thumbnail überdeckt.
Siehe auch folgendes Beispiel auf meiner Seite. Vor allem in Verbindung mit dem in richtiger Breite integrierten Youtube video fällt es auf. Und auch in beim letzten Bild der Thumbnails.

http://www.manufaktur-richter.de/?page_id=289

Ich habe schon einiges in dem Black_Minimalism.css rumprobiert. Aber ich finde den Fehler nicht.

Hier der komplette Code des Black_Minimalism.css:

PHP

/*
CSS Name: Black Minimalism Theme
Description: For Black Minimalism Theme 
Author: Alex Rabe
Version: 1.60
 
This is a template stylesheet that can be used with NextGEN Gallery. I tested the
styles with a default theme Kubrick. Modify it when your theme struggle with it,
it's only a template design
*/
/* ----------- Album Styles Extend -------------*/
.ngg-albumoverview {
 margin-top: 10px;
 width: 100%;
 clear:both; 
 display:block !important;
}
.ngg-album {
 /*height: 130px;*/
 overflow:hidden;
 padding: 5px;
 margin-bottom: 5px;
 border: 1px solid #cccccc;
}
.ngg-albumtitle {
 text-align: left;
  font-weight: bold;
 margin:0px;
 padding:0px;
 font-size: 1.4em;
 margin-bottom: 10px;
}
.ngg-thumbnail {
 float: left;
 margin: 0pt !important;
 margin-right: 12px !important;
}
.ngg-thumbnail img {
 background-color:#FFFFFF;
 border:1px solid #A9A9A9;
 margin:4px 0px 4px 5px;
 padding:4px;
 position:relative;
}
.ngg-thumbnail img:hover {
 background-color: #A9A9A9;
}
.ngg-description {
 text-align: left;
}
/* ----------- Album Styles Compact -------------*/
.ngg-album-compact {
 float:left;
 height:180px;
 padding-right:6px !important;
 margin:0px !important; 
 text-align:left;
 width:120px; 
}
.ngg-album-compactbox {
 background:transparent url(albumset.gif) no-repeat scroll 0%;
 height:86px;
 margin:0pt 0pt 6px !important;
 padding:12px 0pt 0pt 7px !important;
 width:120px;
}
 
.ngg-album-compactbox .Thumb {
 border:1px solid #000000;
 margin:0px !important;
 padding:0px !important;
 width:91px; 
 height:68px;
}
.ngg-album-compact h4 {
 font-size:15px;
 font-weight:bold;
 margin-bottom:0px;
 margin-top:0px;
 width:110px;
}
.ngg-album-compact p {
 font-size:11px;
 margin-top:2px;
}
/* ----------- Gallery style -------------*/
.ngg-galleryoverview {
 overflow: hidden;
 margin-top: 10px;
 width: 100%;
 clear:both; 
 display:block !important;
}
.ngg-gallery-thumbnail-box {
 float: left;
 
}
.ngg-gallery-thumbnail {
 float: left; 
  url
  url
 
}
.ngg-gallery-thumbnail img {
 margin: 0px 0px 0px 0px;
 display:block; 
 
 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;
}
/* ----------- Gallery navigation -------------*/
.ngg-navigation {
 font-size:0.9em !important;
 clear:both !important;
 display:block !important;
 padding-top:15px;
 text-align:center;
}
.ngg-navigation span {
 font-weight:bold;
 margin:0pt 6px;
}
.ngg-navigation a.page-numbers,
.ngg-navigation a.next,
.ngg-navigation a.prev, 
.ngg-navigation span.page-numbers,
.ngg-navigation span.next,
.ngg-navigation span.prev {
 border:1px solid #660000;
 margin-right:3px;
 padding:3px 7px;
}
.ngg-navigation a.page-numbers:hover,
.ngg-navigation a.next:hover,
.ngg-navigation a.prev:hover, 
.ngg-navigation span.page-numbers:hover,
.ngg-navigation span.next:hover,
.ngg-navigation span.prev:hover {
 background-color: #660000;
 color: #FFFFFF;
 text-decoration: none;
}
/* ----------- Image browser style -------------*/
.ngg-imagebrowser {
 
}
.ngg-imagebrowser h3 {
 text-align:center;
}
.ngg-imagebrowser img {
 border:1px solid #A9A9A9;
 margin-top: 10px; 
 margin-bottom: 10px; 
 width: 100%;
 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; 
}
/* ----------- Slideshow -------------*/
.slideshow {
 margin-left: auto; 
 margin-right: auto;
 text-align:center;
 outline: none; 
}
.slideshowlink {
 
}
/* ----------- JS Slideshow -------------*/
.ngg-slideshow {
    overflow:hidden;
    position: relative;
}
.ngg-slideshow * {
    vertical-align:middle;
}
/* See also : http://www.brunildo.org/test/img_center.html */
.ngg-slideshow-loader{
    display: table-cell;
    text-align: center;
    vertical-align:middle;
}
.ngg-slideshow-loader img{
    background: none !important; 
    border: 0 none !important;
    margin:auto !important; 
}
/* ----------- Single picture -------------*/
.ngg-singlepic {
 display:block;  
 padding:4px;
}
.ngg-left {
 float: left;
 margin-right:10px;
}
.ngg-right {
 float: right;
 margin-left:10px;
}
.ngg-center {
   margin-left: auto !important;
    margin-right: auto !important;
}
/* ----------- Sidebar widget -------------*/
.ngg-widget,
.ngg-widget-slideshow {
 overflow: hidden;
 margin:0pt;
 padding:5px 0px 0px 0pt;
}
.ngg-widget img {
 border:2px solid #A9A9A9;
 margin:0pt 2px 2px 0px; 
 padding:1px; 
}
/* ----------- Related images -------------*/
.ngg-related-gallery {
 background:#F9F9F9;
 border:1px solid #E0E0E0;
 overflow:hidden;
 margin-bottom:1em;
 margin-top:1em;
 padding:5px;
}
.ngg-related-gallery img {
 border: 1px solid #DDDDDD;
 float: left;
 margin: 0pt 2px;
 padding: 2px;
 height: 50px;
 width:  50px;
}
.ngg-related-gallery img:hover {
 border: 1px solid #000000;
} 
/* ----------- Gallery list -------------*/
.ngg-galleryoverview ul li:before {
 content: '' !important;
}
.ngg-gallery-list {
 list-style-type:none;
 padding: 0px !important;
 text-indent:0px !important; 
}
.ngg-galleryoverview div.pic img{
 width: 100%; 
}
.ngg-gallery-list li {
 float:left;
 margin:0 2px 0px 2px !important;
 overflow:hidden;
}
.ngg-gallery-list li a {
 border:1px solid #CCCCCC;
 display:block;
 padding:2px;
}
.ngg-gallery-list li.selected a{
 -moz-background-clip:border;
 -moz-background-inline-policy:continuous;
 -moz-background-origin:padding;
 background:#000000 none repeat scroll 0 0;
}
.ngg-gallery-list li img {
 height:40px;
 width:40px; 
}
li.ngg-next, li.ngg-prev {
 height:40px;
 width:40px; 
 font-size:3.5em;
}
li.ngg-next a, li.ngg-prev a  {
 padding-top: 10px;
 border: none;
 text-decoration: none;
}

Alles anzeigen

Ich schätze mal dass irgendwo nur ein "margin" o.ä. entfernt werden muss.
Kann mir jemand weiterhelfen?

vielen Dank
Ingo

Tutrix

das liegt an dem inline style [COLOR="Red"]width:16%;[/COLOR] der Box

Code

<div id="ngg-image-32" class="ngg-gallery-thumbnail-box" style="width:16%;">

IngoRichter

vielen Dank für deine Hilfe.

Ich bin leider erst heute dazu gekommen mich damit zu beschäftigen.

Ich habe die genannte Zeile im Quellcode meiner Seite gefunden. Jedoch weiß ich nun nicht, und finde nichts, wo ich es ändern könnte.
Muss ich dann die Prozentangabe ändern?

Bei manchen meiner Seiten würde es ja gar nicht so sehr stören. Aber wenn beispielsweise ein Video in der richtigen Breite eingebettet ist, fällt es natürlich sehr auf dass die Breite nicht stimmt.
Als Beispielseite:
[COLOR=#0066cc]http://www.manufaktur-richter.de/?page_id=891[/COLOR]

[COLOR=#0066cc][/COLOR]
Ich würde mich nochmals über Hilfe freuen.

Tutrix

Ich verwende die NextGen-Gallery nicht, daher weiß ich auch nicht ob die 16% generiert werden oder ob das ein fester Wert in einer PHP-Datei ist.
Die Gallery hat ja sicher Einstellungen für die Thumbnails, vielleicht kann man dort den Wert ändern oder statt %.... Pixel angeben.

zur Not kannst du versuchen den Inline-Style mit !important zu überschreiben.
Black_Minimalism.css Zeile 112

CSS

.ngg-gallery-thumbnail-box {
    float: left;
    [COLOR="Red"]width: 158px !important;[/COLOR]
}

sofern deine Thumbs immer 158Pixel Breite haben

IngoRichter

Ich hab deinen zweiten Tipp angewandt - klappt perfekt! vielen Dank!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Gallerie-Thumbs ohne Abstand zwischen den Bildern?

Jetzt mitmachen!