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

[h.alizadeh]

سلام،

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

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

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

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

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

اینکه مثلا سایز عکس رو چطوری بدست بیارم و چطوری دستورات چک رو بنویسم و برای رویداد کلیک تصویره دستور بنویسم ....؟؟؟
من کل رکوردای جدولم رو در یک گریدویو مینویسم و فیلد عکس رو در یک سطر جدا در گرید ویو نشون میدم
و بعد گریدویو رو به یک کنترل datasource نسبت دادم ...اینه که درست نمیدونم چطوری دستورات رو بنویسم....

[mahdi_farhani]

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

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

فایل اسکریپت هم ضمیمه شد ....
اگر دوست داشتی بخون تا بفهمی چی کار کرده ، اگر حوصله هم نداشتی نخون فقط استفاده کن

[h.alizadeh]

خیلی ممنون

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

<asp:ContentID="Content1"ContentPlaceHolderID="head"Runat="Server">

<scripttype="text/javascript"src="js/ncode_imageresizer.js"></script>

</asp:Content>

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

ولی هیچی نشد!

میشه طرز استفاده ش رو برام بگید؟

[mahdi_farhani]

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

[h.alizadeh]

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

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

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

[gheysar14]

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

<asp:Imagerunat="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:NcodeIm  ageResizer.createOn(this);"ID="Image1"ImageUrl='<%  #DataBinder.Eval(Container.DataItem, "pic")%>'/>

اینو تست کن

[gheysar14]

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

ProtectedSub Page_Load(ByVal sender AsObject, ByVal e As System.EventArgs) HandlesMe.Load

Dim img As Image = DirectCast(GridView1.FindControl("Image1"), Image)

img.Attributes.Add("onload", "javascript:NcodeImageResizer.createOn(this);")

EndSub

[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:

ProtectedSub GridView1_RowDataBound(ByVal sender AsObject, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound



ForEach row As GridViewRow In GridView1.Rows

Dim img As Image = DirectCast(row.FindControl("Image1"), Image)

If img IsNotNothingThen

img.Attributes.Add("onmouseover", "Large(this)")

img.Attributes.Add("onmouseout", "Out(this)")

img.Attributes.Add("onmousemove", "Move(this,event)")

EndIf



Next

EndSub