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

گالری عکس با استفاده ازDataList Control در ASP.Net - نمایش اسلاید تصویر ( قسمت دوم )
0 0
گالری عکس با استفاده ازDataList Control در ASP.Net - نمایش اسلاید تصویر ( قسمت دوم )

با سلام در بخش اول  توضیح دادیم که چگونه از کنترل DataList ASP.Net برای ساخت گالری تصویر یا تصویر استفاده کنیم. همچنین اجرا صفحه بندی را در روش ذخیره شده در کنترل DataList ASP.Net توضیح دادیم .

حالا  توضیح خواهیم داد که چگونه گالری تصویر اصلی را به امکانات پیش نمایش و نمایش اسلاید که در آن شما می توانید پیش نمایش تصویر را  مشاهده و تبدیل کنید

DataList

در زیر DataList برای ایجاد گالری تصویر مورد استفاده قرار می گیرد مانند مقاله قبلی با این تفاوت که رویداد LoadDiv جاوا اسکریپت بر روی رویداد onclick از کنترل تصویر Modal PopUp در ASP.Net را باز می کند ارتباط می گیریم تا بزرگنمایی تصویر را نمایش دهد.

<asp:DataList ID="DataList1" runat="server" RepeatColumns = "2"  RepeatLayout = "Table"  Width = "500px">

    <ItemTemplate>

        <br />

        <table cellpadding = "5px" cellspacing = "0" class="dlTable">

        <tr>

            <td>

                <asp:Image ID="Image1" runat="server" ImageUrl = '<%# Eval("FilePath")%>'

                Width = "200px" Height = "200px" onclick = "LoadDiv(this.src, this)" style ="cursor:pointer" />

            </td>

        </tr>

        </table>

        <br />

    </ItemTemplate>

</asp:DataList>

CSS برای پیش زمینه Modal

کاری که شما باید انجام دهید این است که این CSS را در قسمت سر صفحه یا صفحه اصلی قرار دهید. CSS توسط PopUp برای باز کردن یک پس زمینه Modal استفاده می شود و بنابراین صفحه را تا زمانی که بسته شود مسدود می کند.

<style type = "text/css">

     .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: 610px;

        padding: 3px;

        border: solid 1px black;

     }

    .dlTable

    {

        border:double 1px #D9D9D9;

        width:200px;

        text-align:left;

    }

</style>

PopUp برای پیش نمایش تصویر

اولین چیزی که انجام خواهیم داد اضافه کردن DIV است که به عنوان PopUp برای پیش نمایش تصاویر عمل می کند

<div id="divImage" >

    <table style="height: 100%; width: 100%">

        <tr>

            <td valign="middle" align="center" colspan = "3" style ="height:500px;">

                <img id="imgLoader" runat="server" alt=""

                 src="images/loader.gif" />

                <img id="imgFull" alt="" src=""

                 style="display: none;

                height: 500px;width: 600px" />

            </td>

        </tr>

        <tr>

            <td align = "left" style="padding:10px;width:200px">

              <a id = "Previous" href = "javascript:" onclick = "doPaging(this)" style ="display:none">Previous</a>

                <span id = "lblPrevious">Previous</span>

            </td>

             <td align="center" valign="middle" style ="width:200px">

                <input id="btnClose" type="button" value="close"

                 onclick="HideDiv()"/>

            </td>

            <td align = "right" style ="padding:10px;width:200px">

                <a id = "Next" href = "javascript:" onclick = "doPaging(this)">Next</a>

                <span id = "lblNext" style ="display:none">Next</span>

            </td>

        </tr>

       

    </table>

</div><div id="divBackground" class="modal">

</div>

دو پیوند را اضافه کرده ایم که صفحه بندی دوم را با استفاده از جاوا اسکریپت و دکمه ای برای بستن PopUp انجام می دهد.  div divBackground دیگر برای مسدود کردن صفحه نمایش استفاده می شود

افتتاح پلاگین Modal

برای نمایش  Modal PopUp از عملکرد جاوا اسکریپت LoadDiv که در زیر آمده است ارتباط می گیریم . وظیفه اصلی این تابع نمایش پنجره Modal PopUpو Block the screen و Load Image است.

function LoadDiv(url, lnk)

 {

    var img = new Image();

    var bcgDiv = document.getElementById("divBackground");

    var imgDiv = document.getElementById("divImage");

    var imgFull = document.getElementById("imgFull");

    var imgLoader= document.getElementById("imgLoader");

    var dl = document.getElementById("<%=DataList1.ClientID%>");

    var imgs = dl.getElementsByTagName("img");

 

   

    CurrentPage = GetImageIndex(lnk.parentNode) + 1;

    imgLoader.style.display = "block";

    img.onload = function() {

        imgFull.src = img.src;

        imgFull.style.display = "block";

        imgLoader.style.display = "none";

    };

    img.src= url;

    Prepare_Pager(imgs.length);

    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;

 }

بستن پلاگین Modal

اگر یک PopUp باز است، باید آن را نیز ببندیدکه تابع JavaScript HideDiv این کار را برای شما انجام می دهد و زمانی که روی دکمه Close روی PopUp کلیک می کنید، آن را فراخوانی می کنید.

function HideDiv()

 {

    var bcgDiv = document.getElementById("divBackground");

    var imgDiv = document.getElementById("divImage");

    var imgFull = document.getElementById("imgFull");

    bcgDiv.style.display="none";

    imgDiv.style.display="none";

    imgFull.style.display="none";

 }

پیکربندی دومین سطح JavaScript در PopUp

اساسا سعی کردیم یک Previewer تصویر درست مثل ویندوز  بسازیم که اجازه می دهد ما از طریق عکس ها در یک پوشه خاص بدون بازگشت به پوشه از طریق تصاویر پیگیری کنیم. هنگامی که PopUp را باز میکنید، نیازی نیست که آن را ببندیدومیتوانید به راحتی از صفحه ثانویه صفحات استفاده کنید و تمام تصاویر موجود در صفحه DataList را مشاهده کنید.

این تابع اجازه می دهد تا مرجع کنترل تصویر در کنترل DataList قرار بگیرد.

var CurrentPage=1;

function GetImageIndex(obj)

{

    while(obj.parentNode.tagName != "TD")

        obj=obj.parentNode;

   var td=obj.parentNode;

   var tr=td.parentNode;

   if(td.rowIndex%2==0)

   {

      return td.cellIndex+tr.rowIndex;

   }

   else

   {

      return td.cellIndex+(tr.rowIndex*2);

   }

}

تابع زیر را برای صفحه بندی ثانویه جاوا اسکریپت آماده می کنیم . آن را برای غیر فعال کردن لینک قبلی یا بعد بر اساس شمارش تصاویر قادر می سازد

function Prepare_Pager(imgCount)

 {

    var Previous = document.getElementById("Previous");

    var Next = document.getElementById("Next");

    var lblPrevious = document.getElementById("lblPrevious");

    var lblNext = document.getElementById("lblNext");

    if(CurrentPage<imgCount)

    {

       lblNext.style.display="none";

       Next.style.display="block";

    }

    else

    {

       lblNext.style.display="block";

       Next.style.display="none";

    }

    if(CurrentPage>1)

    {

        Previous.style.display="block";

        lblPrevious.style.display="none";       

    }

    else

    {

        Previous.style.display="none";

        lblPrevious.style.display="block";       

    }

 }

 این تابع در واقع Paging است, زمانی که Previous یا Next Hypelinks کلیک می شوند.

function doPaging(lnk)

 {

    var dl = document.getElementById("<%=DataList1.ClientID%>");

    var imgs = dl.getElementsByTagName("img");

    var imgLoader= document.getElementById("imgLoader");

    var imgFull = document.getElementById("imgFull");

   

    var img = new Image();

    if(lnk.id == "Next")

    {

        if(CurrentPage<imgs.length)

        {

            CurrentPage++;

            imgLoader.style.display = "block";

            imgFull.style.display = "none";

            img.onload = function() {

            imgFull.src = imgs[CurrentPage-1].src;

            imgFull.style.display = "block";

            imgLoader.style.display = "none";

            };

        }

    }

    else

    {

        if(CurrentPage>1)

        {  

            CurrentPage--;       

            imgLoader.style.display = "block";

            imgLoader.style.display = "none";

            img.onload = function() {

            imgFull.src = imgs[CurrentPage-1].src;

            imgFull.style.display = "block";

            imgLoader.style.display = "none";

            };

        }

    }

    Prepare_Pager(imgs.length);

    img.src= imgs[CurrentPage-1].src;

 }

 


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

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