This is a migrated thread and some comments may be shown as answers.

Stretch Full Screen Image to take the whole screen

1 Answer 772 Views
ImageGallery
This is a migrated thread and some comments may be shown as answers.
debett
Top achievements
Rank 1
debett asked on 04 Apr 2014, 05:09 PM
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

1 Answer, 1 is accepted

Sort by
0
Venelin
Telerik team
answered on 09 Apr 2014, 07:53 AM
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.

 
Tags
ImageGallery
Asked by
debett
Top achievements
Rank 1
Answers by
Venelin
Telerik team
Share this question
or