ImageGallery resize to browser window

[Andy F.]

I have a ImageGallery for showing all thumbnails in a page with Width="100%", which shows fine, but I can't figure out two things:

1. How do you get Height=100%?  I want the gallery to fill the browser page.

2. On resize of the browser window, how do I get the control to resize and adjust the layout to match?

This is what I have for the control right now:

<telerik:RadImageGallery runat="server" ID="rigItems" DisplayAreaMode="Thumbnails" Width="100%" Visible="true" LoopItems="false" AllowPaging="false" ImagesFolderPath="~/"
    DataImageField="ImageUrl" DataTitleField="ImageTitle" DataThumbnailField="ImageUrl" OnNeedDataSource="rigItems_NeedDataSource" >
    <ImageAreaSettings Height="600px" ResizeMode="Fit" />
    <ThumbnailsAreaSettings Height="800px" ShowScrollButtons="false" ThumbnailsSpacing="1px" ThumbnailHeight="200" ThumbnailWidth="200" Mode="Thumbnails" ScrollOrientation="Vertical" ShowScrollbar="true" />
</telerik:RadImageGallery>

[Viktor Tachev]

Hi Andy,

In order to make the control take the whole height of the page you need to set the height of all elements that wrap RadImageGallery to 100%. e.g if only the RadImageGallery is placed on the page you should set the height for html, body and form elements.

html, body, form {
            height: 100% ;
        }

Regards,
Viktor Tachev
Telerik

[Andy F.]

That was only half the problem... the other half is on resizing the browser, it doesn't track and there doesn't appear to be a client event or routine to do that.

[Viktor Tachev]

Hello Andy,

If you would like to execute additional logic when the browser window is resized you can use the window.onresize event. Check out the following article that describes the event in more detail.

• https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize

Regards,
Viktor Tachev
Telerik

[Andy F.]

Right... and what do I have to do to the control to RadImageGallery to properly it via javascript?  There's nothing in the documentation.

[Viktor Tachev]

Hi,

You can call the repaint() function for RadImageGallery in order to re-render the control on the client.

Regards,
Viktor Tachev
Telerik

[Andy F.]

Doesn't cause it to resize to match the 100% width.  How about a working example of how to do this?

[Viktor Tachev]

Hello Andy,

Usually when the height is set in percentage it should be adjusted automatically when the browser window is resized. I have created a sample and it works as expected on my end. You will find it attached. Try to apply similar settings and see how it works for you.

Regards,
Viktor Tachev
Telerik

[Sam]

Just in case anyone else has this problem, the 100% height doesn't really work well. Especially if there are a lot of images and you need to allow scrolling (in thumbnail or lightbox view). 

       function ResizeWin() {
           try {
               var h = $("#divMain").height() - $("#divHeader").height();
               if ($find("<%=rigActivityImages_Image.ClientID%>")) {
                   h -= 75;
                   $(".rigItemBox").height(h - $(".rigToolbar").height());
                   $find("<%=rigActivityImages_Image.ClientID%>").repaint()
               }
               if ($find("<%=rigActivityImages_Lightbox.ClientID%>")) {
                   h -= 10;
                   $(".rigThumbnailsList").height(h);
                   $(".rigThumbnailsList").width("100%");
                   $find("<%=rigActivityImages_Lightbox.ClientID%>").repaint()
                   $(".rigThumbnailsList").css("overflow", "auto");
               }
               if ($find("<%=rigActivityImages_Thumbnail.ClientID%>")) {
                   h -= 10;
                   $(".rigThumbnailsList").height(h);
                   $(".rigThumbnailsList").width("100%");
                   $(".rigThumbnailsList").css("overflow", "auto");
                   $find("<%=rigActivityImages_Thumbnail.ClientID%>").repaint()
               }
                } catch (e) { }
            }

[Viktor Tachev]

Hi Sam,

Thank you for sharing your solution with the community. This can help someone with similar requirements.


Regards,
Viktor Tachev
Telerik by Progress