Stretch Full Screen Image to take the whole screen

2 posts, 0 answers
  1. debett
    debett avatar
    30 posts
    Member since:
    Feb 2007

    Posted 04 Apr 2014 Link to this post

    Hello,

    I would like to use this control for a front page iamge gallery that would take the whole width of the screen. In other words, I would like to know how to stretch the image that may be smaller to truly take the full screen like here:

    https://www.ndhsb.org/


    Thank you!
    Tom
  2. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 09 Apr 2014 Link to this post

    Hello Tom,

    You can achieve the desired functionality by following this approach:

    1. Make sure that all ascendent element of RadImageGallery have explicit height (in px or %) and add this css rule

    CSS:

    html, body, form {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    2. Declare the image gallery like this:

    ASPX:

    <telerik:RadImageGallery runat="server" ID="RadImageGallery1" ImagesFolderPath="Images"
        AllowPaging="false" DisplayAreaMode="Image" Height="100%"  CssClass="CustomImageGallery">
        <ImageAreaSettings ShowNextPrevImageButtons="false" Height="100%" />
        <ThumbnailsAreaSettings EnableZoneScroll="true" Mode="ImageSlider" Position="Top"/>
        <ToolbarSettings ShowFullScreenButton="false" ShowItemsCounter="false" ShowThumbnailsToggleButton="false" ShowSlideshowButton="false"/>
    </telerik:RadImageGallery>

    The very important thing here is that  the image gallery itself and the image area both have height of 100%. The other setting disable some functionalists that are not needed since the toolbar is hidden.

    3. Hide the toolbar:

    CSS:

    .rigToolbar {
        display: none;
    }

    4. Set the position property of the gallery so that it stays fixed at the top:

    CSS:

    .CustomImageGallery {
        position:fixed;
        top: 0;
        left: 0;
    }

    5. Then you can place the dots wherever you like by using this rule:

    CSS:

    .rigDotList {
        bottom: 500px;
        left: 100px;
    }

    6. To turn on the slide show, you can do the following on page load:

    JavaScript:

    function pageLoad(){
        $find('<%=RadImageGallery1.ClientID%>').playSlideshow();
    }

    For more information on RadImageGallery client-side api and animations please refer to our online documentation:

    1. Using ImageGallery Animation
    2. Client-Side Basics
    3. Client-Side events

    Please find attached a sample page that illustrates the approach.

    I hope this helps.

    Regards,
    Venelin
    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top