WordPress.org

Forums

[resolved] nextgen-gallery (5 posts)

  1. TimmyGUNZ
    Member
    Posted 7 years ago #

    I am using the nextgen-gallery plugin but for some reason the thumbnails are jumping around whenever I over over them.

    To see what I mean, head on over to: http://ps-nyc.com/main/photos

    Thanks

  2. mauvan
    Member
    Posted 7 years ago #

    Funny, but the problem persists only in firefox. No problem in IE.
    Did you try this also with the default or classic WordPress theme?
    It could be something in your theme's css...
    I noticed this sometimes causes some plugin-inconsistence.

  3. StrangeAttractor
    Member
    Posted 7 years ago #

    You have a conflict between the styles in your style.css file and the styles in the nggallery.css file, so that when you hover over the images, the styles governing img a:hover are taking over with bizarre results.

    Test case: If you eliminate this code from your style.css ...

    .storycontent img {
    	margin: 10px;
    	padding: 1px;
    	border: 2px solid #444;
    	background: #fff;
    	}
    .storycontent a:hover img {
    	border: 2px solid #fff;
    	background: #444;
    	}

    ... the problem with the gallery goes away.

    However the codes above are there to style ordinary links in your storycontent area, so you can't just delete them.

    Some of the characteristics specified in the above are being inherited in the nggallery.css here:

    .ngg-gallery-thumbnail img (line 126)
    {
    
    background-color: #ffffff;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #a9a9a9;
    border-right-color: #a9a9a9;
    border-bottom-color: #a9a9a9;
    border-left-color: #a9a9a9;
    display: block;
    margin-top: 4px;
    margin-right: 0px;
    margin-bottom: 4px;
    margin-left: 5px;
    padding-top: 4px;
    padding-right: 4px;
    padding-bottom: 4px;
    padding-left: 4px;
    position: relative;
    }
    
    .ngg-gallery-thumbnail img:hover (line 135)
    {
    background-color: #a9a9a9;
    }

    You need to edit portion of nggallery.css quoted above to make sure that you override all the characteristics that are being inherited (because they are not specified) from style.css (the problem is with the hover, so focus on that).

    I don't have time to hash it out exactly, but that's where the problem is.

  4. TimmyGUNZ
    Member
    Posted 7 years ago #

    StrangeAttractor...

    Thanks so much. I just removed that portion from my Style.CSS sheet and it had no adverse reactions to my template and fixed my gallery.

    Much appreciated.

  5. StrangeAttractor
    Member
    Posted 7 years ago #

    Great. I recommend that when you remove stuff, you should just comment it out, e.g.

    /* CODE DELETED BY YourName BECAUSE reason
    #code p {
    blah
    blah
    }
    */

    That will make it easier to find if you decide that you needed it after all. Of course, your stylesheet can get littered with deleted codes this way, so you could just save the commented stylesheet to a backup and only upload the "clean" one.

    PS If this issue is resolved for you, please mark the thread resolved.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.