Resize with Browser Window

6 posts, 0 answers
  1. RBarnes
    RBarnes avatar
    57 posts
    Member since:
    Oct 2012

    Posted 30 Aug 2018 Link to this post

    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>

  2. Vessy
    Admin
    Vessy avatar
    2067 posts

    Posted 04 Sep 2018 Link to this post

    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>
     
    <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.
  3. RBarnes
    RBarnes avatar
    57 posts
    Member since:
    Oct 2012

    Posted 04 Sep 2018 in reply to Vessy Link to this post

    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.  

  4. Vessy
    Admin
    Vessy avatar
    2067 posts

    Posted 07 Sep 2018 Link to this post

    Hi Roger,

    The animation is working properly at my end when testing the configuration provided in you initial reply . I am testing it in Chrome/IE/Firefox with the latest 2018.2.710 version of the controls - is this the environment in which you are facing the problem as well? You can see the video from my test with the latest version here:
    https://www.screencast.com/t/pLRcEQIhqosv

    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.
  5. RBarnes
    RBarnes avatar
    57 posts
    Member since:
    Oct 2012

    Posted 07 Sep 2018 in reply to Vessy Link to this post

    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

  6. Vessy
    Admin
    Vessy avatar
    2067 posts

    Posted 12 Sep 2018 Link to this post

    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" />
                </AnimationSettings>
            </ClientSettings>
        </telerik:RadImageGallery>
        <div>A div with some text below our Image Gallery</div>
    </form>


    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.
Back to Top