Image Gallery not loading correctly
I'm using Sitefinity 5.4 and I'm trying to add an Image Gallery widget (Thumbnail strip + Image on the same page), but it's not working correctly.
See here: shop.stephenjoseph5x.com/.../About
The gallery loads very slow, and after it's loaded, it doesn't work correctly.
Also, the last few images are all fuzzy, as if they are small images that have been stretched out by the browser. And if you check the code, this is indeed what's happening. But in reality, the images are over 300px wide. For some reason, the gallery is using smaller versions of the images, but I can't find a setting anywhere that might be causing this.
Help?
Hi Jennifer.
Were you able to fix this issue.
I am experiencing the same one on my end.
Thanks
Hi Mouad,
I have checked the information we have provided to Jennifer in the ticket she has opened related to the same issue and it appeared that the issue is cased by the page template the pages are based on.
When testing the behavior on a brand new page which is not based on a page template the Image gallery widget was working properly. Can you please create a brand new page with no template (please check the Don't use template option (start from scratch) option when creating the page) and the Image gallery should work properly?
I am also pasting here some of the additional information I have provided related to the Image Gallery widget when using the Thumbnail strip - Image on the same page mode which might be also useful:
Please note that when you choose the Thumbnail strip - Image on the same page mode, the whole functionality comes from the Galleria JavaScript plugin which Sitefinity is using.
The image gallery plugin is using the original size of the images as shown here. But it has a predefined dimensions for the gallery container and for the images (please, refer to the screenshot). Therefore, the images which you have upload are being re-sized to fit the predefined dimensions and this might cause the images to look fuzzy. I can suggest that you add some css styling in order to set the desired height and width of the gallery container and your images should be displayed properly. Here is an example:
.galleria-container
height
:
1200px
;
width
:
1200px
;
.galleria-container
height
:
1200px
;
.galleria-stage
bottom
:
100px
;
.galleria-thumbnails-container
height
:
90px
;
.galleria-thumbnails .galleria-image
height
:
90px
;
width
:
150px
;