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

گالری عکس با استفاده از کنترل GridView در ASP.Net
0 0
گالری عکس با استفاده از کنترل GridView در ASP.Net

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

<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 را ببیند رااضافه میکنیم.
اضافه کردن DIV ها برای ساختن پس زمینه Modal و پنجره Modal
در کد زیر کنترل GridView شما نیاز به اضافه کردن دو DIV های HTML، یکی برای نمایش پس زمینه Modal دارید که برای نمایش تصویر در یک پنجره ی مدرن استفاده می شود.
اولین DIV divBackground به عنوان ModalDIV عمل می کند و صفحه را متوقف می کند. دومین divImage 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 برای فشرده سازی Background Modal و Popups 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>

اسکریپت سمت مشتری برای نشان دادن تصویر در Popup Modal با استفاده از LightBox
 جاوااسکریپت شامل دو توابع LoadDiv و HideDiv است .
هنگامی که روی ImageButton  کلیک می شود، تابع LoadDiv نامیده می شود. این URL تصویر را به عنوان پارامتر می پذیرد و سپس تصویر را در داخل DIV Modal بارگذاری می کند.
و زمانی که زمینه DIV Modal را دارد , صفحه را خنثی می کند و پنجره ی Modal Popup با تصویر بزرگ شده را نمایش می دهد و در نتیجه اثر LightBox را ایجاد می کند.
در روش HideDiv هنگامی که دکمه Close در پنجره Popup Modal کلیک میکند، HideDiv فراخوانی می شود و  DIV Background Drop Modal و Popup Modal را مخفی می کند.

<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 استفاده کنید.

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