How to make the gallery fully responsive

6 posts, 0 answers
  1. Ian
    Ian avatar
    2 posts
    Member since:
    Oct 2008

    Posted 25 Nov 2014 Link to this post

    Hi We are trying to use ImageGallery but cannot make it properly responsive.

    It seems that we can only set a fixed height in pixels so that the gallery shrinks horizontally but does not stay in proportion. The gallery height in the settings wizard cannot be left blank, cannot be set to a percentage or auto as then we get a run time error.  The height value writes css inline so we can't even over-ride it

    If we remove it in Firebug the gallery becomes properly responsive

    Does anyone know a way to solve this issue? We could just use a different gallery but this is the only problem we have 


  2. Galin
    Admin
    Galin avatar
    526 posts

    Posted 28 Nov 2014 Link to this post

    Hi Ian,

    I make a sample page which demonstrates your requirements, please check it out and let me know how it goes
    <%@ Page Language="CS" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
     
    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <telerik:RadCodeBlock runat="server">
            <style type="text/css">
                html, body, form {
                    height: 100%;
                    padding: 0;
                    margin: 0;
                }
            </style>
     
            <script type="text/javascript">
                function onImageGalleryCreated(sender, args) {
                    sender.get_imageArea().get_element().style.height = sender.get_element().clientHeight - parseInt(sender.get_thumbnailsArea().get_element().style.height, 10) + "px";
                }
            </script>
        </telerik:RadCodeBlock>
    </head>
     
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server">
            </telerik:RadScriptManager>
            <telerik:RadImageGallery runat="server" Height="100%" ImagesFolderPath="media/images">
                <ClientSettings>
                    <ClientEvents OnImageGalleryCreated="onImageGalleryCreated" />
                </ClientSettings>
            </telerik:RadImageGallery>
        </form>
    </body>
    </html>



    Regards,
    Galin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ian
    Ian avatar
    2 posts
    Member since:
    Oct 2008

    Posted 09 Dec 2014 in reply to Galin Link to this post

    Thanks Galin - that works - why not ship it like that by default?

    Our next issue is that the full screen mode has the image off to the left and not stretching to fill the screen - do we need huge images or is there a way to do this?

  5. Galin
    Admin
    Galin avatar
    526 posts

    Posted 11 Dec 2014 Link to this post

    Hi Ian,

    In order to fill the empty space you should use the property ImageAreaSettings-ResizeMode and set it to Fill, e.g.
    <telerik:RadImageGallery ID="RadImageGallery1" runat="server" Height="600px" ImagesFolderPath="media/images">
        <ImageAreaSettings ResizeMode="Fill" />
    </telerik:RadImageGallery>

    About the other request I will forward it to our developers.

    Regards,
    Galin
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Jerry Jansen
    Jerry Jansen avatar
    47 posts
    Member since:
    Aug 2009

    Posted 01 Jun 2015 in reply to Galin Link to this post

    Galin,

    I am using your suggestions here in this thread to make the radimagegallery more responsive and it is working with the exception of the first image. The first image is displayed at it's regular size and the reset of the images are expanded to fill the image area. How can I force the first image displayed to fill the image area?

  7. Galin
    Admin
    Galin avatar
    526 posts

    Posted 04 Jun 2015 Link to this post

    Hello,

    I am afraid I am not able to identify what's causing the problems you are facing based on this information. I would appreciate it, if you could isolate the problem in a simple running project so that I can debug it locally.


    Regards,
    Galin
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017