NEWSLETTER
 Note: SlidingMenu v2.0 is NOT compatible with vs2005, please do not try to install SlidingMenu v2.0 with your vs2005 - it will not work.
With layered areas you can hold a lot more information on a lot less space - SlidingMenu slide through these layers!
  Menulab home >> SlidingMenu >> Examples >> ImageBox         ASP.NET Offsite Freelance Programmer  
      DataBound
      Manual
 
 
 
 
 
 
SlidingMenu example : ImageBox Menu Examples home
1 - 2 - 3 - 4
    Tip: Favourite Design makes high quality web design for
highly competitive prices.
This example is a little more complex than it may first look. First of all, the GroupHeaders are all set to zero height (see line 2). Since the GroupHeaders in basic mode is the key to open the Groups and you cannot click on the GroupHeaders in this example, you will need to make alternative keys yourself. In this example there are alternative keys at different places, the left and right handles opens Groups (instead of the missing GroupHeaders) by delegate the handle images onclick events to the wm_3_SMPlay(...) function. wm_3_SMPlay(...) is a SlidingMenu Client API object and can open Groups, you simply specify what SlidingMenu and which GroupIndex in that SlidingMenu to open, eg. wm_3_SMPlay('smImageBox', 2) will open the third Group in the smImageBox SlidingMenu. You can also read more about Open Groups from JavaScript in the Tips & Tricks section or read the wm_3_SMPlay Documentation.
As this example build on the wm_3_SMPLay Client API object which is available only in browsers SlidingMenu define as uplevel browsers, this example can only run in SlidingMenu uplevel browsers. Please check Browser Support to see which browsers currently is SlidingMenu uplevel browsers.
Here  I show only the code for the 2 first images as the code for the 2 last images is identical in princip. However if you click the Clipboard button all the XML/HTML markup for this example will be copied to your clipboard and you can paste it anywhere between the <FORM></FORM> tags in your .aspx-file.
SlidingMenu markup is blue, Comments are green.
0.<wm:SlidingMenu id=smImageBox runat="server">
1.     <SlidingMenuStyle Width="350" Height="220" BorderWidth="0" />
2.     <GroupHeaderStyle BorderWidth="0" Height="0" />
3.     <GroupCanvasStyle />
4.     <!--Starting the first Group that shows the Favourite Design image-->
5.     <AddManualGroup>
6.         <GroupHeaderStyle OpenThisGroupAtStartup="true" />
7.         <GroupCanvasStyle />
8.         <GroupHeader></GroupHeader>
9.         <GroupCanvas>
10.             <table border="0" cellpadding="0" cellspacing="0">
11.                 <tr>
12.                     <!--In the first Group, the left handle should not point to a previous Group, since there is no previous Group-->
13.                     <td valign="top"><img src="/images/slidingmenu/example_imagebox/handle_left_noslide.png" height="200" border="0" style="cursor:normal" title="Already showing first image"></td>
14.                     <td valign="top"><a href="http://www.favouritedesign.com" target="_blank"><img src="/images/slidingmenu/example_imagebox/slide_favouritedesign.jpg" border="0" height="200" title="Favourite Design - my wifes webdesign company"></a></td>
15.                     <!--In the first Group, the right handle should point to the second Group, wm_3_SMPlay('smImageBox', 1) -->
16.                     <td valign="top"><img src="/images/slidingmenu/example_imagebox/handle_right_default.png" height="200" border="0" onmouseover="this.src='/images/slidingmenu/example_imagebox/handle_right_alternate.png'" onmouseout="this.src='/images/slidingmenu/example_imagebox/handle_right_default.png'" style="cursor:hand" title="Next image" onclick="wm_3_SMPlay('smImageBox', 1)"></td>
17.                 </tr>
18.                 <!--Beneath each image there is a number sequence, there the numbers acts as links to the different Groups-->
19.                 <tr>
20.                     <td></td>
21.                     <td align="center">
22.                         <!--Since this is the first Group, the number representing the first Group is disabled and styled differently (with bigger font)-->
23.                         <span class="imagebox_number_chosen">1</span>
24.                         - <span onclick="wm_3_SMPlay('smImageBox', 1)" style="cursor:hand">2</span>
25.                         - <span onclick="wm_3_SMPlay('smImageBox', 2)" style="cursor:hand">3</span>
26.                         - <span onclick="wm_3_SMPlay('smImageBox', 3)" style="cursor:hand">4</span>
27.                     </td>
28.                     <td></td>
29.                 </tr>
30.             </table>
31.         </GroupCanvas>
32.     </AddManualGroup>
33.     <!--Ending the first Group-->
34.     <!--Starting the second Group that show the Ohsei image-->
35.     <AddManualGroup>
36.         <GroupHeaderStyle />
37.         <GroupCanvasStyle />
38.         <GroupHeader></GroupHeader>
39.         <GroupCanvas>
40.             <table border="0" cellpadding="0" cellspacing="0">
41.                 <tr>
42.                     <!--In the second Group the left handle should point to the first Group, wm_3_SMPlay('smImageBox', 0)-->
43.                     <td valign="top"><img src="/images/slidingmenu/example_imagebox/handle_left_default.png" height="200" border="0" onmouseover="this.src='/images/slidingmenu/example_imagebox/handle_left_alternate.png'" onmouseout="this.src='/images/slidingmenu/example_imagebox/handle_left_default.png'" style="cursor:hand" title="Previous image" onclick="wm_3_SMPlay('smImageBox', 0)"></td>
44.                     <td valign="top"><a href="http://www.ohseinstitute.org" target="_blank"><img src="/images/slidingmenu/example_imagebox/slide_ohsei.jpg" border="0" height="200" title="OHSEI works for improved working conditions in development countries (their website is made by Favourite Design)"></a></td>
45.                     <!--In the second Group the right handle should point to the third Group, wm_3_SMPlay('smImageBox', 2)-->
46.                     <td valign="top"><img src="/images/slidingmenu/example_imagebox/handle_right_default.png" height="200" border="0" onmouseover="this.src='/images/slidingmenu/example_imagebox/handle_right_alternate.png'" onmouseout="this.src='/images/slidingmenu/example_imagebox/handle_right_default.png'" style="cursor:hand" title="Next image" onclick="wm_3_SMPlay('smImageBox', 2)"></td>
47.                 </tr>
48.                 <!--Beneath the image comes the number sequence-->
49.                 <tr>
50.                     <td></td>
51.                     <td align="center">
52.                         <!--Since this is the second Group, the second number is disabled and styled differently (with a bigger font)-->
53.                         <span onclick="wm_3_SMPlay('smImageBox', 0)" style="cursor:hand">1</span>
54.                         - <span class="imagebox_number_chosen">2</span>
55.                         - <span onclick="wm_3_SMPlay('smImageBox', 2)" style="cursor:hand">3</span>
56.                         - <span onclick="wm_3_SMPlay('smImageBox', 3)" style="cursor:hand">4</span>
57.                     </td>
58.                     <td></td>
59.                 </tr>
60.             </table>
61.         </GroupCanvas>
62.     </AddManualGroup>
63.     <!--Ending the second Group-->
64.     ... 2 more Groups ...
65.</wm:SlidingMenu>
Contact Menulab   |   Terms & Conditions   |   Privacy Policy   |   Sitemap   |   Copyright © Menulab 2003. All rights reserved.