diff --git a/ImgHtml.cc b/ImgHtml.cc
index db011b9..9c9e6e7 100644
--- a/ImgHtml.cc
+++ b/ImgHtml.cc
@@ -388,7 +388,7 @@ li.dropdown {\
             const ImgData&  img = t->img();
 
             // insert the caption for the cell
-            body << "  <div class=flex-item  title=\"";
+            body << "  <div class=flex-item  rating=" << (img.rating.empty() ? "0" : img.rating.c_str()) << "  title=\"";
             if (!img.rating.empty())
             {
                 const string&  s = img.rating;
@@ -458,6 +458,8 @@ li.dropdown {\
 	 <<   "</li>"
          <<   "<li><a href=\"#\" id=\"prev\">&#8593 Prev</a></li>"
          <<   "<li><a href=\"#\" id=\"next\">Next &#8595</a></li>"
+         <<   "<li><a href=\"#\" id=\"next\">Next &#8595</a></li>"
+         <<   "<li><a class=\"ToggleRatings\" href=\"#\" id=\"toggle_ratings\">Show Only Rated</a></li>"
 	 << "</ul>"
 	 << "</div>"
 	 << "<div id=\"top\" style=\"padding: 20px 8px;\">"
@@ -470,7 +472,7 @@ li.dropdown {\
 const char*  ImgHtmlFlexboxSlide::_jsblock()
 {
     static const char*  js = "<script>\n$(function() {\n// Select all links with hashes\n$('a[href*=\"\\\\#\"]')\n  // Remove links that don't actually link to anything\n  .not('[href=\"\\\\#\"]')\n  .not('[href=\"\\\\#0\"]')\n  .click(function(event) {\n    // On-page links\n    if (\n      location.pathname.replace(/^\\//, '') == this.pathname.replace(/^\\//, '')\n      &&\n      location.hostname == this.hostname\n    ) {\n      // Figure out element to scroll to\n      var target = $(this.hash);\n      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');\n      // Does a scroll target exist?\n      if (target.length) {\n        // Only prevent default if animation is actually gonna happen\n        event.preventDefault();\n        $('html, body').animate({\n          scrollTop: target.offset().top\n        }, 1000, function() {\n          // Callback after animation\n          // Must change focus!\n          var $target = $(target);\n          $target.focus();\n          if ($target.is(\":focus\")) { // Checking if the target was focused\n            return false;\n          } else {\n            $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable\n            $target.focus(); // Set focus again\n          };\n        });\n      }\n    }\n  });\n});\n</script>\
-<script>\n$(document).ready(function() {\n    var i = 0;\n    var len = $('div[id^=\"photo_block\"]').length;\n\n    function  _scrollNext() {\n\ti = ++i % len;\n\tvar target = \"#photo_block\" + i;\n\t$('html,body').animate({scrollTop: $(target).offset().top}, 1000)\n    };\n    function _scrollPrev() {\n\tif (!i) i = len;\n\t--i;\n\tvar target = \"#photo_block\" + i;\n\t$('html,body').animate({scrollTop: $(target).offset().top}, 1000)\n    };\n\n    $('body').keydown(function(evt) {\n\tswitch (evt.keyCode)\n\t{\n\t    case 74:\n\t    case 39:\n\t\tevt.preventDefault();\n\t\t_scrollNext();\n\t\tbreak;\n\n\t    case 75:\n\t    case 37:\n\t\tevt.preventDefault();\n\t\t_scrollPrev();\n\t\tbreak;\n\t}\n    });\n\n    $('#next').click(function() {\n\t_scrollNext();\n\treturn false;\n    });\n\n    $('#prev').click(function() {\n\t_scrollPrev();\n\treturn false;\n    });\n});\n</script>\n";
+\n<script>\n$(document).ready(function() {\n    var i = 0;\n    var len = $('div[id^=\"photo_block\"]').length;\n\n    function  _scrollNext() {\n\ti = ++i % len;\n\tvar target = \"#photo_block\" + i;\n\t$('html,body').animate({scrollTop: $(target).offset().top}, 1000)\n    };\n    function _scrollPrev() {\n\tif (!i) i = len;\n\t--i;\n\tvar target = \"#photo_block\" + i;\n\t$('html,body').animate({scrollTop: $(target).offset().top}, 1000)\n    };\n\n\n    $('#next').click(function() {\n\t_scrollNext();\n\treturn false;\n    });\n\n    $('#prev').click(function() {\n\t_scrollPrev();\n\treturn false;\n    });\n\n    var rating_hide = 0;\n\n    function _toggleRatings(r_)\n    {\n        $('.flex-item').each(function(){\n\t    var  item_rating = $(this).attr(\"rating\");\n\t    if (rating_hide == 1) {\n\t        $(this).fadeTo(750, 1);\n\t    }\n\t    else {\n\t\tif (item_rating < r_) {\n\t\t    $(this).fadeTo(750, 0.2);\n\t\t}\n\t\telse {\n\t\t    $(this).fadeTo(750, 1);\n\t\t}\n\t    }\n\t});\n\t\n\tif (rating_hide == 1) {\n\t    $('.ToggleRatings').text(\"Only Show Rated (showing all)\");\n\t}\n\telse {\n\t    $('.ToggleRatings').text(\"Show All (showing rated)\");\n\t}\n\trating_hide = !rating_hide;\n    }\n    function _showRatingGT(r_)\n    {\n        $('.flex-item').each(function(){\n\t    var  item_rating = $(this).attr(\"rating\");\n\t    if (item_rating < r_) {\n\t        $(this).fadeTo(750, 0.2);\n\t    }\n\t    else {\n\t\t$(this).fadeTo(750, 1);\n\t    }\n\t});\n\t$('.ToggleRatings').text(\"Show All \" + \"(showing >=\" + r_ + \")\");\n\trating_hide = 0;\n    }\n\n    $('body').keydown(function(evnt) \n    {\n        switch (evnt.keyCode) {\n\t    case 74:\n\t    case 39:\n\t\tevt.preventDefault();\n\t\t_scrollNext();\n\t\tbreak;\n\n\t    case 75:\n\t    case 37:\n\t\tevt.preventDefault();\n\t\t_scrollPrev();\n\t\tbreak;\n\n\t    case 48:  //0\n\t    case 49:\n\t    case 50:\n\t    case 51:\n\t    case 52:\n\t    case 53:\n\t        _showRatingGT(evnt.keyCode - 48);\n\t\tbreak;\n\n\t    case 82:  //r\n\t         _toggleRatings(1);\n\t\t break;\n\t}\n    });\n\n    $('#toggle_ratings').click(function() {\n        _toggleRatings(1);\n    });\n});\n</script>\n";
     return js;
 }