ImageGallery with a binary image from data source

6 posts, 0 answers
  1. Derek
    Derek avatar
    118 posts
    Member since:
    Oct 2008

    Posted 14 Mar 2014 Link to this post

    We are trying to use the imagegallery, with a data source that returns a sequence of binary images from a data source. THe first image shows correctly, but when it attempts to move to the next image the loading icon appears and nothing happens. Here's the code. We've also tried it with a js function to play the slideshow, but the problem appears whether the slideshow plays automatically or not.

    Any suggestions as to what we are doing wrong?

    <telerik:RadImageGallery ID="RadImageGallery1" runat="server" Width="100%" Height="310px"
               LoopItems="True" RenderMode="Auto" DataImageField="ImageFile"
               DataSourceID="dsRotationImages" DataTitleField="ImageDescription">
               <ThumbnailsAreaSettings Position="Bottom" ScrollOrientation="Horizontal" Mode="ImageSlider" />
               <ToolbarSettings ShowSlideshowButton="True" ItemsCounterFormat="Image {0} / {1}"
                    
                   ExitFullScreenButtonText="Exit" />
               <ClientSettings>
                   <AnimationSettings SlideshowSlideDuration="3700">
                       <NextImagesAnimation Type="Blocks" Easing="EaseOutSine" Speed="2000" />
                       <PrevImagesAnimation Type="Blocks" Easing="EaseOutSine" Speed="2000" />
                   </AnimationSettings>
                   <ClientEvents OnImageGalleryCreated="ImageGalleryCreated" />
               </ClientSettings>
           </telerik:RadImageGallery>
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1798 posts

    Posted 19 Mar 2014 Link to this post

    Hello Derek,

    I have tested your RadImageGallery settings with a data source containing a field with binary image and everything is working correctly on my end.

    Could you please confirm that you have a definition for the ImageGalleryCreated? Following is the sample scenario that I have tested on my end where the Picture is the data field holding the binary image:
    <telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            function ImageGalleryCreated(sender, args) {
            }
        </script>
    </telerik:RadCodeBlock>
     
    <telerik:RadImageGallery ID="RadImageGallery1" runat="server" Width="100%" Height="310px"
        LoopItems="True" RenderMode="Auto" DataImageField="Picture" DataTitleField="AccountType"
        DataSourceID="SqlDataSource1">
        <ThumbnailsAreaSettings Position="Bottom" ScrollOrientation="Horizontal" Mode="ImageSlider" />
        <ToolbarSettings ShowSlideshowButton="True" ItemsCounterFormat="Image {0} / {1}"
            ExitFullScreenButtonText="Exit" />
        <ClientSettings>
            <AnimationSettings SlideshowSlideDuration="3700">
                <NextImagesAnimation Type="Blocks" Easing="EaseOutSine" Speed="2000" />
                <PrevImagesAnimation Type="Blocks" Easing="EaseOutSine" Speed="2000" />
            </AnimationSettings>
            <ClientEvents OnImageGalleryCreated="ImageGalleryCreated" />
        </ClientSettings>
    </telerik:RadImageGallery>
     
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString='<%$ ConnectionStrings:TelerikConnectionString %>'
        SelectCommand="SELECT * FROM [Accounts]"></asp:SqlDataSource>

    In general, if the loading panel is displayed, this should prove that there are no initial JavaScript errors that could break the functionality of the control and most likely, there is some server-side error occurring when you try to change the image. Could you please inspect your page and see if there is an indication of such error in the browsers console?

    I am looking forward to your reply with the result.



    Regards,
    Konstantin Dikov
    Telerik
     

    DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Derek
    Derek avatar
    118 posts
    Member since:
    Oct 2008

    Posted 19 Mar 2014 in reply to Konstantin Dikov Link to this post

    Hi Konstantin;

    We tried again, using the same code that you provided, but with our own data source. We've confirmed that the data source returns a sequence of images (14 in total), and it appears to do that. The first image appears properly, but the second and subsequent images don't load as you can see from the attached photo.

    The only different is that we initially had code to autostart the slideshow; however when we remove that, and start the show manually, the same thing occurs.
    function ImageGalleryCreated(sender) {
               var imageGallery = $find('<%=RadImageGallery1.ClientID%>');
               imageGallery.playSlideshow();
           }

    Here's our code for the image gallery (modified from what you sent, to refer to our datasource and column names;
    <div class="photo-container">
           <telerik:RadImageGallery ID="RadImageGallery1" runat="server" Width="100%" Height="310px"
               LoopItems="True" RenderMode="Auto" DataImageField="ImageFile" DataTitleField="ImageDescription"
               DataSourceID="dsRotationImages">
               <ThumbnailsAreaSettings Position="Bottom" ScrollOrientation="Horizontal" Mode="ImageSlider" />
               <ToolbarSettings ShowSlideshowButton="True" ItemsCounterFormat="Image {0} / {1}"
                   ExitFullScreenButtonText="Exit" />
               <ClientSettings>
                   <AnimationSettings SlideshowSlideDuration="3700">
                       <NextImagesAnimation Type="Blocks" Easing="EaseOutSine" Speed="2000" />
                       <PrevImagesAnimation Type="Blocks" Easing="EaseOutSine" Speed="2000" />
                   </AnimationSettings>
                   <ClientEvents OnImageGalleryCreated="ImageGalleryCreated" />
               </ClientSettings>
           </telerik:RadImageGallery>
           <asp:ObjectDataSource ID="dsRotationImages" runat="server" OldValuesParameterFormatString="original_{0}"
               SelectMethod="GetData" TypeName="RotationImagesTableAdapters.RotationImagesTableAdapter">
           </asp:ObjectDataSource>
       </div>
  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1798 posts

    Posted 24 Mar 2014 Link to this post

    Hello Derek,

    I have modified the previously provided example and I have tested with ObjectDataSource control, but still no issue is observed on my end.

    For your convenience I am attaching the sample page that I have tested on my end. Could you please give it a try and test it with your data source and see if everything will work correctly.

    If you continue to experience the same issue, please open a regular support ticket and try to isolate a sample, runnable project, so we could inspect it locally.

    I am looking forward to your reply.


    Regards,
    Konstantin Dikov
    Telerik
     

    Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.

     
  6. Bernard
    Bernard avatar
    1 posts
    Member since:
    Mar 2013

    Posted 14 Aug 2014 Link to this post

    I am having the same issue. Was this ever resolved?
  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1798 posts

    Posted 18 Aug 2014 Link to this post

    Hello Bernard,

    As you can see from the previous post on this issue, we were unable to replicate such behavior on our end and therefore, no bug was logged in our system for fixing.

    If you are experiencing the same problem, could you please open a regular support ticket with a sample, runnable project replicating the problem, so we could inspect it locally and hopefully, isolate what is causing it.

    I am looking forward to your reply.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017