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.