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. |
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. |