How to show Previous and next images using javascript

Question

In my Code I show the images using repeater

     <asp:Repeater ID="rptconvention" runat="server" >
                    <ItemTemplate>
                    <div   style="float:left; width:200px;height:180px"   >                           
                     <a href="pop-ups/ViewImage.aspx?lightbox[width]=510&amp;lightbox[height]=415&amp;Imgid=<%#Eval("ID")%>" class="lightbox textColorBlue">        
                    <img  src='<%= Settings.FransupportURL %><%# "Convension/images/" & Eval("Img")%>' alt='<%#Eval("Name")%>' Width="180px" Height="120px" style="border:0px;"   />
                    </a>
                    <div style="text-align:center;float:left; padding-top:5px; width:180px;  font-size:12px;">  <%# If(Eval("Description").ToString().Length < 25, Eval("Description"), Eval("Description").Substring(0, 25))%>  </div> 
                    <div   style="text-align:center;float:left; padding-top:5px; width:180px;  font-size:13px;   "> 
                    <a style="width: 81px!important;" href="pop-ups/ViewImage.aspx?lightbox[width]=510&amp;lightbox[height]=415&amp;Imgid=<%#Eval("ID")%>" class="lightbox textColorBlue">View</a> | <asp:LinkButton class="textColorBlue"  id="btndownload" CommandName="Download"  CommandArgument='<%#Eval("DownLoadImg")%>' runat="server"   >Download </asp:LinkButton> 
                    </div>
                    </div>
                     <div class="dvSpacingConv"> &nbsp;</div>
                    </ItemTemplate>
                    <FooterTemplate>

                    </FooterTemplate>
                </asp:Repeater>

On click I show the image using the light box popup and open new page here is the html of that

 <div class="popup_con_ph nopad">
        <img id="Imgconvention" style="width: 500px; height: 308px;" runat="server" />
        <div style="margin-top:8px; text-align:center;">   
        <input type="button" id="btnDownload"   value="Download"  onclick="DownloadImage();"
            style="height: 28px !important; line-height: 10px !important;" tabindex="2" />
             <input type="button" id="btnClose"   value="Close"  onclick="ClosePopup();"
            style="height: 28px !important; line-height: 10px !important;" tabindex="2" />
            </div>
    </div>

I want to put here Previous and next button and show previous and next images. How can I do this..

Answer 1

add onclick function in your Previous and next button
in the function, you can do as below
$('#id').attr('src', 'imgpath');