Gallery3:Thumb Menu - Gallery Codex
Personal tools

Gallery3:Thumb Menu

From Gallery Codex

Inspired by Jakob Hilden's message to gallery-devel

Interaction

Here is the basic interaction:

G3itemMenu1.png

Default

  • Meta isn't visible or is light gray

G3itemMenu2.png

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.

G3itemMenu3.png

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>