WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery
[resolved] NextGen 2.0.11 - removing borders from thumbnails (52 posts)

  1. zanchit
    Member
    Posted 11 months ago #

    my previous settings have been replaced during this update and I would like to remove all the borders from my thumbnails or change them to the colour of my background.

    also I did have a line of text to enlarge the image under the mouse (hover) but can't work out how to do it now

    http://wordpress.org/plugins/nextgen-gallery/

  2. tizz
    Member
    Posted 11 months ago #

    Try this in other options->styles->css customization

    /* Thumbnails */
    .ngg-gallery-thumbnail img, .ngg-thumbnail img {
    background: none !important;
    border: none !important;
    padding: 0px;
    }

    If you want to change color, play it with Firebug or Chrome, and obviously remove "none". You could add a box-shadow if you want for a cool effect. Look at CSS school pages and you can do it by yourself.

  3. w.bear
    Member
    Posted 11 months ago #

    This should work:

    .ngg-gallery-thumbnail img {
    background-color:transparent!important;
    border:none!important;
    border-radius:10px!important;
    }
    .ngg-gallery-thumbnail img:hover {
    background-color:red!important;
    }

  4. w.bear
    Member
    Posted 11 months ago #

    oops tizz was faster.

    The! "!important" is important. ;-)

  5. zanchit
    Member
    Posted 11 months ago #

    thank you both sooooo much. Could you possibly advise on a line of code so that the image enlarges when the mouse hovers over?

  6. tizz
    Member
    Posted 11 months ago #

    Try this
    However, they could result pixelated. Replace the class name with those of nextgen.

  7. zanchit
    Member
    Posted 11 months ago #

    Thanks fizz
    should i use the css or the html option?
    and when you say replace the class name with those of nextgen, what code would I be looking for ? not quite sure what i put, or where!

  8. tizz
    Member
    Posted 11 months ago #

    CSS, .ngg-gallery-thumbnail img:hover

    play it with Firebug or Chrome

  9. zanchit
    Member
    Posted 11 months ago #

    when I try that it does enlarge to twice the size but at least half of it is behind the other images. is there a way to do it so it comes up in front of
    the surrounding images?

  10. tizz
    Member
    Posted 11 months ago #

    Not with CSS, but with javascript e.g.
    What you want is similar to lightbox, so can I ask you why don't you use the Nextgen default shutter effect, that opens the image in a box in front of the others?

  11. zanchit
    Member
    Posted 11 months ago #

    don't know anything about nextgen default shutter effect. Am a total newbie. So sorry if being thick. website is http://www.zanchit.co.uk and the galleries are all the same: http://www.zanchit.co.uk/adults would be a sample. Any advice on how to program so could have enlargement on mouseover would be fantastic. But you might have to speak slowly (blonde!)

  12. w.bear
    Member
    Posted 11 months ago #

    Please try this:

    .ngg-gallery-thumbnail-box {
    -moz-transition:-moz-transform 0.1s ease-in;
    -webkit-transition:-webkit-transform 0.1s ease-in;
    -o-transition:-o-transform 0.1s ease-in;
    }
    .ngg-gallery-thumbnail-box:hover {
    -moz-transform:scale(2);
    -webkit-transform:scale(2);
    -o-transform:scale(2);
    z-index:10000;position:relative;
    }

  13. zanchit
    Member
    Posted 11 months ago #

    that's definitely better, but the enlarged image is blurred. also it just zooms which means it crops the image. i have done it and it is live on http://www.zanchit.co.uk/adults can you see what I mean?
    i think what i would prefer, it it were possible would be for the full sized image to show on mouseover. is that possible?

  14. zanchit
    Member
    Posted 11 months ago #

    Actually, I think the problem is that the zoom is hindered by the edges of the central column. ie the top row end up with the top edge cropped, the bottom row with the bottom edge and the sides with the relative side cropped.

  15. tizz
    Member
    Posted 11 months ago #

    @w.bear You posted the content of the page I've linked up above.
    zanchit has already try it and from there started his subsequent questions.

    @zanchit I'm talking about something that you already have. Have you ever clicked on your images? It's not a mouseover, but that's how the majority of galleries work, with that lightbox.
    Enlargement on mouseover, in the way you want now, it's not two lines of code, you need a script or a plugin.

  16. zanchit
    Member
    Posted 11 months ago #

    I think I may well have to make do with a minimal zoom on hover, i.e. just a few percent increase. What would I put for the code to make that happen?

  17. zanchit
    Member
    Posted 11 months ago #

    Hi Tizz
    Yes I have clicked on the images and that works fine. I suspect I am trying to make it too complicated. I did, before upgrading NextGen, have a line of code that enlarged the images just a few pixels on hover but I lost that on upgrading.
    any bright ideas?

  18. w.bear
    Member
    Posted 11 months ago #

    @tizz

    No - the difference is: "ngg-gallery-thumbnail-box" and "z-index: 10000; position: relative;"

    @zanchit
    I see it works :-)
    I would prefer this code and everything looks good:

    .ngg-galleryoverview {
    overflow:visible!important;
    }

    .ngg-gallery-thumbnail-box {
    -moz-transition:-moz-transform 0.1s ease-in;
    -webkit-transition:-webkit-transform 0.1s ease-in;
    -o-transition:-o-transform 0.1s ease-in;
    }
    .ngg-gallery-thumbnail-box:hover {
    -moz-transform:scale(1.5);
    -webkit-transform:scale(1.5);
    -o-transform:scale(1.5);
    z-index:10000;position:relative;
    }

  19. tizz
    Member
    Posted 11 months ago #

    @w.bear you're absolutely right, I saw it after a minute.

  20. zanchit
    Member
    Posted 11 months ago #

    THAT'S BRILLIANT! Thanks w.bear. And Tizz. You are both geniuses/genii!

    now the only problem is that where the nextgen thumbnails have cropped the image this remains cropped in the enlargement which matters only in a few pictures. do you think that it the average punter would realise that if they click on the image they will get the full-size one?

    I could put a line of text at the top of each gallery indicating to click on an image to get full size, I suppose.....??

    What do you reckon? Or would I be better to just enlarge the images a smaller amount?

    Advice very much appreciated.

  21. zanchit
    Member
    Posted 11 months ago #

    One other question (inches away from a clean get-away!). How do I remove/disable the slideshow option on each gallery?

  22. w.bear
    Member
    Posted 11 months ago #

    hmm - you can edit the thumb under "Manage Galleries". There you can crop the right part of the image.

    Otherwise you can e.g. change the zoom factor to 1.3 or so. Even a hint text would not be wrong.

  23. w.bear
    Member
    Posted 11 months ago #

    Slideshow: Gallery Settings -> NextGEN Basic Thumbnails -> Show Slideshow link

  24. zanchit
    Member
    Posted 11 months ago #

    OMG. You are nothing short of my hero! Thank you so much.
    have added a bit of text on the adult portrait page. do you think that looks ok?

  25. w.bear
    Member
    Posted 11 months ago #

    In my opinion that looks now very professional. The pictures are also very cool. ;-)

  26. zanchit
    Member
    Posted 11 months ago #

    thank you thank you thank you
    I am one very happy bunny.

  27. tizz
    Member
    Posted 11 months ago #

    In my opinion that looks now very professional. The pictures are also very cool. ;-)

    For me too.

  28. zanchit
    Member
    Posted 11 months ago #

    thank you both so much

  29. photocrati
    Member
    Plugin Author

    Posted 11 months ago #

    @tizz and @w.bear: just want to offer a huge thanks for stepping in to help and offer solutions on this. Much appreciated.

  30. w.bear
    Member
    Posted 11 months ago #

    ok for ie we need to add the following:

    -ms-transition:-ms-transform 0.1s ease-in;

    and

    -ms-transform:scale(1.5);

    ;-)

    PS: unfortunately only transform currently does not work in all browsers

Reply »

You must log in to post.

About this Plugin

About this Topic