I want to show few pictures and text, like a animation we do in microsoft power point, i want to achive this using asp .net, so i am very new to this infragistic so please kindly help me to achive this..
Thanks in advance
Sharan
I believe the "Client Side Object" example in the WebImageViewer online examples section is closest to what you need. You can use the client-side object model (CSOM) of the control to navigate to next items on demand (click on button for example). Please, take a look at the source code of the example there - it may provide a good starting point:
<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/WebFeatureBrowser/Sample.master" %><script runat="server"> protected void Page_Load(object sender, EventArgs e) { ImageItem Wizard = new ImageItem("~/webfeaturebrowser/images/WebImageViewer/image1.jpg", "Wizard", ""); this.WebImageViewer1.Items.Add(Wizard); ImageItem Heroes = new ImageItem("~/webfeaturebrowser/images/WebImageViewer/image2.jpg", "Heroes", ""); this.WebImageViewer1.Items.Add(Heroes); ImageItem Caped = new ImageItem("~/webfeaturebrowser/images/WebImageViewer/image3.jpg", "Caped Crusader", ""); this.WebImageViewer1.Items.Add(Caped); ImageItem Turtle = new ImageItem("~/webfeaturebrowser/images/WebImageViewer/image4.jpg", "Turtle", ""); this.WebImageViewer1.Items.Add(Turtle); ImageItem Battle = new ImageItem("~/webfeaturebrowser/images/WebImageViewer/image5.jpg", "Battle", ""); this.WebImageViewer1.Items.Add(Battle); ImageItem Tiger = new ImageItem("~/webfeaturebrowser/images/WebImageViewer/image6.jpg", "Ferocious Tiger", ""); this.WebImageViewer1.Items.Add(Tiger); ImageItem MechWarrior = new ImageItem("~/webfeaturebrowser/images/WebImageViewer/image7.jpg", "MechWarrior", ""); this.WebImageViewer1.Items.Add(MechWarrior); }</script><asp:Content runat="server" ContentPlaceHolderID="RunningCodeContentPlaceHolder"> <script type="text/javascript"> function startScroll(cell, dir) { var imageViewer = $find('<%= WebImageViewer1.ClientID %>'); imageViewer.get_scrollAnimations().set_type($IG.ScrollAnimation.Continuous); if(dir == "next") imageViewer.navigateNext(); else imageViewer.navigatePrev(); } function endScroll(cell) { var imageViewer = $find('<%= WebImageViewer1.ClientID %>'); imageViewer.endNavigation(); imageViewer.get_scrollAnimations().set_type($IG.ScrollAnimation.NextItem); } function nextImage(cell) { var imageViewer = $find('<%= WebImageViewer1.ClientID %>'); imageViewer.get_scrollAnimations().set_type($IG.ScrollAnimation.NextItem); imageViewer.navigateNext(); } function previousImage(cell) { var imageViewer = $find('<%= WebImageViewer1.ClientID %>'); imageViewer.get_scrollAnimations().set_type($IG.ScrollAnimation.NextItem); imageViewer.navigatePrev(); } function scrollToView(radioBtn) { var imageViewer = $find('<%= WebImageViewer1.ClientID %>'); imageViewer.get_scrollAnimations().get_nextItemAnimation().moveItemIntoFocus(imageViewer.get_items().getItem(parseInt(radioBtn.value))); } </script> <br> <br> <table width="720"> <tr> <td> <ig:WebImageViewer ID="WebImageViewer1" runat="server" Height="150px" Width="595px" Header-Text="Celestial Bodies" > <ScrollAnimations > <NextItem Alignment="Center" /> </ScrollAnimations> <PreviousButton Visible="False" /> <NextButton Visible="False" /> <Header Text="Celestial Bodies"> </Header> </ig:WebImageViewer> </td> <td> <input name="Radio1" type="radio" value="0" onclick="scrollToView(this)" checked="checked" />First<br /> <input name="Radio1" type="radio" value="1" onclick="scrollToView(this)">Second<br /> <input name="Radio1" type="radio" value="2" onclick="scrollToView(this)" />Third<br /> <input name="Radio1" type="radio" value="3" onclick="scrollToView(this)" />Fourth<br /> <input name="Radio1" type="radio" value="4" onclick="scrollToView(this)" />Fifth<br /> <input name="Radio1" type="radio" value="5" onclick="scrollToView(this)" />Sixth<br /> <input name="Radio1" type="radio" value="6" onclick="scrollToView(this)" />Seventh<br /> </td> <tr> <td style="padding-top: 30px"> <center> <table style="width: 200px" border="0"> <tr> <td onmouseover="startScroll(this, 'prev')" onmouseout="endScroll(this)" align="center" valign="bottom" style="cursor: pointer;"><img src="../images/WebImageViewer/ContPrevBtn.jpg" title="Hover" /></td> <td onclick="previousImage(this)" align="center" valign="bottom" style="cursor: pointer;"><img src="../images/WebImageViewer/PrevBtn.jpg" title="Click" /></td> <td onclick="nextImage(this)" align="center" valign="bottom" style="cursor: pointer;"><img src="../images/WebImageViewer/NextBtn.jpg" title="Click" /></td> <td onmouseover="startScroll(this, 'next')" onmouseout="endScroll(this)" align="center" valign="bottom" style="cursor: pointer;"><img src="../images/WebImageViewer/ContBtn.jpg" title="Hover" /></td> </tr> </table> </center> </td> </tr> </tr> </table>
I know we cant achieve full things like a powerpoint, atleast we can do small kind of animation rite..
My problem is, i want to display some images with the text into my web application, images should change after some interval and also the text, i'm trying to bring those images and text from database, and i want to show the text like HAPPY B'DAY and all, so i want to add some animation while changing those images and text after some time of interval .....
so can we achieve this, i hope you are clear with this.
It really depends on what you are trying to achieve... but unfortunately I do not believe that a full blown Microsoft Powerpoint functionality is possible with any type of control.
Still, you can experiment with WebImageViewer, take a look at its samples and documentation and see for yourself what are the limits of the control.
Its fine but iwant to do some animation to those images like we do in microsoft powerpoint with the text.
Please can you help me?????
We have a number of samples demonstrating WebImageViewer in action - please take a look at our Samples Browsers located here:
http://samples.infragistics.com/2008.1/webfeaturebrowser/
and especially the WebImageViewer examples in the Aikido section. Full sample source code is available in the code tabs above the example.