big image click open new light box?

<script>
    $(function () {
        $('.pop').on('click', function () {
            $('.imagepreview').attr('src', $(this).find('img').attr('src'));
            $('#imagemodal').modal('show');
        });
    });
</script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#photos').galleryView({

            frame_width: 100,
            frame_height: 100,
            nav_theme: 'custom'
        });
    });
</script>

<div class="row">
    <div class="col-md-6 col-sm-7">
        <div id="photos" class="galleryview">
            &lt;asp:Repeater ID="Repeater2" runat="server"&gt;
                <itemtemplate>
                    <div class="panel">
                        <div style="padding: 10px 10px 10px 10px; border-removed 1px solid #CCCCCC">
                            <a href="#" class="pop">

                                &lt;asp:Image ID="Image1" runat="server" alt='&lt;%#Eval("carimgpath") %&gt;' ImageUrl='&lt;%#Eval("carimgpath") %&gt;' Width="100%" Height="250" class="img-responsive" Style="border: 2px solid black" /&gt;

                            </a>
                        </div>
                        


                        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">


</div>
</div>&lt;!-- /.modal-content --&gt;
</div>&lt;!-- /.modal-dialog --&gt;
</div>&lt;!-- /.modal --&gt;



                    </div>
                </itemtemplate>
            
            <ul class="filmstrip">
                &lt;asp:Repeater ID="Repeater1" runat="server"&gt;
                    <itemtemplate>
                        <li>
                            &lt;asp:Image ID="Image1" Width="100" Height="100" alt='&lt;%#Eval("carimgpath") %&gt;' ImageUrl='&lt;%#Eval("carimgpath") %&gt;' runat="server" /&gt;
                        </li>
                    </itemtemplate>
                
            </ul>
        </div>
    </div>
    <div class="visible-xs">
        <br />
    </div>
    <div class="col-md-6 col-sm-5">
        <div class="row">
            <div class="col-md-12">

                <span style="font-weight: bold; color: #f60; font-size: 16px">KD</span>
                &lt;asp:Label ID="lblPrice" runat="server" Text="Price" Style="font-weight: bold; color: #f60; font-size: 16px"&gt;<br />
                <br />
                <i class="fa fa-chevron-right" style="padding-removed 7px; color: #f60"></i>
                &lt;asp:Label ID="lblCartype" runat="server" Text="Cartype" Style="font-weight: bold"&gt;
                &nbsp;
            &lt;asp:Label ID="lblVechiletype" runat="server" Text="Vechile" Style="font-weight: bold"&gt;
            </div>
        </div>
        <br />
        <div class="row" style="margin-removed 10px;border:1px solid #B2B2B2;padding-removed10px;padding-removed10px;margin:0;min-height:315px">
            <div class="col-md-12">

                <div class="col-md-6 col-sm-6">
                    <p style="padding-removed 10px; border-removed 1px solid #B2B2B2; font-weight: bold;font-size:12px">Technical Data</p>
                    <span class="labels">Mileage:</span>
                    &lt;asp:Label ID="lblMileage" runat="server" Text="Mileage" Style="font-weight: bold; font-size: 12px"&gt;
                    &nbsp <span class="labels">KMPL</span><br />
                    <br />
                    <span class="labels">Registration Date:</span>
                    &lt;asp:Label ID="lblRegdate" runat="server" Text="Date" Style="font-weight: bold; font-size: 12px"&gt;<br />
                    <br />
                    <span class="labels">GearBox:</span>
                    &lt;asp:Label ID="lblGearbox" runat="server" Text="Gerbox" Style="font-weight: bold; font-size: 12px"&gt;<br />
                    <br />
                    <span class="labels">Roadworthy: </span>
                    &lt;asp:Label ID="lblRoadworthy" runat="server" Text="No" Style="font-weight: bold; font-size: 12px"&gt;<br />
                    <br />
                    <span class="labels">Country: </span>
                    &lt;asp:Label ID="lblCountry" runat="server" Text="Country" Style="font-weight: bold; font-size: 12px"&gt;<br />
                </div>
                <div class="col-md-6 col-sm-6">
                    <p style="padding-removed 10px; border-removed 1px solid #B2B2B2; font-weight: bold;font-size:12px">Features</p>
                    <span class="labels">Climatecontrol:</span>
                    &lt;asp:Label ID="lblClimatecontrol" runat="server" Text="No" Style="font-weight: bold; font-size: 12px"&gt;<br />
                    <br />
                    <span class="labels">Parking Sensors:</span>
                    &lt;asp:Label ID="lblParkingsensors" runat="server" Text="Parking Sensors" Style="font-weight: bold; font-size: 12px"&gt;<br />
                    <br />
                    <span class="labels">Interior Design:</span>
                    &lt;asp:Label ID="lblInteriorDesign" runat="server" Text="Interior Design" Style="font-weight: bold; font-size: 12px"&gt;<br />
                    <br />
                    <span class="labels">Interiour Color: </span>
                    &lt;asp:Label ID="lblInteriourColor" runat="server" Text="Interiour Color" Style="font-weight: bold; font-size: 12px"&gt;<br />
                    &lt;asp:DataList ID="dlFeature" runat="server"&gt;
                        <itemtemplate>
                            <div style="padding-removed10px">
                            &lt;asp:Label ID="Label1" runat="server" Text='&lt;%# Eval("Features") %&gt;' Style="font-weight: bold; font-size: 12px"&gt;
                       </div>
                                 </itemtemplate>
                    
                </div>
            </div>
        </div>
    </div>
</div>