In Picture Library click on Image Open Image in Dialog

Code:

<%-- _lcid="1033" _version="15.0.4420" _dal="1" --%>

<%-- _LocalBinding --%>

<%@ Page language="C#" MasterPageFile="~masterurl/default.master"    Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=15.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full"  %>

<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">

                <SharePoint:ListItemProperty Property="BaseName" maxlength="40" runat="server"/>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">

                <meta name="GENERATOR" content="Microsoft SharePoint" />

                <meta name="ProgId" content="SharePoint.WebPartPage.Document" />

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <meta name="CollaborationServer" content="SharePoint Team Web Site" />

                <SharePoint:ScriptBlock runat="server">

                var navBarHelpOverrideKey = "WSSEndUser";

                </SharePoint:ScriptBlock>

<SharePoint:StyleBlock runat="server">

body #s4-leftpanel {

                display:none;

}

.s4-ca {

                margin-left:0px;

}

</SharePoint:StyleBlock>

<style type="text/css">

#myImg {

    border-radius: 5px;

    cursor: pointer;

    transition: 0.3s;

}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */

.modal {

    display: none; /* Hidden by default */

    position: fixed; /* Stay in place */

   z-index: 1; /* Sit on top */

    padding-top: 100px; /* Location of the box */

    left: 0;

    top: 0;

    width: 100%; /* Full width */

    height: 100%; /* Full height */

    overflow: auto; /* Enable scroll if needed */

    background-color: rgb(0,0,0); /* Fallback color */

    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

}

/* Modal Content (Image) */

.modal-content {

    margin: auto;

    display: block;

    width: 80%;

    max-width: 700px;

}

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

#caption {

    margin: auto;

    display: block;

    width: 80%;

    max-width: 700px;

    text-align: center;

    color: #ccc;

    padding: 10px 0;

    height: 150px;

}

/* Add Animation - Zoom in the Modal */

.modal-content, #caption {

    -webkit-animation-name: zoom;

    -webkit-animation-duration: 0.6s;

    animation-name: zoom;

    animation-duration: 0.6s;

}

@-webkit-keyframes zoom {

    from {-webkit-transform:scale(0)}

    to {-webkit-transform:scale(1)}

}

@keyframes zoom {

    from {transform:scale(0)}

    to {transform:scale(1)}

}

/* The Close Button */

.close {

    position: absolute;

    top: 15px;

    right: 35px;

    color: #f1f1f1;

    font-size: 40px;

    font-weight: bold;

    transition: 0.3s;

}

.close:hover,

.close:focus {

    color: #bbb;

    text-decoration: none;

    cursor: pointer;

}

/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px){

    .modal-content {

        width: 100%;

    }

}

</style>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderSearchArea" runat="server">

                <SharePoint:DelegateControl runat="server"

                                ControlId="SmallSearchInputBox"/>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderPageDescription" runat="server">

                <SharePoint:ProjectProperty Property="Description" runat="server"/>

</asp:Content>

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script src="../SiteAssets/JSscriptThumbnail/jquery.nailthumb.1.1.js"></script>

<link rel="stylesheet" href="../SiteAssets/JSscriptThumbnail/jquery.nailthumb.1.1.css"/>

<script type="text/javascript">

//ExecuteOrDelayUntilScriptLoaded(retrieveListItemsInclude, 'sp.js');

$(document).ready(function()

{

//alert('Ready')

var urlForAllItems = "/_api/Web/Lists/GetByTitle('ImageSourceLibrary')/Items?$select=File/ServerRelativeUrl&$expand=File";

getItems(urlForAllItems);

$('.nailthumb-container').nailthumb({width:200,height:200});

});

  var count=0;

  function getItems(url)

   {

    $.ajax({

        url: _spPageContextInfo.webAbsoluteUrl + url,

        type: "GET",

        async: false,

        headers: {

            "accept": "application/json;odata=verbose",

        },

        success: function (data)

        {

        vHtml="";

        vHtml +="<table>";

        $.each(data.d.results, function (index, value)

        {

        if (count%3==0)

        {

        vHtml +="<tr>";

        }

        count=count+1;        // vHtml +="<tr>";

        vHtml +="<td>";

        //alert(value.File.ServerRelativeUrl);

        vHtml +="<div class=\"nailthumb-container\"><img  src='"+value.File.ServerRelativeUrl+"' id='myImg' title='Beautiful Parrot' class=\"nailthumb-title\"/></div>";

        vHtml +="</td>";

        if (count%3==0)

        {

          vHtml +="</tr>";

       }

       });

          vHtml +="</table>";            

          $('#BindHtml').html(vHtml);

           $(".nailthumb-title").click(function()

           {

                                var src=$(this).attr('src');

                                //alert(src);

                OpenPopup(src);

             //alerMessage();

                                });

        // OpenPopup();

        },

        error: function (error) {

            //alert(JSON.stringify(error));

        }

    });

}

function OpenPopup(isrc)

{

                                var modal = document.getElementById('myModal');

                                var modalImg = document.getElementById("img01");

                                modal.style.display = "block";

                                modalImg.src = isrc;

}

</script>

<table id="BindHtml">

</table>

<!--<img id="myImg" src="http://NGO/ImageSourceLibrary/Posters.jpg" alt="Trolltunga, Norway" width="300" height="200"/>-->

<!-- The Modal -->

<div id="myModal" class="modal">

  <!-- The Close Button -->

  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

  <!-- Modal Content (The Image) -->

  <img class="modal-content" id="img01"/>

  <!-- Modal Caption (Image Text) -->

  <div id="caption"></div>

</div>

</asp:Content>