Nextgen Gallery - Unterschiedliches Layout der Gallerien?

fabian

Hallo zusammen,
ich hoffe, diesmal kann mir irgendjemand helfen... ;)

Es geht darum, dass ich auf einer Homepage zwei unterschiedlich gelayoutete Galerien einbauen möchte. Einerseits auf einer statischen Seite im Template. Dies hab ich schon über CustomFields gelöst und auch das CSS daraufhin angepasst.

Nun sollen aber auch im Blog Fotogalerien eingebunden werden können. Das jetzige CSS-Layout ist dafür aber nicht wirklich geeignet. Wie krieg ich das nun hin, dass ich zwei verschiedene Layouts innerhalb einer Seite laufen lassen kann?

Muss ich da evtl nen zweiten Tag im Gallery-Plugin schreiben oder gibts ne einfachere Lösung? Wenn ja, wie und wo? Bzw. auf was muss ich alles achten?

Wenn das nämlich zu kompliziert wäre, würde ich wohl doch in der Template-Geschichte manuell Bilder inkl. Lightboxfunktion einbauen...

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

0815

Ist zwar schon ne Weile her, würde mich allerdings auch interessieren, da ich das gleiche Problem habe. Vielleicht weiss es ja inzwischen jemand?

:smile:

wudi96

Setz doch einfach jedesmal einen <div> ringsherum drum mit unterschiedlichen ids und sprech das dann im css so an:

#divvariante1 .ngg-gallery-thumbnail {
}
#divvariante2 .ngg-gallery-thumbnail {
}
...

0815

Hi Wudi :smile:

vielen Dank für Deine Nachricht!

Zitat

Setz doch einfach jedesmal einen <div> ringsherum drum mit unterschiedlichen ids

Da ich ein absoluter Noob bin, noch mal genau nachgefragt. Also bei der Seiteneinstellung:

PHP

[nggallery id=4]

müsste ich:

PHP

#divvariante1 .ngg-gallery-thumbnail {[nggallery id=4]}

schreiben?

Und was müsste man ins CSS schreiben, damit ich die andere Galerie komplett neu Layouten kann?

PHP

/*
CSS Name: Default Styles
Description: NextGEN Default Gallery Stylesheet
Author: Alex Rabe
Version: 1.50


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: 100%;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #fff;
}


/* IE6 will ignore this , again I hate IE6 */
/* See also http://www.sitepoint.com/article/browser-specific-css-hacks */
html>body .ngg-album {
    overflow:hidden;
    padding: 5px;
    margin-bottom: 5px;
    border: 1px solid #cccccc;
} 


.ngg-album {
    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-right: 12px;
}


.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-galleryoverview .desc {
/* required for description */
   margin:0px 10px 10px 0px;
   padding:5px;
}


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


.ngg-gallery-thumbnail {
    float: left;
    margin-right: 8px;
    text-align: center;
    min-height: 100px;
}


.ngg-gallery-thumbnail img {
    background-color:#f7f7f7;
    border:1px solid #f7f7f7;
    display:block;  
    margin:4px 8px 17px 5px;
    padding:0px;
    position:relative;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
}


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


.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 #DDDDDD;
    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: #0066CC;
    color: #FFFFFF !important;
    text-decoration: none !important;
}


/* ----------- 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; display:none;
}


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


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


/* ----------- Single picture -------------*/
.ngg-singlepic {
    background-color:#FFFFFF;
    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 3px;
    padding: 2px;
    height: 50px;
    width:  50px;
}


.ngg-related-gallery img:hover {
    border: 1px solid #000000;
}

Alles anzeigen

wudi96

Hallo 0815 (einfallsreicher Name :P),

Ehm, das Einfachste wäre, dass du einfach im Editor in "Html" wechselst und dort schreibst:

PHP

<div id="divvariante1" >
[nggallery id=4]
</div>

und im css gibts dann einmal

Code

[COLOR=#000000][COLOR=#007700]#divvariante1 .[/COLOR][COLOR=#0000BB]ngg[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]album [/COLOR][COLOR=#007700]{
    [/COLOR][COLOR=#0000BB]height[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]100[/COLOR][COLOR=#007700]%;
    [/COLOR][COLOR=#0000BB]padding[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]5px[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000BB]margin[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]bottom[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]5px[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000BB]border[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]1px solid [/COLOR][COLOR=#FF8000]#fff;
[/COLOR][COLOR=#007700]}[/COLOR][/COLOR]

und

Code

[COLOR=#000000][COLOR=#007700]#divvariante2 .[/COLOR][COLOR=#0000BB]ngg[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]album [/COLOR][COLOR=#007700]{
    [/COLOR][COLOR=#0000BB]height[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]100[/COLOR][COLOR=#007700]%;
    [/COLOR][COLOR=#0000BB]padding[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]5px[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000BB]margin[/COLOR][COLOR=#007700]-[/COLOR][COLOR=#0000BB]bottom[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]5px[/COLOR][COLOR=#007700];
    [/COLOR][COLOR=#0000BB]border[/COLOR][COLOR=#007700]: [/COLOR][COLOR=#0000BB]1px solid [/COLOR][COLOR=#FF8000]#fff;
[/COLOR][COLOR=#007700]}[/COLOR][/COLOR]

0815

Juhu, jetzt funktionierts. Vielen Dank Wudi! :p

Zitat

0815 (einfallsreicher Name :P)

Hehe :mrgreen:

0815

Hallo Forum :-)

ich bins noch mal. Hab jetzt zwei Sachen probiert, einmal die Thumbs etwas größer anzuzeigen und einmal die thumbs Bildmittig zu zentrieren.

Das Vergrößern hat geklappt allerdings sind die thumbs qualitativ unscharf geworden. Und das Zentrieren hat leider nicht funktioniert.

Vielleicht weiß ja jemand woran es liegt? :confused:

Hier mal das veränderte CSS:

PHP

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


#divvariante2 .ngg-gallery-thumbnail-box {
    float: center;
}






#divvariante1 .ngg-gallery-thumbnail img {
    background-color:#f7f7f7;
    border:1px solid #f7f7f7;
    display:block;  
    margin:4px 8px 17px 5px;
    padding:0px;
    position:relative;
    height: 100px;
    min-height: 100px;
    max-height: 100px;
}




#divvariante2 .ngg-gallery-thumbnail img {
    background-color:#f7f7f7;
    border:1px solid #f7f7f7;
    display:block;  
    margin:4px 20px 17px 5px;
    padding:0px;
    position:relative;
    height: 130px;
    min-height: 130px;
    max-height: 130px;

Alles anzeigen

wudi96

Hallo 0815,

flaot: center gibts nicht. Kannst höchsten text-align: center probieren oder margin: auto;

0815

Hi Wudi,

das Zentrieren habe ich inzwischen so hinbekommen:

PHP

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


.ngg-gallery-thumbnail {             margin-right: 5px;
                                     text-align: center;
                                     display: inline-block; }

Jetzt muss nur noch die Bildqualität der vergrößerten Thumbs stimmen. Mit 130 statt 100 px sehen sie leider unscharf und pixelig aus. Argh, es ist zum Mäusemelken..

wudi96

Hallo 0815,

einfach nur mit css vergrößen verschlechtert immer die Qualität, ist doch nur wir digital ran zoomen.
Du musst das in css schreiben UND in die Next-gen-Gallery Optionen unter Thumbnails den Pixelwert anpassen. Alle Bilder die du ab jetzt hochlädst sollten besser aussehen.

Gruß Martin

0815

Hi Martin :-P

vielen Dank für Deinen Hinweis!

Also meine Thumbnail Optionen stehen eigentlich sogar auf 250 x 250 pixel und 100%. Das müsste doch mehr als reichen um auf 130 px herunterzurechnen, oder habe ich was falsch verstanden?

wudi96

nehm mal genau die 130px.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Nextgen Gallery - Unterschiedliches Layout der Gallerien?

Jetzt mitmachen!