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
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
Rank 1
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.
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
Rank 1
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
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