This is a migrated thread and some comments may be shown as answers.

Auto Resize image in radwindow

9 Answers 331 Views

Window

This is a migrated thread and some comments may be shown as answers.

gozcelik asked on 19 Aug 2014, 11:38 AM

499595.png

Hi,
I have some photos which are large as 3000px X 4000px.
When I open one of them in my ie or chrome browser, the browser set it's size to browser size automatically. Bu when I open that photo in a radwindow (and resize radwindow), windows shows scrollbars. Is there any way to set image size to its parent container(radwindow).

I used this code to open a photo in a radwindow. (sender is a imagebutton).

function OpenWindow(sender) {
var link = sender.src;
var wnd = window.radopen(link, null);
wnd.set_status("");
wnd.setSize(400, 400);
return false;
}

The Result is in the attachment. I want to shrink image automatically to its parent size.

Many thanks.

9 Answers, 1 is accepted

answered on 20 Aug 2014, 06:37 AM

radwindowresize.png

Hi,

Please try the below sample code snippet which works fine at my end.

ASPX:

<asp:ImageButton ID="imgbtnBigImage" runat="server" ImageUrl="~/Images/index122.jpg"

OnClientClick="OpenWindow(this); return false;" />

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/index11.jpeg"

OnClientClick="OpenWindow(this); return false;" />

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" OnClientAutoSizeEnd="OnClientAutoSizeEnd">

</telerik:RadWindowManager>

JavaScript:

function OpenWindow(sender) {

var link = sender.src;

var wnd = window.radopen(link, null);

}

function OnClientAutoSizeEnd(sender, args) {

var win = $find("<%=RadWindowManager1.ClientID%>");

win.autoSize(true);

}

Thanks,
Shinu.

answered on 20 Aug 2014, 08:44 AM

first.png

second.png

I found an example, but I don't know how:
Click this link http://demos.telerik.com/aspnet-ajax/window/examples/radopen/defaultcs.aspx
And press "Open RadWindow" button. microsoft site will be open. When you change size of windows, you can see that images change their size. Xbox image for example. See attachment pls.

Accepted

answered on 20 Aug 2014, 08:44 AM

Hi,

Making an HTML element get the size of its parent is done with CSS where the elements are located, for example, the following markup will make the images in this content page fit the window they are in (be it RadWindow or the browser window):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title></title>

<style type="text/css">

html, body, form, img.img100percent

{

margin: 0;

padding: 0;

height: 100%;

width: 100%;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<img class="img100percent" src="images/some-image.png" alt="" />

</form>

</body>

</html>

Regards,

Marin Bratanov
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.

answered on 20 Aug 2014, 10:54 AM

status.png

Hi Shuni,
I is not working unfortunately:(

My script is:

function OpenWindow(sender) {

var link = sender.src;

link = "ShowPicture.aspx?o=" + link;

var wnd = window.radopen(link, null,400,400);

setTimeout(function () {

wnd.set_status("");

}, 0);

return false;

}

Accepted