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

Resize with Browser Window

5 Answers 596 Views

ImageGallery

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

RBarnes asked on 30 Aug 2018, 01:05 PM

I have a need for my image to be 100% width of the screen, and the height auto adjust based on the width.

I've got it working as desired using the below, the image height adjust with the width for different window sizes.
But, the animations don't work, the image simply disappears. If I don't have the .rigItemBox class as shown below, the animations do work, but the image doesn't resize as desired.

Any Suggestions?

<form id="form1" runat="server">
           <style type="text/css">
            html, body, form {
             margin: 0px !important;
        }
            /*Resize of the Image works as desired when the browser window is resized, but it breaks Animations, the image disappears*/
        .rigItemBox {
            height: 100% !important;
            width: 100% !important;
        }
        .RadImageGallery {
            background-color: transparent !important;
        }
        .rigToolbar {
            display: none;
        }
        .rigActiveImage img {
             padding: 0px !important;
             width: 100% !important;
        }

        </style>
         <script type="text/javascript"> // Auto start the main carousel/slideshow
            function pageLoad() {
                $find('<%=RadImageGallery1.ClientID%>').playSlideshow();
            }
        </script>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div>A div with some text above our Image Gallery</div>
         <telerik:RadImageGallery ID="RadImageGallery1" runat="server" LoopItems="True" Width="100%"
            ToolTip="Click to View All Featured Products/Projects" AppendDataBoundItems="True" ImagesFolderPath="~/Images/Projects/">
            <ThumbnailsAreaSettings Mode="ImageSlider" />
            <ImageAreaSettings Width="100%" ResizeMode="Fit" ShowDescriptionBox="false" />
            <ToolbarSettings Position="None" />
            <ClientSettings>
                <AnimationSettings SlideshowSlideDuration="3000">
                    <NextImagesAnimation Speed="1500" Type="Fade" />
                    <PrevImagesAnimation Speed="1500" Type="Fade" />
                </AnimationSettings>
            </ClientSettings>
        </telerik:RadImageGallery>
        <div>A div with some text below our Image Gallery</div>
    </form>

5 Answers, 1 is accepted

answered on 04 Sep 2018, 10:38 AM

Hi Roger,

Setting the ResizeMode of the ImageArea to Fill should bring the target result. Please, give it a try and let me know if the result fits your needs:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<style>

html, body, form {

height:100%;

margin:0;

padding:0;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager runat="server"></telerik:RadScriptManager>

<script type="text/javascript"> // Auto start the main carousel/slideshow

function pageLoad() {

$find('<%=RadImageGallery1.ClientID%>').playSlideshow();

}

</script>

<div>A div with some text above our Image Gallery</div>

<telerik:RadImageGallery ID="RadImageGallery1" runat="server" LoopItems="True" Width="100%" Height="100%"

ToolTip="Click to View All Featured Products/Projects" AppendDataBoundItems="True" ImagesFolderPath="~/Images/Images/">

<ThumbnailsAreaSettings Mode="ImageSlider" />

<ImageAreaSettings Width="100%" ResizeMode="Fill" ShowDescriptionBox="false" />

<ToolbarSettings Position="None" />

<ClientSettings>

<AnimationSettings SlideshowSlideDuration="3000">

<NextImagesAnimation Speed="1500" Type="Fade" />

<PrevImagesAnimation Speed="1500" Type="Fade" />

</AnimationSettings>

</ClientSettings>

</telerik:RadImageGallery>

<div>A div with some text below our Image Gallery</div>

</form>

</body>

</html>

Regards,
Vessy
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 04 Sep 2018, 01:35 PM

That's not the desired results I'm looking for, the image sides are cut off.

This page has the desired effects I'm looking for https://www.us.kohler.com/us/

The height of the image is adjusted as the browser window is made smaller, keep the entire image in view and not cut off.

With the .rigItemBox which is specified in my original post, the image does resize as desired, and the wrapper container does as well. But animations don't work, and the page will scroll to the top of the page when the image changes, "sometimes". If I take out .rigItemBox completely, the image will resize as desired, but the wrapper contain does not, it leave the navigation dots at a static location.

answered on 07 Sep 2018, 01:50 PM

The animations do work if you take out the .rgItemBox class in my original post. However as noted in both of my post, the wrapper container does not resize, the circles that can be used for navigating the images manually do not change position with the child elements. The content below the rotator should stay just below the image when the browser is resized. As noted above, I'm looking for the exact functionality as demonstrated via https://www.us.kohler.com/us/

If you go to the link above and resize the browser, notice any content below their main image stays just below the main image as the browser is resized. This is not the case with RadImageGallery

answered on 12 Sep 2018, 09:27 AM

Hi Roger,

The height of the image wrapper (.rigItemBox) is calculated via JavaScript during the animation, this is why setting its height to 100% is breaking the animation logic (it expects size in pixels). Setting the height of this element dynamically via JavaSCript, though, should allow you to achieve the target result (e.g. to be equal to the loaded img element).

For example, you can do that the ImageGalleryLoad and window resize event handler in a similar way:

<form id="form1" runat="server">

<style type="text/css">

html, body, form {

margin: 0px !important;

}

/*Resize of the Image works as desired when the browser window is resized, but it breaks Animations, the image disappears*/

.rigItemBox {

/*height: 100% !important;*/

width: 100% !important;

}

.RadImageGallery {

background-color: transparent !important;

}

.rigToolbar {

display: none;

}

.rigActiveImage img {

padding: 0px !important;

width: 100% !important;

height: auto !important;

}

</style>

<script type="text/javascript">

var $ = $telerik.$;

// Auto start the main carousel/slideshow

function pageLoad() {

$(window).on('resize', resizeGallery);

$(".rigItemBox").height($telerik.$(".rigActiveImage img").height());

$find('<%=RadImageGallery1.ClientID%>').playSlideshow();

}

function resizeGallery() {

$(".rigItemBox").height($telerik.$(".rigActiveImage img").height());

}

</script>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<div>A div with some text above our Image Gallery</div>

<telerik:RadImageGallery ID="RadImageGallery1" runat="server" LoopItems="True"

ToolTip="Click to View All Featured Products/Projects" AppendDataBoundItems="True" ImagesFolderPath="~/Images/">

<ThumbnailsAreaSettings Mode="ImageSlider" />

<ImageAreaSettings ShowDescriptionBox="false" />

<ToolbarSettings Position="None" />

<ClientSettings>

<AnimationSettings SlideshowSlideDuration="3000">

<NextImagesAnimation Speed="1500" Type="Fade" />

<PrevImagesAnimation Speed="1500" Type="Fade" />