PDA

View Full Version : سوال: نمایش تصویر اصلی با ajax



شرلوک هلمز
چهارشنبه 29 بهمن 1393, 22:35 عصر
من یک صفحه ی Aspx دارم که تعدادی تصویر thumb در ان نمایش داده میشود من میخواهم با کلیک برروی هر تصویر ؛ تصویر اصلی که سایز بزرگتری دارد در داخل یک updatepanel نمایش داده شود. توجه کنید که من تصویر اصلی را نمی خواهم در بار اول لود کنم و فقط با کلیک کاربر برروی تصویر thumb می خواهم تصویر اصلی از دیتابیس خوانده شود و نمایش داده شود بدون refresh صفحه در ضمن تصویر thumb من داخل یک datalist است به همین دلیل در کد جاوا اسکریپ دسترسی مستقیم به آن ندارم.
کاری که میخواهم انجام دهم در لینک زیر قابل مشاهده است. ممنون میشم کسی راهنمایی کنه!
http://www.mobile.ir/phones/photos-37485-huawei-honor-6.aspx

ahmad156
چهارشنبه 29 بهمن 1393, 22:40 عصر
PrettyPhoto (https://github.com/scaron/prettyphoto)

شرلوک هلمز
چهارشنبه 29 بهمن 1393, 23:06 عصر
PrettyPhoto (https://github.com/scaron/prettyphoto)
با تشکر از پاسخ شما اما من از easyshow خواستم استفاده کنم اما متاسفانه نحو ه ی تنظیم آنرا بلد نبودم از نمونه ای که شما گذاشتید هم سعی می کنم استفاده کنم
با این حال فکر می کنم انجام این عمل بدون اسکریپت های اماده نیز امکان پذیر باشد اگر کسی در این مورد بتونه راهنمایی کنه ممنون میشم.

mbasirati
پنج شنبه 30 بهمن 1393, 00:02 صبح
سلام
شما میتونید یه صفحه پاپ آپ (میتونید از مدال بوت استرپ استفاده کنید) ایجاد کنید و داخل اون یه تگ image بذارید که این تگ باید داخل آپدیت پنل باشه. تریگر آپدیت پنل رو، ItemCommand لیست ویو بذارید (البته اگه از لیست ویو به جای دیتالیست استفاده کنید، نمیدونم دیتالیست هم چنین رویدادی داره یا نه)

<Triggers>
<asp:AsyncPostBackTrigger ControlID="lvGallery" EventName="ItemCommand" />
</Triggers>


بعد توی رویداد OnItemCommand مربوط به لیست ویو آی دی آیتم کلیک شده توی لیست ویو رو پیدا کنید و آدرس عکس اصلی رو بخونید و به عنوان url تگ image قرار بدید. در انتهای این رویداد هم کد جاوااسکریپت مربوط به نمایش مدال رو قرار بدید.
امیدوارم متوجه شده باشی.
اگه جایی ابهام داشت بگو تا بیشتر توضیح بدم.

اگر هم طبق لینکی که فرستادی میخوای کار رو انجام بدی همه مراحل همینجوریه فقط دیگه نیاز به مدال نداری.

شرلوک هلمز
پنج شنبه 30 بهمن 1393, 00:30 صبح
سلام
شما میتونید یه صفحه پاپ آپ (میتونید از مدال بوت استرپ استفاده کنید) ایجاد کنید و داخل اون یه تگ image بذارید که این تگ باید داخل آپدیت پنل باشه. تریگر آپدیت پنل رو، ItemCommand لیست ویو بذارید (البته اگه از لیست ویو به جای دیتالیست استفاده کنید، نمیدونم دیتالیست هم چنین رویدادی داره یا نه)

<Triggers>
<asp:AsyncPostBackTrigger ControlID="lvGallery" EventName="ItemCommand" />
</Triggers>


بعد توی رویداد OnItemCommand مربوط به لیست ویو آی دی آیتم کلیک شده توی لیست ویو رو پیدا کنید و آدرس عکس اصلی رو بخونید و به عنوان url تگ image قرار بدید. در انتهای این رویداد هم کد جاوااسکریپت مربوط به نمایش مدال رو قرار بدید.
امیدوارم متوجه شده باشی.
اگه جایی ابهام داشت بگو تا بیشتر توضیح بدم.

اگر هم طبق لینکی که فرستادی میخوای کار رو انجام بدی همه مراحل همینجوریه فقط دیگه نیاز به مدال نداری.

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

alef.divar
پنج شنبه 30 بهمن 1393, 10:20 صبح
سلام
اینجا رو هم یه نگاه بنداز
http://lokeshdhakar.com/projects/lightbox2/

شرلوک هلمز
پنج شنبه 30 بهمن 1393, 15:24 عصر
<table id="tb_product" class="tb_data_product" border="0"> <tr style="width: 100%; height:300px" >
<td class="td_large_img"> <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate> <asp:Image ID="img_product" CssClass="img_large" runat="server" />
</ContentTemplate> <Triggers>
<%--<asp:PostBackTrigger ControlID="dl_pics" />--%>
<asp:AsyncPostBackTrigger ControlID="dl_pics" EventName="ItemCommand" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="100">
<ProgressTemplate>....</ProgressTemplate>
</asp:UpdateProgress>

</td>
<td class="td_price">
<asp:Label ID="lbl_name_product" runat="server" CssClass="lbl_data_product"></asp:Label><br />
<asp:Label ID="lbl_price" runat="server"></asp:Label>
<br />
</td>
</tr>
<tr class="tr_thumb_img">
<td colspan="2">
<asp:DataList ID="dl_pics" runat="server" RepeatColumns="4" OnItemCommand="dl_pics_ItemCommand" >
<ItemTemplate >
<asp:ImageButton runat="server" ID="lb_thumb_pics" CssClass="img_default" CommandName='<%#DataBinder.Eval(Container.DataItem,"id_pic").ToString() %>'
ImageUrl='<%#DataBinder.Eval(Container.DataItem,"url_pic") %>' />
</ItemTemplate>
</asp:DataList>


کدهای بالا زمانی که از asp:PostBackTrigger ControlID="dl_pics استفاده میکنم درست است اما این تریگر کل صفحه را postback میکند اما زمانی که از asp:AsyncPostBackTrigger استفاده میکنم دستورات عمل نمی کند اما کد مربوط به رویداد اجرا می شود
protected void dl_pics_ItemCommand(object source, DataListCommandEventArgs e) {
img_product.ImageUrl = "~/images/kakiou2948.jpg";


}

و image با تصویر جدید مقدار دهی می شود اما در صفحه اعمال نمی شود در ضمن چون من از master page استفاده میکنم scriptmanager را در انجا گذاشته ام با این حال scriptmanager را در همین صفحه نیز قرار دادم اما اتفاقی نیفتاد همچنین برنامه error هم نمیدهد

شرلوک هلمز
جمعه 01 اسفند 1393, 00:52 صبح
مشکل حل شد!!
چون من از master page استفاده کرده ام باید در صفحه از ScriptManagerProxy استفاده میکردم باقرار دادن این کنترل در صفحه مشکل حل شد.
با تشکر از دوستان