JSGallery is a very nice AJAX image gallery built with Mootools.

Look & effects of the script is configurable. It supports browsing with keyboard between images and also pages.

Features of this AJAX gallery:

• nice transitions for page change, image select, etc.
• supports easy to build no-script version
• preloads images with separate indicators (optional)
• a bunch of options to change the default styles and bevaviours
• visibility of prev/next handles is controlled by mouse distance
• use the arrow keys to go to previous/next image
• use number keys to go to a certain page (beginning with 1)
• prevents too fast change of images (ugly effect interruption)

• Filed under: Gallery, Goodies, Other License

Description

ddmenu is a simple MooTools-based script to create you’re own context menus.

Features

• The Menu Appearance is adapted to the System Content Menu behavior.
• Crtl-Switch: Press the Crtl-key and right click to switch between ddmenu and browser default context menu.
• Shift-Switch: Press the Shift-key and right click to open ddmenu beside the browser default context menu.
• Fully customizable: Menu styling can be easily defined in external stylesheet.
• Cross-browser: Full A-Graded browsers support (Opera is supported through Ctrl + Left Click)
• Fade-in (settable)
• Two tricky functions to enable/disable menu items

Specification

• Requires: < mootools 1.2 beta 2
• Tested browsers: Firefox 2, Safari 3, Internet Explorer 6/7, Opera 9 under Windows. Firefox 2, Safari 3 under Mac OS X
• Last modified on: 1/1/08
• Latest version: 0.2
• Author: janlee

Demos

• Right click anywhere on a page to bring up a menu. Use “Ctrl + Left Click” if you’re Browser doesn’t understand right clicks.
• mooeDit - A This experimental HTML-Editor uses the ddmenu in a Textarea

How to use it

1. Download moo.ddmenu.0.21.js and ddmenu.css. Include them in your page

   <link rel="stylesheet" href="css/ddmenu.css" type="text/css" media="screen" />
   <script type="text/javascript" src="js/mootools-beta-1.2b1.js"></script>
   <script type="text/javascript" src="js/moo.ddmenu.0.2.js"></script>

2. Create the menu-HTML width the items and they’re IDs

   <div class="ddmenu def" id="ddmenu2" style="display:none">
   <ul>
   <li class="title">Menu Title</li>
   <li class="item" id="menu_item1"><a href="#">My item 1</a></li>
   <li class="item" id="menu_item2"><a href="#">My item 2</a></li>
   <li class="item" id="menu_big_item"><a href="#">This is a oversized item...</a></li>
   <li class="sepline"></li>
   <li class="item" id="menu_item_with_icon1"><a class="objects" href="#">Another item</a></li>
   <li class="item" id="menu_item_with_icon2"><a class="letter" href="#">Disabled item</a></li>
   <li class="item" id="menu_item_with_icon3"><a class="umbrella" href="#">With icon</a></li>
   <li class="sepline"></li>
   <li class="item" id="menu_spec_links"><a href="#">Enable on Links</a></li>
   <li class="item" id="menu_spec_texts"><a href="#">Enable on Texts</a></li>
   <li class="item" id="menu_spec_images"><a href="#">Enable on Images</a></li>
   </ul>
   </div>

3. Initialize ddmenu class passing the options. This example calls console.info when a menu item is clicked. (Take a look in the JS-Source for more informations)
   

   function iniz () {
   pagemenu = new DDMenu ('ddmenu2', document, { //document can be the whole page,
   //an element or a parent of elements
   onOpen: function (e) {
   this.enableItems(true); //enable all
   this.enableItems('menu_item_with_icon2',false); //disable menu_item_with_icon2
   },
   
   onItemSelect: function (act_id, act_el, menu_bindon) {
   console.info("menu action -> item id: \"%s\" from: %o in %o", act_id, act_el, menu_bindon)
   }
   });
   }

Version history

• v.0.21 [2/08]
  • Fixes for MooTools 1.2 Beta 2
• v.0.2 [1/08]
  • Correct positioning
  • Scroll-save
  • Ctrl and Shift Switches
  • Fade In
  • CSS-Styles reworked and adapted
• v.0.1 [11/07]
  • Initial Version with a basic menu script structure
  • Event-calls and enableItems() functions
  • Ajusted the when-menu-is-opened events on the system context menu behavoir

Discover the best news, images and videos as voted on by the Digg community, from the social news website Digg.com. You can now customize your Digg gadget by topic, and view more story information, such as comments and a friend’s activity feed. Let us know what you think at feedback@digg.com

digg.com Inc. - San Francisco, CA 

Generate