NextGen 9.x Hover Effekt

Lichtritzer

Hi,
kann man den Hover Effekt abstellen, weil dieser bei mir immer die Zeilen der nachfolgenden Thumbnails verschiebt, keine Ahnung wie ich das anders ausdrücken soll :-D
im Bild 1 kann man die "normale" Ansicht sehen, Bild 2 zeigt die verschobene Ansicht wenn man mit der Maus auf eines der Thumbnails geht..

Ich hoffe man kann´s erkennen, ist sehr klein, sorry...

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

mfitzen

Das wird wohl in einer der CSS Dateien von NextGen Gallery zu ändern sein. Suche dort einfach mal nach :hover und verändere oder lösche die Werte.

elotse

Im Pfad plugins/nextgen-gallery/css/nggallery.css findest Du die Stelle.
Ich hatte auch einen solchen Effekt, bei unterschiedlicher Höhe der Bilder. Prüfe doch zuerst ob alle Thumbs gleiche Höhe haben!!!!
Siehe auch meinen Bericht dazu hier

Lichtritzer

ich glaube ich bin zu blöd..
ich habe die css dateien geändert, dennoch gleiches verhalten..
müssen die bilder zusätzlich noch die gleiche höhe haben???
Ich würde mir wünschen wenn die Bilder einfach komplett ohne hover-effekt angezeigt würden...

elotse

Gib mir mal einen Link wo es steht

Lichtritzer

Zitat von elotse

Gib mir mal einen Link wo es steht

wo soll was stehen?? im moment stehe ich wohl auf der leitung..??

mky

der Link deiner CSS Datei irgend so etwas:

HTML

http://deinepage.com/wp-content/plugins/nextgen-gallery/css/nggallery.css

übrigens: kannst mal bei mir vorbei schauen, bei mir habe ich den hovereffekt auch ausgeschalten...

Code

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


.ngg-gallery-thumbnail {
	float: left;
	margin-right: 3px;
}


.ngg-gallery-thumbnail img {
	background-color:#FFFFFF;
	margin:2px 0px 3px 5px;
	padding:2px;
	
}


.ngg-gallery-thumbnail img:hover {
} 


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


}

Alles anzeigen

Lichtritzer

Bei mir klappt es immer noch nicht,
ich verwende folgenden css code..
Kann mir einer sagen was ich machen muss um den Hover-Effekt abzuschalten??

CSS

/*
CSS Name: Black Minimalism Theme
Description: For Black Minimalism Theme 
Author: Alex Rabe
Version: 1.32
   
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;
    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;
}


/* ----------- 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, a.next, a.prev, 
                span.page-numbers, span.next, span.prev {
    border:1px solid #660000;
    margin-right:3px;
    padding:3px 7px;
}


.ngg-navigation a.page-numbers:hover, a.next:hover, a.prev:hover, 
                span.page-numbers:hover, span.next:hover, 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;
}


/* ----------- Slideshow -------------*/
.slideshow {
    margin-left: auto; 
    margin-right: auto;
    text-align:center;    
}


.slideshowlink {
    
}


/* ----------- Single picture -------------*/
.ngg-singlepic {
    background-color:#FFFFFF;
    border:1px solid #A9A9A9;
    display:block;  
    margin:5px;
    padding:4px;
    position:relative;
}


.ngg-left {
    float: left;
    padding-right:10px;
}


.ngg-right {
    float: right;
    padding-left:10px;
}


.ngg-center img {
      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;
}

Alles anzeigen

mky

Mache mal eine Sicherheitskopie deiner cssdatei und ersetze mal folgendes von deinem CSS-Code

CSS

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

Alles anzeigen

mit folgendem von meinem

Code

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


.ngg-gallery-thumbnail {
	float: left;
	margin-right: 3px;
}


.ngg-gallery-thumbnail img {
	background-color:#FFFFFF;
	margin:2px 0px 3px 5px;
	padding:2px;
	
}


.ngg-gallery-thumbnail img:hover {
} 


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


}

Alles anzeigen

Lichtritzer

ich glaube ich bin wirklich zu blöd.....
der effekt ist immer noch da...

Lichtritzer

kann keiner mehr helfen??

Lichtritzer

hat keiner mehr eine idee??:?

mfitzen

Poste mal bitte nen Link zu deiner Seite

Lichtritzer

hier ist ein link zu meiner Seite...

TuSsenBlog - - - Damenhandball im TuS Lindlar » Fotos*

mky

Ersetze deine thickbox.css (im Plugin Ordner) mit folgendem:

Code

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
/* *{padding: 0; margin: 0;}  */


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
    font: 12px Arial, Helvetica, sans-serif;
    color: #333333;
}


#TB_secondLine {
    font: 10px Arial, Helvetica, sans-serif;
    color:#666666;
}


#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
}


.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
.TB_overlayBG {
    background-color:#000;
    filter:alpha(opacity=75);
    -moz-opacity: 0.75;
    opacity: 0.75;
}


* html #TB_overlay { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}


#TB_window {
    position: fixed;
    background: #ffffff;
    z-index: 102;
    color:#000000;
    display:none;
    border: 0px solid #ffffff;
    text-align:left;
    top:50%;
    left:50%;
}


* html #TB_window { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}


#TB_window img#TB_Image {
    display:block;
    margin: 15px 0 0 15px;
    border-right: 0px solid #ffffff;
    border-bottom: 0px solid #ffffff;
    border-top: 0px solid #ffffff;
    border-left: 0px solid #ffffff;
}


#TB_caption{
    height:25px;
    padding:7px 30px 10px 25px;
    float:left;
}


#TB_closeWindow{
    height:25px;
    padding:11px 25px 10px 0;
    float:right;
}


#TB_closeAjaxWindow{
    padding:7px 10px 5px 0;
    margin-bottom:1px;
    text-align:right;
    float:right;
}


#TB_ajaxWindowTitle{
    float:left;
    padding:7px 0 5px 10px;
    margin-bottom:1px;
}


#TB_title{
    background-color:#e8e8e8;
    height:27px;
}


#TB_ajaxContent{
    clear:both;
    padding:2px 15px 15px 15px;
    overflow:auto;
    text-align:left;
    line-height:1.4em;
}


#TB_ajaxContent.TB_modal{
    padding:15px;
}


#TB_ajaxContent p{
    padding:5px 0px 5px 0px;
}


#TB_load{
    position: fixed;
    display:none;
    height:13px;
    width:208px;
    z-index:103;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
}


* html #TB_load { /* ie6 hack */
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}


#TB_HideSelect{
    z-index:99;
    position:fixed;
    top: 0;
    left: 0;
    background-color:#fff;
    border:none;
    filter:alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    height:100%;
    width:100%;
}


* html #TB_HideSelect { /* ie6 hack */
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}


#TB_iframeContent{
    clear:both;
    border:none;
    margin-bottom:-1px;
    margin-top:1px;
    _margin-bottom:1px;
}

Alles anzeigen

Lichtritzer

habe ich gemacht, langsam werde ich bekloppt....
klappt leider immer noch nicht

mfitzen

Welche Dateien bearbeitest du denn? Wenn ich mir die letzten Beiträge anschaue, liest es sich für mich so, als ob du die Änderungen in den falschen Dateien vorgenommen hast. Zudem stellt sich mir die Frage, was die thickbox.css damit zu tun haben soll?

Gehe in die Datei "wp-content/plugins/nextgen-gallery/css/ngg_dkret3.css" und suche darin mal nach

Code

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

Mach ne Sicherung der Datei und entferne den ganzen Code einfach mal. Vielleicht reicht das schon. Wenn nicht schauen wir weiter... ;-)

Lichtritzer

nö, auch das bringt es nicht... leider
hier der code der verwendeten css datei..

CSS

/*
CSS Name: dkret3 Theme
Description: NextGEN dkret3 style with a shadow effect
Author: Jörn Kretzschmar (based on Alex Rabes Default Style)
Version: 1.3
   
This is a template stylesheet that can be used with NextGEN Gallery. I tested the
styles with the theme dkret3. 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 #cccccc;
    overflow:hidden;
}


.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 {
    margin-top: 10px;
    width: 100%;
    clear:both; 
    display:block !important;
}


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


.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 span {
    display:none;
}


.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, a.next, a.prev, 
                span.page-numbers, span.next, span.prev {
    border:1px solid #DDDDDD;
    margin-right:3px;
    padding:3px 7px;
}


.ngg-navigation a.page-numbers:hover, a.next:hover, a.prev:hover, 
                span.page-numbers:hover, span.next:hover, 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;
}


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


/* ----------- Slideshow -------------*/
.slideshow {
    margin-left: auto; 
    margin-right: auto;
    text-align:center;    
}


.slideshowlink {
    
}


/* ----------- Single picture -------------*/
.ngg-singlepic {
    background-color:#FFFFFF;
    border:1px solid #A9A9A9;
    display:block;  
    margin:5px;
    padding:4px;
    position:relative;
}


.ngg-left {
    float: left;
}


.ngg-right {
    float: right;
}


.ngg-center img {
      margin-left: auto;
    margin-right: auto;
}


/* ----------- Sidebar widget -------------*/


.ngg-widget,
.ngg-widget-slideshow {
    overflow: hidden;
    margin:0pt;
    padding:5px 0px 0px 0pt;
  text-align: center;
}


.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

alex.rabe

Schau in deinen Theme Style sheet (style.css) :

HTML

.entry img, .entrytext img {
border:1px solid #B0B0B0;
margin:5px;
padding:5px;
}
 
.entry a:hover img, .entrytext a:hover img {
border:1px solid #505050;
padding:5px;
}

Das Padding ist auch jeden Fall kontraproduktiv.

Lichtritzer

Zitat von alex.rabe
Schau in deinen Theme Style sheet (style.css) :
HTML
.entry img, .entrytext img {
border:1px solid #B0B0B0;
margin:5px;
padding:5px;
}
 
.entry a:hover img, .entrytext a:hover img {
border:1px solid #505050;
padding:5px;
}
Das Padding ist auch jeden Fall kontraproduktiv.

EEEEEEENDLICH ;-)

ich habe den Teil

Code

.entry a:hover img, .entrytext a:hover img {
border:1px solid #505050;
padding:5px;
}

einfach ersatzlos gelöscht und nun ist der Hover-Effekt komplett ausgeschaltet, das gefällt mir deutlich besser!!!

Vielen Dank an ALLE für eure unermüdliche Hilfe!!!!

Willkommen! Melden Sie sich an oder registrieren Sie sich.

NextGen 9.x Hover Effekt

Jetzt mitmachen!