نمایش عکس به دوصورت کوچک و بزرگ در گریدویو

[h.alizadeh]

سلام،

من در گریدویوم یک فیلدی دارم که تصویر نمایش میده ...

حالا من میخوام کاری کنم که اگه تصویر نمایش داده شد ه در این فیلد از یک سایز خاصی بزرگتر بود تصویر بصورت کوچکتر نمایش داده بشه (سایز حداکثر که من تعیین میکنم) و با کلیک بر روی عکس کوچک شده عکس به سایز بزرگ(اصلی) در بیاد... باز دوباره که روش کلیک شده به سایز کوچیک تبدیل بشه....

مثل همین چیزای جدید که توی انجمن ها اومده مثل اینجا مثلا :

http://www.daneshju.ir/forum/f305/t53703.html
به عکس توجه کنید....

البته اگه عکس از اون سایز حداکثری که من تعیین میکنم بزرگتر نباشه عکس به اندازه ی خودش نمایش داده میشه ...
خب یک چیزایی به ذهنم رسیده ولی درست نمیدونم چطوری پیاده ش کنم ...
میشه راهنمایی م کنید...

اینکه مثلا سایز عکس رو چطوری بدست بیارم و چطوری دستورات چک رو بنویسم و برای رویداد کلیک تصویره دستور بنویسم ....؟؟؟
من کل رکوردای جدولم رو در یک گریدویو مینویسم و فیلد عکس رو در یک سطر جدا در گرید ویو نشون میدم
و بعد گریدویو رو به یک کنترل datasource نسبت دادم ...اینه که درست نمیدونم چطوری دستورات رو بنویسم....http://qsmile.com/qsimages/40.gif http://qsmile.com/qsimages/82.gif

[mahdi_farhani]

با عرض پوزش از همه ... مجبور شودم دزدی کنم :چشمک::لبخند:

<img src="http://i38.tinypic.com/snh36c.jpg" border="0" alt="" onload="NcodeImageResizer.createOn(this);" />
فایل اسکریپت هم ضمیمه شد ....
اگر دوست داشتی بخون تا بفهمی چی کار کرده ، اگر حوصله هم نداشتی نخون فقط استفاده کن:چشمک:

[h.alizadeh]

خیلی ممنون http://qsmile.com/qsimages/36.gif

من اینطوری استفاده کردم:



<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type ="text/javascript" src ="js/ncode_imageresizer.js"></script>
</asp:Content>



<img src="http://i38.tinypic.com/snh36c.jpg" style="border :0" alt="" onload="NcodeImageResizer.createOn(this);" />



ولی هیچی نشد!

میشه طرز استفاده ش رو برام بگید؟http://qsmile.com/qsimages/36.gif http://qsmile.com/qsimages/42.gif

[mahdi_farhani]

یه مقدار مطالعه روی کدها بد نیست

[h.alizadeh]

میگم آیا میشه از این فایل جاواسکریپت در کنترل image اي اس پی دات نت هم استفاده کرد؟؟

من استفاده کردم خطا داد!
یا برا کنترل img اچ تی ام ال هم اگه رانات سرور اضافه میکردم و این کد رو می نوشتم خطا میداد!

میشه کاری کرد؟؟
چون من توی یکی از فایلای دیگه م اینطوری ه که آدرس دهی کنترل موردنظرم رو با استفاده از کوئری از بانک میخونم و در خاصیت imageurl قرار میدم اینه که نمیتونم رانات سرورش نکنم

[gheysar14]

منم همین مشکلو دارم ولی ارور میده که :
BC30456: 'NcodeImageResizer' is not a member of 'ASP.testgridview_aspx'.



<asp:Image runat="server" onload="NcodeImageResizer.createOn(this);" ID="Image1" ImageUrl='<%#DataBinder.Eval(Container.DataItem, "pic")%>' />


لطفاً راهنمایی کنید

[alireza_s_84]

سلام علت اینکه Error میده واسه اینه که از تگ onload استفاده می کنید . این تگ رو حذف کنید و توی Page Load اینجوری بنویسید:




Image1.Attributes.Add("onload", "NcodeImageResizer.createOn(this);")



مشکلی بود مطرح کنید راهنمایی کنم
موفق باشید

[mahdi_farhani]

<asp:Imagerunat="server"onload="javascript:NcodeImageResizer.createOn(this);"ID="Image1"ImageUrl='<%#DataBinder.Eval(Container.DataItem, "pic")%>'/>
اینو تست کن

[gheysar14]

بازم نشد. این ارور رو میده: Object reference not set to an instance of an object.



Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim img As Image = DirectCast(GridView1.FindControl("Image1"), Image)
img.Attributes.Add("onload", "javascript:NcodeImageResizer.createOn(this);")
End Sub

[gheysar14]

یه راه دیگه پیدا کردم . کدشو اینجا میذازم برای دوستانی که این مشکل رو دارند استفاده کنند:لبخندساده:


<script type=”text/javascript”>
function Large(obj)
{
var imgbox=document.getElementById(”imgbox”);
imgbox.style.visibility=’visible’;
var img = document.createElement(”img”);
img.src=obj.src;
img.style.width=obj.width * 2;
img.style.height=obj.height * 2;
imgbox.innerHTML=”;
imgbox.appendChild(img);
}
function Out(obj)
{
document.getElementById(”imgbox”).style.visibi lity=’hidden’;
}
function Move(obj,e)
{
var mouseY=e.clientY;
// alert(e.x)
var mouseX=e.clientX;
var scrollTop=document.documentElement.scrollTop;
var scrollLeft=document.documentElement.scrollLeft;
var y=scrollTop+mouseY+20;
var x=scrollLeft+mouseX+20;
document.getElementById(”imgbox”).style.left=x + “px”;
document.getElementById(”imgbox”).style.top=y + “px”;
}
</script>
<div id=”imgbox” style=”position:absolute;border:3px solid #999;filter: Alpha(Opacity=85);visibility:hidden; “></div>
<asp:GridView ID=”GridView1″ runat=”server” AutoGenerateColumns=”False” CellPadding=”4″
DataKeyNames=”Id” DataSourceID=”SqlDataSource1″ ForeColor=”#333333″ OnRowDataBound=”GridView1_RowDataBound”>
<FooterStyle BackColor=”#507CD1″ Font-Bold=”True” ForeColor=”White” />
<Columns>
<asp:TemplateField HeaderText=”Image” SortExpression=”Image”>

<ItemTemplate>
<asp:Image ID=”Image1″ runat=”server” Height=”82px” ImageUrl=
'<%#DataBinder.Eval(Container.DataItem, "pic")%>'
Width=”108px” />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID=”SqlDataSource1″ runat=”server” ConnectionString=”<%$ ConnectionStrings:ConnStr %>”
SelectCommand=”SELECT * FROM table”></asp:SqlDataSource>
in code behind


این هم کدVB:


Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

For Each row As GridViewRow In GridView1.Rows
Dim img As Image = DirectCast(row.FindControl("Image1"), Image)
If img IsNot Nothing Then
img.Attributes.Add("onmouseover", "Large(this)")
img.Attributes.Add("onmouseout", "Out(this)")
img.Attributes.Add("onmousemove", "Move(this,event)")
End If

Next
End Sub