Can't create rotator with thumbnail

[Pedro Faria]

Hi

I'm trying to setup a rotator with thumbnails, and I'm having some issues. First of all, I'm using Unobtrusive in my project, but I don't see this being relevant (I guess). Because I want a template for each image (stored in azure blob storage), I'm using the Items() method to setup the content, and then, the methods "ShowThumbnail(true)" and ".ThumbnailSourceID("thumbnail")" to setup the thumbnail, where "thumbnail" is an ul tag. I followed every step in the documentation

Before, I was using the rotator withOUT the thumbnails and everything was working fine. However, for some reason, when I'm trying to enable the thumbnail, all application is broken. When I check the console, I'm getting this error:

I tried to research what could be the cause, with no success.

"Fun fact":

When I use the "DisplayItemCount" method with "2", the error disappears, but the thumbnail doesn't show up (and it only shows one element, but that's not important)

I tried also to setup the Unobstrusive to false, but also with no success

Any ideas of what could be the problem?

All my assemblies are up to date, and the target .NET Framework is 4.7.1

Best regards,

[Buvana Sathasivam]

Hi Pedro,   

  

Thanks for using Syncfusion Products.   

  

We have created a sample with your shared details and referred a normal image path with unobtrusive enabled. Please downloaded the sample from following link.   

   

Sample: http://www.syncfusion.com/downloads/support/forum/135841/ze/Rotator_unobtrusive1913696136    

   

  

Can you confirm the below details to check the issue?   

1. Please share us a clear screenshot.
2. Are you facing this issue on azure blob storage referred in image path only or with normal images too?
3. Please share your sample or code snippets to check the issue?

This information will help to analyze the issue and provide you the response as early as possible.   

   

Regards,   

Buvana S   

 

[Pedro Faria]

Hi!

Thank you for your response. I managed to discover the problem, and it made some sense to me. In the _Layout.cshtml, the parend div of render body was with display set to none due to a loading animation. I managed to fix that. However, I'm facing with a new problem that's making me very confused:

I know that the rotator, to be rendered properly, must be inside a div with a specific with. I don't know how to choose that width. I'll try to explain:

• This happens inside a common details page, where each object have pictures that I want to display on the page.
  
• One object has only one picture with ~580px width). If I choose a 500px width to the parent div, it won't render. But with 350px it will.
• If I add more pictures width different widths, I can choose a width like 1000px, but it will break with 1100px.

I created a template that reproduces exactly my problem, with the correct css rules, with this 2 examples:
https://drive.google.com/file/d/1TNDEZ8RdnC5k-e6HGdqdkkhAX_7PUJ_8/view

And, as requested, two print screens: one with the application broken, and other not.

Best regards,

PS:
Speaking in your response, these problems are happening also with local images,

[Buvana Sathasivam]

Hi Pedro,   

  

Thanks for your update.   

  

We can reproduce the reported issue and we have internally log the issue “If thumb width is increased more than the thumb items width, script error is thrown”. Fix for the issue will be included in any one of our upcoming releases.      

  

Regards,   

Buvana S