Support » Plugin: WordPress Gallery Plugin - NextGEN Gallery » Customizing NGG album view

  • Resolved victorgodg

    (@victorgodg)


    Hi all,
    I’m using NGG album at the home page. The album consists of 3 galleries linked to site’s pages (great NGG album feature!). Now it looks like this. Is it possible in the free NG version to add some CSS customization to album’s view:
    1) hide hover text over an image (“COLLECTIVE UNCONSCIOUS” on the screenshot, taken from gallery Title)
    2) change font family of the caption located below images
    3) change color of the caption when it’s in focus (currently black) and not (blue)
    4) and the most difficult – move caption inside the image and align to its bottom.
    Thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Imagely

    (@imagely)

    Hi @victorgodg,

    1) You’d need to use a plugin like “Simple Custom CSS and JS” plugin and add the JS snippet from below to the page’s footer to make sure the titles don’t appear on mouse hovering over the preview images:

    var $j = jQuery.noConflict();
     $j(document).ready(function() {
      $j(".caption_link, a").mouseenter(function() {
          var title = $j(this).attr("title");
          $j(this).attr("save_title", title);
          $j(this).attr("title", "");
        })
        .mouseleave(function() {
          var title = $j(this).attr("save_title");
          $j(this).attr("title", title);
        })
        .click(function() {
          var title = $j(this).attr("save_title");
          $j(this).attr("title", title);
        });
    });

    2) This one would imply using a custom CSS rule like the one from below to change the font family of the caption:

    .ngg-album-compact h4 .ngg-album-desc {
        font-family: ui-sans-serif !important;
    }

    3) You’d need:

    .ngg-album-compact h4 .ngg-album-desc:hover {
        color: #0274be !important;
    }

    4) I am afraid that this one isn’t easy achievable unless creating a custom view for the album display type you use and custom add it via the code. Coding skills would be required.

    Thread Starter victorgodg

    (@victorgodg)

    @imagely, thank you very much for such a quick response and exhaustive description. All works as you wrote.
    The only drawback I’ve noticed on desktop version relates to paragraph 1: if before the home page is rendered I position mouse cursor over the place the image should appear (e.g. by typing site URL and moving the cursor immediately into the proposed place) then the title is nevertheless displayed.

    Plugin Author Imagely

    (@imagely)

    Well, that’s sort of intentional to make sure the images are all loaded before applying the snippet to ensure there are not images loading later.

    As a workaround you can duplicate the same rule excluding the $( document ).ready() wrapper as below:

    
    var $j = jQuery.noConflict();
    $j(".caption_link, a").mouseenter(function() {
        var title = $j(this).attr("title");
        $j(this).attr("save_title", title);
        $j(this).attr("title", "");
      })
      .mouseleave(function() {
        var title = $j(this).attr("save_title");
        $j(this).attr("title", title);
      })
      .click(function() {
        var title = $j(this).attr("save_title");
        $j(this).attr("title", title);
      });
    
    Thread Starter victorgodg

    (@victorgodg)

    It works, thanks a lot! I’ve just replaced the old code with the new one. Did you mean when writing duplicate that I should append new code without erasing the old one? Sorry for this question, I don’t know much about JS.

    Plugin Author Imagely

    (@imagely)

    If the second code snippet works for all of the images from the gallery feel free to leave it as is. The first one had a conditional allowing the page to completely load before applying.

    Thread Starter victorgodg

    (@victorgodg)

    Thank you.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.