NextGEN Thumbails verzerrt

austinat

Hallo Leute,

ich möchte gerne bei einer Gallery ( http://haberpointner.at/haberpointner/…bum=1&gallery=2 ) das mir die Vorschaubilder als ganzes angezeigt werden und dabei das Seitenverhältnis berücksichtigt wird. Derzeit ist es so, dass die Bilder immer im gleichen Format 100x75 angezeigt werden. Die Bilder sollten so wie auf dieser Seite angezeigt werden ( http://haberpointner.at/haberpointner/works-and-projects/ ) und das nebeneinander. Ich hoffe, ihr versteht was ich meine.

Danke
Andi

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

würde dann so aussehen, siehe Bild

bist du sicher das du dies willst

Tutrix

hab mal was getestet, was deiner Vorstellung nahe kommt

wp-content/plugins/nextgen-gallery/css/nggallery.css (Zeile 132)

Code

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

ändern in

Code

.ngg-gallery-thumbnail-box {
        display: inline-block;
}

wp-content/plugins/nextgen-gallery/css/nggallery.css (Zeile 136)

Code

.ngg-gallery-thumbnail {
	float: left;
	margin-right: 5px;
	text-align: center;
}

ändern in

Code

.ngg-gallery-thumbnail {
        float: left;
        margin-right: 15px;
        text-align: center;
}

wp-content/plugins/nextgen-gallery/css/nggallery.css (Zeile 142)

Code

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

ändern in

Code

.ngg-gallery-thumbnail img {
         background-color: #EDEBE1;
         border: 1px solid #A9A9A9;
         display: block;
         height: 100%;
         margin: 4px 0 4px 5px;
         padding: 4px;
         position: relative;
         width: 100%;
}

austinat

art of pic, danke für den Tipp, der hat zu 100% gepasst :-) Danke, bin echt darüber froh. Kann ich die Änderungen bei dieser Seite auch anwenden? http://haberpointner.at/haberpointner/works-and-projects/

dabei handelt es sich um die Albumansicht compact.

Danke

Tutrix

Zitat von austinat

Kann ich die Änderungen bei dieser Seite auch anwenden?

das sind andere Codestellen

wp-content/plugins/nextgen-gallery/css/nggallery.css ( Zeile 77 )

CSS

.ngg-album-compact {
	float:left;
	height:180px;
	padding-right:6px !important;
	margin:0px !important; 
	text-align:left;
	width:120px;	
}

ändern in

CSS

.ngg-album-compact {
    display: inline-block;
    margin: 0 15px 0 0 !important;
    padding-right: 6px !important;
    text-align: left;
}

wp-content/plugins/nextgen-gallery/css/nggallery.css ( Zeile 86 )

CSS

.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;
}

ersetzen mit (fixer Bildhintergrund durch flexiblen css ersetzt)

CSS

.ngg-album-compactbox {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 5px 5px 5px 5px;
    -moz-border-radius:  5px 5px 5px 5px;
    -webkit-border-radius:  5px 5px 5px 5px;
    height: 100%;
    margin: 0;
    padding: 7px 7px 0 !important;
    width: 100%;
}

Alles anzeigen

wp-content/plugins/nextgen-gallery/css/nggallery.css ( Zeile 95 )

CSS

.ngg-album-compactbox .Thumb {
	border:1px solid #000000;
	margin:0px !important;
	padding:0px !important;
	width:91px; 
	height:68px;
}

ändern in

CSS

.ngg-album-compactbox .Thumb {
    border: 1px solid #000000;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
}

Tutrix

[COLOR=Red]schade das man seine Beiträge, schon nach ein paar Minuten nicht mehr editieren darf[/COLOR]

die Codes oben sind falsch, da auch dort die Thumbnails gestreckt werden

hier die richtigen

wp-content/plugins/nextgen-gallery/css/nggallery.css ( Zeile 77 )

CSS

.ngg-album-compact {
	float:left;
	height:180px;
	padding-right:6px !important;
	margin:0px !important; 
	text-align:left;
	width:120px;	
}

ändern in

CSS

.ngg-album-compact {
    display: inline-block;
    height: auto;
    margin: 0 !important;
    padding-right: 6px !important;
    text-align: center;
    width: auto;
}

wp-content/plugins/nextgen-gallery/css/nggallery.css ( Zeile 86 )

CSS

.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;
}

ersetzen mit

Code

.ngg-album-compactbox {
    height: auto;
    width: auto;
}

wp-content/plugins/nextgen-gallery/css/nggallery.css ( Zeile 95 )

CSS

.ngg-album-compactbox .Thumb {
	border:1px solid #000000;
	margin:0px !important;
	padding:0px !important;
	width:91px; 
	height:68px;
}

ändern in

CSS

.ngg-album-compactbox .Thumb {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #000000;
    height: auto;
    margin: 0 !important;
    padding: 5px !important;
    width: auto;
}
.ngg-album-compactbox .Thumb:hover {
    background: #A9A9A9;
}

Alles anzeigen

den hover-Effekt kannst natürlich auch weglassen :wink:

austinat

leider hat sich nach den Änderung nichts getan :?:

Tutrix

Zitat von austinat

leider hat sich nach den Änderung nichts getan :?:

das kann logischerweise nicht sein ;-)

vielleicht vergessen die geänderte css-Datei hochzuladen

da ja alles immer noch unverändert in der css steht

austinat

DANKE DANKE DANKE

wie du schon richtig vermutet hast, falsche Datei raufgeladen.

Alle deine Tipps waren Gold wert, danke.

austinat

hallo nochmal,

gibt es eine möglichkeit bei der betrachten der bilder den hintergrund zu ändern? derzeit wird beim öffnen der gallery ein schwarzer transparenter hintergrund angezeigt, ich möchte aber diesen in der gleichen hintergrundfarbe wie die seite slebhaben

danke

Tutrix

Zitat von austinat

slebhaben

also wenn du die slebabe :razz: Hintergrundfarbe haben willst, kannst du das hier anpassen

wp-content/plugins/nextgen-gallery/shutter/shutter-reloaded.css (Zeile 52)

Code

div#shShutter {
	height: 100%;
	z-index: 10000;
	background-color: #000000;
	opacity: 0.8;
	filter:alpha(opacity=80);
}

Farbcode ändern in #EDEBE1

Allerdings finde ich das betrachten der Bilder mit dunklen Hintergrund viel angenehmer, als wenn mich ein fast weißer Hintergrund blendet und ich übertrieben gesagt, die Augen zukneifen muss um überhaupt was zu sehen.
Mag bei kleinem Display vielleicht nicht so auffallen!

austinat

Danke :-)

die Farbe passt nun, leider habe ich das transparent nicht ganz ausschalten können. ich habe einfach mal alle transparent einträge laienhaft in #EDEBE1 umgeändert, jedoch bleibt ein teil transparent???

Tutrix

Transparenz ist das rote

Code

div#shShutter {
	height: 100%;
	z-index: 10000;
	background-color: #000000;
[COLOR="Red"]	opacity: 0.8;
	filter:alpha(opacity=80);[/COLOR]
}

0.8 bzw 80(IE) gibt die Stärke der Transparenz an
je niedriger der Wert, um so transparenter

wenn du keine Transparenz willst, einfach das rote löschen

austinat

so ist es auch, danke für den Tipp :-)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

NextGEN Thumbails verzerrt

Jetzt mitmachen!