ImageGallery with a binary image from data source

[Derek]

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>

[Konstantin Dikov]

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

 

 

[Derek]

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>

[Konstantin Dikov]

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

 

 

[Bernard]

I am having the same issue. Was this ever resolved?

[Konstantin Dikov]

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