This is a migrated thread and some comments may be shown as answers.

ImageGallery with a binary image from data source

5 Answers 98 Views
ImageGallery
This is a migrated thread and some comments may be shown as answers.
Derek
Top achievements
Rank 1
Derek asked on 14 Mar 2014, 07:54 PM
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>

5 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 19 Mar 2014, 11:20 AM
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.

 
0
Derek
Top achievements
Rank 1
answered on 19 Mar 2014, 12:27 PM
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>
0
Konstantin Dikov
Telerik team
answered on 24 Mar 2014, 10:01 AM
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.

 
0
Bernard
Top achievements
Rank 1
answered on 14 Aug 2014, 12:54 PM
I am having the same issue. Was this ever resolved?
0
Konstantin Dikov
Telerik team
answered on 18 Aug 2014, 10:26 AM
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.

 
Tags
ImageGallery
Asked by
Derek
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Derek
Top achievements
Rank 1
Bernard
Top achievements
Rank 1
Share this question
or