Thumbnail style

4 posts, 0 answers
  1. Fit2Page
    Fit2Page avatar
    442 posts
    Member since:
    Feb 2007

    Posted 26 Feb 2018 Link to this post

    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

  2. Vessy
    Admin
    Vessy avatar
    2067 posts

    Posted 26 Feb 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Fit2Page
    Fit2Page avatar
    442 posts
    Member since:
    Feb 2007

    Posted 27 Feb 2018 in reply to Vessy Link to this post

    Hi Vessy,

     

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

    Marc

  4. Vessy
    Admin
    Vessy avatar
    2067 posts

    Posted 27 Feb 2018 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top