Customizing NGG album view

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.

@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.

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

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.

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.

Thank you.