Jump to content

Resize an image


ZeroShade

Recommended Posts

first off I will point out that it would be better to crop the image to save on download times but if that isn't an option you can do this with javascript

<img id="image1" src="your image" alt=""/> <script type="text/javascript">   var image = document.getElementById("image1");   image.style.width = "600px";   image.style.height = "400px"; </script>

or this with CSS

....resize{  width: 600px;  height: 400px;}...<img id="image1" src="your image" alt="" class="resize"/>

Link to comment
Share on other sites

Its probably easier if I showed you what I already have... maybe you can tell me why it doesn't work:

<script type="text/javascript" language="javascript">		var xmlHttpRequestObject = false;				try		{			// Firefox, Opera 8.0+, Safari			xmlHttpRequestObject = new XMLHttpRequest();		}		catch (e)		{			// Internet Explorer			try			{				xmlHttpRequestObject = new ActiveXObject("Msxml2.XMLHTTP");			}			catch (e)			{				try				{					xmlHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");				}				catch (e)				{					alert("Your browser does not support AJAX!");					window.location="Default.aspx";				}			}		}					function changeImage(img) 		{			if (xmlHttpRequestObject)			{				var obj = document.getElementById("ViewImage");								xmlHttpRequestObject.open("GET", img);								xmlHttpRequestObject.onreadystatechange = function()				{					if(xmlHttpRequestObject.readyState == 4 && xmlHttpRequestObject.status == 200)					{						// The state is complete and the status is successful.					}				}								int originalHeight = obj.width;				int originalWidth = obj.height;				int panelWidth = 576;				int panelHeight;								if (originalHeight >= originalWidth)				{					panelHeight = panelWidth * (originalWidth / originalHeight);					panelWidth = originalWidth / (originalHeight / panelHeight);				}				else				{					panelWidth = panelWidth * (originalHeight / originalWidth);					panelHeight = originalHeight / (originalWidth / panelWidth);				}								obj.style.width = panelWidth;				obj.style.height = panelHeight;								obj.src = "album/" + img;			}			else			{				alert("Your browser does not support AJAX!");				window.location="Default.aspx";			}		}				function changeDescription(desc)		{			if (xmlHttpRequestObject)			{				var descObj = document.getElementById("objDesc");								xmlHttpRequestObject.open("GET", desc);								xmlHttpRequestObject.onreadystatechange = function()				{					if(xmlHttpRequestObject.readyState == 4 && xmlHttpRequestObject.status == 200)					{						// The state is complete and the status is successful.					}				}								descObj.innerHTML = desc;			}			else			{				alert("Your browser does not support AJAX!");				window.location="Default.aspx";			}		}	</script>	<div style="background-image:url('img/Header.png'); background-repeat:no-repeat; height:50px; 		font-family:Verdana; text-align:center; font-size:medium; font-weight:bold; ">		<br />Photos	</div>	<center>		<asp:Panel ID="ImageViewPanel" runat="server" Height="432px" Width="576px" BorderColor="white" BorderWidth="5px">			<asp:FormView ID="ImageFormView" runat="server" DataSourceID="ImageObjectDataSource" DataKeyNames="ImageId">				<ItemTemplate>					<img src='album/<%# Eval("ImageName") %>' id="ViewImage" alt="" />					<div id="objDesc"><%# Eval("ImageDescription") %></div>				</ItemTemplate>			</asp:FormView>		</asp:Panel>		<p /><asp:DataList ID="ImageDataList" RepeatDirection="Horizontal" RepeatColumns="5" runat="server" DataKeyField="ImageId" DataSourceID="ImageObjectDataSource">			<ItemTemplate>				<div style="padding:10px;">					<img src='album/thumb_<%# Eval("ImageName") %>' onclick="changeImage('<%# Eval("ImageName") %>'); changeDescription('<%# Eval("ImageDescription") %>')" 						alt='<%# Eval("ImageDescription") %>' style="background-color:White;" />				</div>			</ItemTemplate>		</asp:DataList>	</center>

Link to comment
Share on other sites

I believe the problem is here:

obj.style.width = panelWidth;obj.style.height = panelHeight;

Change that to this:

obj.style.width = panelWidth + "px";obj.style.height = panelHeight + "px";

Link to comment
Share on other sites

I put the px in after the width and height... and I'm debugging it right now.Its strange because int originalHeight = obj.width; where obj.width = 51 and int originalWidth = obj.height; where obj.height = 23.I doubt this is the problem but those are the height and widths of the thumbnails. But obj isn't a thumbnail. It should be the original picture.It also says on the thumbnail image I click on that an object is expected. Why would this be after I put in the height and width code?

Link to comment
Share on other sites

Hah! I was just working on another project and wrote:

string test = "This is a test";alert(test);

It took me a bit to realize that I was supposed to be using javascript rather than C#.

Link to comment
Share on other sites

It can be done just with CSS.#BigPicDiv {width:whateverpx}#bigPic {width:100%; height:auto} <div id="BigPicDiv"><img id="bigPic" src="mybigpic.gif" /></div>that's all... you could make the div width in ems, in which case the whole shebang will change size if you resize text; or you could do it in percentage, in which case the whole shebang will change as the window is resized.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...