توضیحات و دانلود

گالری تصاویر با پیش نمایش تصویر بزرگتر با استفاده از C # و VB.Net در ASP.Net
0 0
گالری تصاویر با پیش نمایش تصویر بزرگتر با استفاده از C # و VB.Net در ASP.Net

با سلام در این مقاله نحوه ایجاد گالری عکس  در ASP.Net با گزینه بزرگنمایی با استفاده از C # و VB.Net را توضیح خواهیم داد.
اتصال به GridView
 قسمت اتصال داده ها و نحوه ذخیره و بازیابی تصاویر را توضیح داده ایم و از این رو برای جمع آوری GridView لطفا مقاله نمایش تصاویر در GridView Control با استفاده از مسیر ذخیره شده در پایگاه داده SQL Server با asp.net مشاهده کنید
کد HTML
این GridView بسیار شبیه به مقاله بالا است . تنها تفاوت این است که در اینجا به جای ستون ImageField ، از ستون ImageButton در ستون TemplateField استفاده کرده ایم.
برای ImageButton OnClientClick ، رویداد handler تنظیم شده است که بعداً مورد بحث قرار می گیرد.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" Font-Names="Arial">
<Columns>
    <asp:BoundField DataField="ID" HeaderText="ID" />
    <asp:BoundField DataField="FileName" HeaderText="Image Name" />
    <asp:TemplateField HeaderText="Preview Image">
        <ItemTemplate>
            <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("FilePath")%>'
                Width="100px" Height="100px" Style="cursor: pointer" OnClientClick="return LoadDiv(this.src);" />
        </ItemTemplate>
    </asp:TemplateField>
</Columns>
</asp:GridView>

مفهوم
در اینجا می توانم عملکرد زوم را به تمام تصاویر موجود در GridView اضافه کنیم تا کاربر بتواند تصویر بزرگ شده را در یک بخش یا پنل معین کلیک و مشاهده کند.
اضافه کردن DIV ها برای ساختن پیش زمینه Modal و Modal Popup
در کنترل GridView باید دو DIV HTML اضافه کنید ، یکی از آنها برای نمایش پس زمینه معین و دیگری برای نمایش تصویر در یک پنجره معین استفاده می شود.
First DIV divBackground به عنوان یک DIV معین عمل می کند و صفحه را ثابت میکند . دومین تقسیم DIV برای نمایش تصویر بزرگ شده استفاده خواهد شد.
 یک تصویر را برای نمایش پیشرفت بارگذاری تا زمانی که تصویر کاملاً بارگذاری شود ، اضافه کرده ایم .

<div id="divBackground" class="modal">
</div>
<div id="divImage">
<table style="height: 100%; width: 100%">
    <tr>
        <td valign="middle" align="center">
            <img id="imgLoader" alt="" src="images/loader.gif" />
            <img id="imgFull" alt="" src="" style="display: none; height: 500px; width: 590px" />
        </td>
    </tr>
    <tr>
        <td align="center" valign="bottom">
            <input id="btnClose" type="button" value="close" onclick="HideDiv()" />
        </td>
    </tr>
</table>
</div>

CSS برای Modal DIV و Modal Popup
شما نیاز به اضافه کردن CSS زیر در بخش سرصفحه یا فایل CSS دارید. از این کلاسهای CSS برای استایل پس زمینه Modal و Popup Modal استفاده می شود.

<style type="text/css">
body
{
    margin: 0;
    padding: 0;
    height: 100%;
}
.modal
{
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: black;
    z-index: 100;
    opacity: 0.8;
    filter: alpha(opacity=60);
    -moz-opacity: 0.8;
    min-height: 100%;
}
#divImage
{
    display: none;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    background-color: White;
    height: 550px;
    width: 600px;
    padding: 3px;
    border: solid 1px black;
}
</style>

Client Side Scriptting برای نمایش تصویر در Modal Popup با LightBox effect
client side جاوا اسکریپت از دو عملکرد LoadDiv و HideDiv تشکیل شده است .
با کلیک بر روی ImageButton ، عملکرد LoadDiv فراخوانی می شود. URL تصویر را به عنوان پارامتر می پذیرد و سپس تصویر را درون Modal DIV آپلود می کند. سرانجام آن را نمایش می هد . Modal Background DIV که صفحه را ثابت می کند و Modal Popup را با تصویر بزرگ شده نشان می دهد و بنابراین LightBox effect را ایجاد می کند.
هنگامی که روی دکمه Close در داخل Modal Popup کلیک می شود ، روش HideDiv فراخوانی می شود و به سادگی می تواند پس زمینه DOD و Modal Popup را مخفی کند.

<script type="text/javascript">
    function LoadDiv(url) {
    var img = new Image();
    var bcgDiv = document.getElementById("divBackground");
    var imgDiv = document.getElementById("divImage");
    var imgFull = document.getElementById("imgFull");
    var imgLoader = document.getElementById("imgLoader");
    imgLoader.style.display = "block";
    img.onload = function () {
        imgFull.src = img.src;
        imgFull.style.display = "block";
        imgLoader.style.display = "none";
   };
    img.src = url;
    var width = document.body.clientWidth;
    if (document.body.clientHeight > document.body.scrollHeight) {
        bcgDiv.style.height = document.body.clientHeight + "px";
    }
    else {
        bcgDiv.style.height = document.body.scrollHeight + "px";
    }
    imgDiv.style.left = (width - 650) / 2 + "px";
    imgDiv.style.top = "20px";
    bcgDiv.style.width = "100%";
 
    bcgDiv.style.display = "block";
    imgDiv.style.display = "block";
    return false;
}
function HideDiv() {
    var bcgDiv = document.getElementById("divBackground");
    var imgDiv = document.getElementById("divImage");
    var imgFull = document.getElementById("imgFull");
    if (bcgDiv != null) {
        bcgDiv.style.display = "none";
        imgDiv.style.display = "none";
        imgFull.style.display = "none";
    }
}
</script>

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :