Thumbnail style

[Fit2Page]

Hi,

I want to apply some additional styling on the thumbnails: 1px border and some margin.
Now the thumbnails presentation is starting to act a bit weird, I guess something to do with hover etc.

Do you think a styling like this is possible:

https://www.coolblue.nl/product/783943/samsung-ue43mu6100.html

Marc

[Vessy]

Hi Marc,

You can achieve such layout by configuring RadImageGallery's DisplayArea="Image" and ThumbnailsArea="Thumbnails". When using the controls in thsi mode each thumbnail will be placen inside a <li> element that can be accessed with a similar CSS cascade:

.RadImageGallery ul.rigThumbnailsList li{
    padding: 5px;
}
.RadImageGallery ul.rigThumbnailsList li img:hover{
    border: 1px solid blue;
}

<telerik:RadImageGallery RenderMode="Lightweight" runat="server" ID="RadImageGallery1" DisplayAreaMode="Image"
    Width="600px" Visible="true" ImagesFolderPath="~/Image-Gallery/Examples/Functionality/Modes/images">
    <ImageAreaSettings Height="500px" />
    <ThumbnailsAreaSettings Height="110px" />
</telerik:RadImageGallery>

Detailed information degarding the HTML output of the control can be found here:
https://docs.telerik.com/devtools/aspnet-ajax/controls/imagegallery/appearance-and-styling/html-output

Regards,
Vessy
Progress Telerik

[Fit2Page]

Hi Vessy,

 

When I apply such code the thumbnails are going over two lines, that is my problem.
Please refer to attached screenshot.

Marc

[Vessy]

Hi Marc,

I am afiraid that the provided screenshot is not enough for me to reproduce the problem. Can you share the exact configuration leading to this behavior so I can replicate it and advice you furter?

Regards,
Vessy
Progress Telerik