title: how to add next and previous button on my lightbox div
body: <p>Please help me to add next and Previous Buttons in this light box i want to add </p>
  
  <pre><code>&lt;div id="next"&gt;Next&lt;/div&gt;
  &lt;div id="pre"&gt;Prev&lt;/div&gt;
  </code></pre>
  
  <p>in my lightbox. is there a simple way to add Next and Previous buttons inside the light box.when i click on next button it open next cont-href box with next and previous button and same as previous Button .</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $(document).ready( function () {
      $('.cont-wrap &gt; .cont-lnk').click( function () {
      $(this).addClass('active');
      $('.active &gt; .cont-href, .overlay').show();
      });
      function dDb() {
      $('.active &gt; .cont-href, .overlay').fadeOut();
      $('.cont-lnk').removeClass('active'); 
      };
      
      $('.overlay, .close').click( function () {
       dDb();
       });
      $('.cont-href').click( function(e){ e.stopPropagation(); e.stopImmediatePropagation(); });
      
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
       padding:0;
       margin:0;
      }
      .cont-lnk {
       display:block;
       width:100px;
       background:#999;
       height:20px;
      }
      .cont-href {
      display: none;
      position: absolute;
      width: 300px;
      z-index: 1000;
      background: #fff;
      color: #000;
      left: 0;
      right: 0;
      margin: 0 auto;
      top: 35%;
      height: 200px;
      }
      .overlay {
       background:rgba(0, 0, 0, 0.5);
       position:absolute;
       width:100%;
       height:100%;
       z-index:999;
       display:none;
      }
      .close {
       display:block;
       position:absolute;
       right:10px;
       top:10px;
      }
      
      </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="overlay"&gt;&lt;/div&gt;
      &lt;div class="mwrap"&gt;
      &lt;div class="cont-wrap"&gt;
      &lt;div class="cont-lnk"&gt;
      Click here
      &lt;div class="cont-href"&gt;
      &lt;div class="close"&gt;&lt;a href="#"&gt;X&lt;/a&gt;&lt;/div&gt;
      box content comes here.....
      &lt;div id="next"&gt;next&lt;/div&gt;
      &lt;div id="prev"&gt;pre&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="cont-wrap"&gt;
      &lt;div class="cont-lnk"&gt;
      Click here 2
      &lt;div class="cont-href"&gt;
      &lt;div class="close"&gt;&lt;a href="#"&gt;X&lt;/a&gt;&lt;/div&gt;
      box content comes here 2 bla bla.....
      &lt;div id="next"&gt;next&lt;/div&gt;
      &lt;div id="prev"&gt;pre&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>