Gallery3:Thumb Menu

Inspired by Jakob Hilden's message to gallery-devel

Interaction

Here is the basic interaction:

Default

• Meta isn't visible or is light gray

Hover over thumbnail

• Thumbnail container's enlarged but not the actually thumbnail.
• Meta data text is revealed or it's color transitions to black.
• Options menu indicator plus 4 or 5 of the most used administration options are revealed.

Hover over or click on Options menu

• Options menu is revealed through slide down effect
• As the options lists grows with new modules, a vertical scrollbar will likely be required to view all options.

Menu Markup

The markup for the menu would look something like this.

 <div class="gPhotoMenu">
   <ul class="gFavoriteOptions gHorizontalMenu">
     <li class="ui-icon-left ui-corner-all"><a href="#" title="Additional options">
         <span class="ui-icon ui-icon-triangle-1-s"></span>Options</a>
       <ul class="gOptions">
         <li><a href="#" class="gDialogLink gButtonLink ui-icon-left ui-state-default ui-corner-all">
           <span class="ui-icon ui-icon-rotate-ccw"></span>Rotate 90 degrees CCW</a></li>
         <li><a href="#" class="gDialogLink gButtonLink ui-icon-left ui-state-default ui-corner-all">
           <span class="ui-icon ui-icon-rotate-cw ui-corner-all"></span>Rotate 90 degrees CW</a></li>
         <li><a href="#" class="gDialogLink gButtonLink ui-icon-left ui-state-default ui-corner-all">
           <span class="ui-icon ui-icon-print"></span>Print with Digibug</a></li>
         <li><a href="#" class="gDialogLink gButtonLink ui-icon-left ui-state-default ui-corner-all">
           <span class="ui-icon ui-icon-cart"></span>Save to cart</a></li>
         <li><a href="#" class="gDialogLink gButtonLink ui-icon-left ui-state-default ui-corner-all">
           <span class="ui-icon ui-icon-twitter"></span>Tweet this</a></li>
         <li><a href="#" class="gDialogLink gButtonLink ui-icon-left ui-state-default ui-corner-all">
           <span class="ui-icon ui-icon-comment"></span>View comments</a></li>
       </ul>
     </li>
     <li><a href="#" class="gDialogLink gButtonLink ui-icon-left ui-state-default ui-corner-all">
       <span class="ui-icon ui-icon-pencil">Edit this photo</span></a></li>
     <li><a href="#" class="gDialogLink gButtonLink ui-icon-left ui-state-default ui-corner-all">
       <span class="ui-icon ui-icon-folder-open">Move this photo to another album</span></a></li>
     <li><a href="#" class="gDialogLink gButtonLink ui-icon-left ui-state-default ui-corner-all">
       <span class="ui-icon ui-icon-star">Choose this photo as the album cover</span></a></li>
     <li><a href="#" class="gDialogLink gButtonLink ui-icon-left ui-state-default ui-corner-all">
       <span class="ui-icon ui-icon-trash">Delete this</span></a></li>
   </ul>
 </div>