Reference for Menu 01

Method

Description

nextItem()Move to next item.
prevItem()Move to previous item.
load()Load xml source.
start()Start the menu.
stop()Stop the menu.

Code Example :

<!-- Insert this javascript in your HTML -->

<script language="JavaScript">
 function getFlashMovie(movieName) {
  var isIE = navigator.appName.indexOf("Microsoft") != -1;
  return (isIE) ? window[movieName] : document[movieName];
 }
</script>


<!-- When you create the link to control the Menu, insert the following script you need
Note that the "getFlashMovie" function should input the ID of your Menu object -->

<a href="#" onclick = "getFlashMovie('menu01').load('imagesxxx/photos.xml');">load</a>
<a href="#" onclick = "getFlashMovie('menu01').start();">start</a>   
<a href="#" onclick = "getFlashMovie('menu01').stop();">stop</a>   
<a href="#" onclick = "getFlashMovie('menu01').nextItem();">next</a>
<a href="#" onclick = "getFlashMovie('menu01').prevItem();">previous</a>

Method

Description

onItemClick(id, selectedItem)

Dispatch when item was click.
id: ID of the swf
selectedItem: Object of the selected item

onItemSelect(id, selectedItem)Dispatch when item was select
id: ID of the swf
selectedItem: Object of the selected item
onItemRollOver(id, selectedItem)Dispatch when item was roll over
id: ID of the swf
selectedItem: Object of the selected item
onItemRollOut(id, selectedItem)Dispatch when item was roll out
id: ID of the swf
selectedItem: Object of the selected item

Download prototype javascript library in http://www.prototypejs.org/ and place it in the directory "Scripts".

And Insert the following code into your html inside <head></head> tag.

Code Example :

<script src="Scripts/prototype16.js" type="text/javascript"></script> 
<script src="Digicrafts/galerie/dwcontrol.js" type="text/javascript"></script>

 <script type="text/javascript">
 	
	var galerie = new DWControl('galerie');// 'galerie' is the name of your menu instance name

 	galerie.onItemClick = function(movie_id,selectedItem) {

   //Implement the function when item click
   
   $('item_event').innerHTML = "click";
   $('item_moviename').innerHTML = movie_id; 
   $('item_id').innerHTML = selectedItem.id ;
   $('item_title').innerHTML = selectedItem.title ;
   $('item_description').innerHTML = selectedItem.description ;
   $('item_link').innerHTML = selectedItem.link ; 
   //	alert ("Click on: " + movie_id + " " + selectedItem.id + " " + selectedItem.title);
   
   }

   galerie.onItemSelect = function(movie_id,selectedItem) {   
   //Implement the function when item select
   $('item_event').innerHTML = "select";
   $('item_moviename').innerHTML = movie_id; 
   $('item_id').innerHTML = selectedItem.id ;
   $('item_title').innerHTML = selectedItem.title ;
   $('item_description').innerHTML = selectedItem.description ;
   $('item_link').innerHTML = selectedItem.link ; 
   //alert ("Select: " + movie_id + " " + selectedItem.id + " " + selectedItem.title);
   }

   galerie.onItemRollOver = function(movie_id,selectedItem) {
   //Implement the function when mouse over
   $('item_event').innerHTML = "rollover";
   $('item_moviename').innerHTML = movie_id; 
   $('item_id').innerHTML = selectedItem.id ;
   $('item_title').innerHTML = selectedItem.title ;
   $('item_description').innerHTML = selectedItem.description ;
   $('item_link').innerHTML = selectedItem.link ; 
   //alert ("Roll Over: " + movie_id + " " + selectedItem.id + " " + selectedItem.title);
   }

   galerie.onItemRollOut = function(movie_id,selectedItem) {   
   //Implement the function when mouse out
   $('item_event').innerHTML = "rollout";
   $('item_moviename').innerHTML = movie_id; 
   $('item_id').innerHTML = selectedItem.id ;
   $('item_title').innerHTML = selectedItem.title ;
   $('item_description').innerHTML = selectedItem.description ;
   $('item_link').innerHTML = selectedItem.link ; 
   }
   </script>

The Insert Class Interface

Choose Menu 01 from the Insertbar and this interface will display.

1.ID - For the ID and Name tag for the Galerie. The default is galerie01 if leave it in blank.
2.Photo Source - For the source of photo stream in xml which can be generated by Photoshop.

 

Inspector Interface

Select the object and the properties inspector will appear.

1.ID - For the ID and Name tag for the Galerie. The default value is galerie01.
2.Width - Width of the Galerie in pixels.
3.Height - Height of the Galerie in pixels.
4.Photo Source - For the source of photo stream in xml which can be generated by Photoshop.
5.Background Color - To specify the background color of the Galerie. If you like to set the background to transparent, leave it in blank.
6.Sub Menu - The button to open sub-menu for advanced setting of the Galerie.

 

Appearance Interface

Click the "Appearance" button in the Inspector Interface to open this menu.

1. Items Alignment - The vertical alignment of items in the menu.
2. Item Scale - The scale of items when they move to front.
3. X Radius - Set the X radius of the rotation path of the Menu.
4. Y Radius - Set the Y radius of the rotation path of the Menu.
5. X Rotation - Set the X angle of the rotation path of the Menu.
6. Y Rotation - Set the Y angle of the rotation path of the Menu.
7. Blur - Amount of blur of the back items.
8. Mirror - Mirror effect of the items.
9. Alpha - Alpha amount of the back items.
10. Perspective Scaling - Enable perspective scaling of the side items.
11. Perspective Transform - Enable perspective transform of the side items.

Others Interface

Click the "Others" button in the Inspector Interface to open this menu.

1. Mouse Gesture for Rotation - The direction of items move when mouse over.
2. Rotation Acceleration - Speed of items move when mouse over.
3. Speed Limit - Maximum speed of items move.
4. Mouse Scroll Enable - Tick to enable the mouse scroll wheel control.
5. Enable Item Event - Enable javascript event for interaction.
6. Click to Center - Move the item to center when user click on it.
7. Click to URL - Tick to enable open new URL function when click on photo. The URL should be defined in the photo source xml file.

 

Registration Interface

Click the "Registration" button in the Inspector Interface to open this menu.

If you did not enter the information, a warning banner will be appeared in the Galerie. Please login to Digicrafts - The Ultimate UI for web design to register your product and get your registration code. Each license only for 1 domain.

1.Username - The username for registration.
2.Registration Code - The registration code generated by Digicrafts.

Links

Product Quick Link