locked
caption in modal RRS feed

  • Question

  • User66371569 posted

    Hi people  how are you

     I am using datalist  and modal  to show images   but I try everything to  show caption in my modal   I  couldent  

    this is my code

    datalist

    <asp:DataList ID="DataList1" runat="server" FooterStyle-Height="20px" Height="375px" RepeatColumns="5" RepeatLayout="Table" Width="975px" CellPadding="0" CellSpacing="0" AllowPaging="True" RepeatDirection="Horizontal">
    <FooterStyle Height="20px" />
    <ItemTemplate>
    <table class="table" style="border-right-style:solid; border-width:2px;border-color:#18416A; margin-right:10px ">
    <tr>
    <th colspan="2"><b> <!--<span style="margin-right:30px"><%# Eval("imageid")%></span></b></th> -->
    </span>
    </tr>
    <tr>
    <td colspan="2"></td>
    </tr>
    <tr>
    <td></td>
    <td>
    <!-- <img class="myImg" src ='<%#Eval("attach")%>' width="300" onclick="oo" height="250" style="margin-right:20px" alt="Name: <%# Eval("Imagename")%> </br> Year: <%# Eval("Year")%> </br> Year: <%# Eval("month")%>" /> -->
    <img id="image1" runat="server" class="imgg" onclick = "LoadDiv(this.src, this)" src = '<%# Eval("attach")%>' width ="200" height = "150" alt='<%# Eval("imagename")%>' style ="cursor:pointer; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius:8px; margin-right:10px " />

    <video id="vid" runat="server" controls="controls" controlslist="nodownload" width ="200" height = "150" src = '<%# Eval("attach")%>' ></video>

    </td>

    </tr>
    <tr>
    <td colspan="2"><span style="font-size:12px;display:block"><b>Name:</b></span> <!-- <span style="font-size:12px"><%# Eval("imagename")%></span><-->
    <asp:Label ID="Imagename" runat="server" Text='<%# Eval("imagename")%>'></asp:Label>
    </td>

    </tr>

    <tr>
    <td colspan="2"><span style="font-size:12px"><b>Date:</b></span> <span style="font-size:12px"><%# Eval("uploaddate", "{0:dd/MM/yyyy}")%></span></td>
    <tr> <td colspan="2"> <span style="font-size:12px; margin-bottom:30px ">
    <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Press">Dawnload</asp:LinkButton></tr>
    </span></td>
    </tr>
    </table>

    </ItemTemplate>

    <SelectedItemStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />





    </asp:DataList>

    -----------------------------------------------------------------------

    <script type="text/javascript">
    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 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 - 1000) / 2 + "px";
    imgDiv.style.right = (width - 1000) / 2 + "px";

    imgDiv.style.top = "100px";
    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");
    bcgDiv.style.display = "none";
    imgDiv.style.display = "none";
    imgFull.style.display = "none";
    }
    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;
    }
    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";
    }
    }


    function DownloadFile(url) {
    window.open(url, 'Download');
    return false;
    }


    </script>


    <script language=JavaScript>
    function clickIE() {
    if (document.all) {
    return false;
    }
    }
    function clickNS(e) {
    if (document.layers || (document.getElementById && !document.all)) {
    if (e.which == 2 || e.which == 3) {
    alert('This page is copyrighted');
    return false;

    }
    }
    }
    if (document.layers) {
    document.captureEvents(Event.MOUSEDOWN);
    document.onmousedown = clickNS;
    }
    else {
    document.onmouseup = clickNS;
    document.oncontextmenu = clickIE;
    }
    document.oncontextmenu = new Function("return false")
    </script>

    <script language="JavaScript1.2">

    function disableselect(e){
    return false
    }

    function reEnable(){
    return true
    }

    //if IE4+
    document.onselectstart=new Function ("return false")

    //if NS6
    if (window.sidebar){
    document.onmousedown=disableselect
    document.onclick=reEnable
    }

    </script>

    <style type = "text/css" class="modal" style="vertical-align: middle; text-align: center">
    .modal
    {
    display: none;
    ;
    top: 0px;
    left: 0px;
    background-color:black;
    z-index:100;
    opacity: 0.8;
    filter: alpha(opacity=60);
    -moz-opacity:0.8;
    min-height: 100%;
    text-align:center;
    width:100%;

    }

    .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 1000px;
    border-radius: 10px;

    }

    .imgg:hover{
    opacity: 0.7;


    }
    /* Caption of Modal Image (Image Text) - Same Width as the Image */

    #caption {
    margin: auto;
    display: block;
    z-index:1000;
    text-align: center;
    color: black;
    padding: 10px 0;
    height: 150px;
    border:thick solid black;
    }

    @keyframes zoom {
    from {transform:scale(0)}
    to {transform:scale(1)}
    }


    /* Add Animation - Zoom in the Modal */
    .modal-content, #caption {
    animation-name: zoom;

    animation-duration: 0.6s;
    }
    #divImage
    {
    display: none;
    z-index: 1000;
    ;
    top:50%;
    left: -1000px;
    border-radius:10px;
    background-color:White;
    height: 700px;
    width: 950px;
    padding: 3px;
    padding-right:8px;
    border: solid 1px black;
    text-align:center;


    }

    -----------------------------------------------------------------

    <div id="divImage" >

    <table style="height: 100%; width: 100%" >
    <tr>
    <td valign="middle" align="center" colspan = "3" style ="height:500px;" >

    <img id="imgLoader" alt="" >




    </div>


    <img id="imgFull" src="" alt=""
    style="display: none;
    height: 600px;width: 950px" />

    </td>
    </tr>
    <tr>

    <td align = "left" style="padding:10px;width:200px;display:block">
    <a id = "Previous" href = "javascript:" onclick = "doPaging(this)" style ="display:none"><img src="image/prev.png" / ></a>

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

    </td>
    <td align="center" valign="middle" style ="width:200px;padding-left:130px">

    <!-- <input id="btnClose" type="button" value="close"onclick="HideDiv()"/> -->
    <asp:ImageButton ID="btnClose" runat="server" Width="50" Height="50" ImageUrl="image/close.png"></asp:ImageButton>

    <img class="modal-content" >

    </td>
    <td align = "right" style ="padding:10px;width:200px;display:block;padding-left:190px">
    <a id = "Next" href = "javascript:" onclick = "doPaging(this)" ><img src="image/next.png" /></a>
    <span id = "lblNext" style ="display:none"> </span>


    </td>
    </tr>

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

    </div>

    please help me  in that

    Monday, October 22, 2018 8:09 AM

All replies

  • User839733648 posted

    Hi thepast,

    According to your description and code, I could not fully understand your requirement.

    I am using datalist  and modal  to show images   but I try everything to  show caption in my modal

    What is the caption? Is it means the names of your images? Or means any other thing?

    Where do you want to show the caption? And how is your running page showing now?

    If possible, please provide more details of your need like with screenshots so that it will be better for us to help with you.

    Best Regards,

    Jenifer

    Tuesday, October 23, 2018 9:54 AM
  • User66371569 posted

    anything

    even text doesn't work    try my code   with your datalist    you will see

    Tuesday, October 23, 2018 11:12 AM
  • User61956409 posted

    Hi thepast,

    I am using datalist  and modal  to show images   but I try everything to  show caption in my modal  

    Firstly, you can refer to this article that explained how to implement image gallery using ASP.NET DataList Control.

    Besides, you can also refer to the following code sample to achieve your requirement of displaying caption in front of modal.

    <div>
        <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" imgdes='<%# Eval("Des")%>' />
                        </td>
                    </tr>
                </table>
                <br />
            </ItemTemplate>
        </asp:DataList>
        <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" />
                        <div id="div_caption">image description</div>
                    </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>
    </div>
    <style type="text/css">
        .modal {
            display: none;
            ;
            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;
            ;
            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;
        }
    
        #div_caption {
            display: block;
            ;
            background-color: black;
            width: 100%;
            height: 100px;
            opacity: 0.6;
            bottom: 100px;
            color: orangered;
            font-size: xx-large;
        }
    </style>
    <script>
        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");
    
            //alert(lnk.getAttribute("imgdes"));
            //get and set image description to "div_caption"
            document.getElementById("div_caption").innerHTML = lnk.getAttribute("imgdes");
    
    
            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;
    
        }
    
        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";
    
        }
    
        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";
    
            }
    
        }
    
        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";
    
                        //show description
                        document.getElementById("div_caption").innerHTML = imgs[CurrentPage - 1].attributes["imgdes"].value;
                    };
    
                }
    
            }
    
            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";
    
                        //show description
                        document.getElementById("div_caption").innerHTML = imgs[CurrentPage - 1].attributes["imgdes"].value;
    
                    };
    
                }
    
            }
    
            Prepare_Pager(imgs.length);
    
            img.src = imgs[CurrentPage - 1].src;
    
        }
    </script>
    

    Test Result:

    With Regards,

    Fei Han

    Wednesday, October 31, 2018 7:28 AM