как добавить следующую и предыдущую кнопку на моем лайтбокс DIV

Question

Пожалуйста, помогите мне, чтобы добавить кнопки Далее и Назад в этом световом коробе я хочу, чтобы добавить

<div id="next">Next</div> 
<div id="pre">Prev</div> 

в моем осветителя. есть простой способ добавить кнопки «Далее» и «Предыдущий» внутри световой рамки. Когда я нажимаю на следующую кнопку, он открывает следующий заголовок со следующей и предыдущей кнопками и такой же, как предыдущая кнопка.

$(document).ready(function() { 
 
    $('.cont-wrap > .cont-lnk').click(function() { 
 
    $(this).addClass('active'); 
 
    $('.active > .cont-href, .overlay').show(); 
 
    }); 
 
    function dDb() { 
 
    $('.active > .cont-href, .overlay').fadeOut(); 
 
    $('.cont-lnk').removeClass('active'); \t 
 
    }; 
 
    
 
    $('.overlay, .close').click(function() { 
 
    \t dDb(); 
 
    \t }); 
 
    $('.cont-href').click(function(e){ e.stopPropagation(); e.stopImmediatePropagation(); }); 
 
    
 
    });

body { 
 
    \t padding:0; 
 
    \t margin:0; 
 
    } 
 
    .cont-lnk { 
 
    \t display:block; 
 
    \t width:100px; 
 
    \t background:#999; 
 
    \t 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 { 
 
    \t background:rgba(0, 0, 0, 0.5); 
 
    \t position:absolute; 
 
    \t width:100%; 
 
    \t height:100%; 
 
    \t z-index:999; 
 
    \t display:none; 
 
    } 
 
    .close { 
 
    \t display:block; 
 
    \t position:absolute; 
 
    \t right:10px; 
 
    \t top:10px; 
 
    } 
 
    
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="overlay"></div> 
 
    <div class="mwrap"> 
 
    <div class="cont-wrap"> 
 
    <div class="cont-lnk"> 
 
    Click here 
 
    <div class="cont-href"> 
 
    <div class="close"><a href="#">X</a></div> 
 
    box content comes here..... 
 
    <div id="next">next</div> 
 
    <div id="prev">pre</div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    <div class="cont-wrap"> 
 
    <div class="cont-lnk"> 
 
    Click here 2 
 
    <div class="cont-href"> 
 
    <div class="close"><a href="#">X</a></div> 
 
    box content comes here 2 bla bla..... 
 
    <div id="next">next</div> 
 
    <div id="prev">pre</div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div>

Answer 1

Прежде всего в вашей скрипке изменить следующую и предыдущую идентификатор на классы (не хорошая практика, чтобы иметь одинаковые идентификаторы для нескольких элементов), а затем добавить этот код:

$(".next").click(function() { 
     $('.active > .cont-href, .overlay').hide(); 
     $(this).closest(".cont-lnk").removeClass('active'); 
     var currentContWrap = $(this).closest(".cont-wrap"); 
     var nextContWrap = currentContWrap.next(".cont-wrap"); 
     nextContWrap.children(".cont-lnk").addClass('active'); 
     $('.active > .cont-href, .overlay').show(); 
    }); 
    $(".prev").click(function() { 
     $('.active > .cont-href, .overlay').hide(); 
     $(this).closest(".cont-lnk").removeClass('active'); 
     var currentContWrap = $(this).closest(".cont-wrap"); 
     var prevContWrap = currentContWrap.prev(".cont-wrap"); 
     prevContWrap.children(".cont-lnk").addClass('active'); 
     $('.active > .cont-href, .overlay').show(); 
    }); 

Работа демо: http://jsfiddle.net/hEEFq/

Answer 2

Вы не можете использовать идентификатор на странице один документ более чем один раз.