0

Здравствуйте. На странице есть 10 картинок, по клику на которые открывается модальное окно, в которое загружается из стороннего файла контент.

Сами картинки

 <div class="container">
            <a data-number="1" class="img-wrap no_border"><img index="1"src="./images/gal1.jpg" alt=""></a>
            <a data-number="2" class="img-wrap no_border"><img index="2"src="./images/gal2.jpg" alt=""></a>
            <a data-number="3" class="img-wrap no_border"><img index="3"src="./images/gal3.jpg" alt=""></a>
            <a data-number="4" class="img-wrap no_border"><img index="4"src="./images/gal4.jpg" alt=""></a>
            <a data-number="5" class="img-wrap no_border"><img index="5"src="./images/gal5.jpg" alt=""></a>
            <a data-number="6" class="img-wrap no_border"><img index="6" src="./images/gal6.jpg" alt=""></a>
            <a data-number="7" class="img-wrap no_border"><img index="7" src="./images/gal7.jpg" alt=""></a>
            <a data-number="8" class="img-wrap no_border"><img index="8" src="./images/gal8.jpg" alt=""></a>
            <a data-number="9" class="img-wrap no_border"><img index="9" src="./images/gal9.jpg" alt=""></a>
            <a data-number="10" class="img-wrap no_border"><img index="10" src="./images/gal10.jpg" alt=""></a>
 </div>

HTML

<div style="display: none;">
 <div class="box-modal" id="ajaxModal">
    <div class="box-modal_close arcticmodal-close"><img src="./images/close.png" alt=""></div>
    <div class="modal_bdy"></div>   
    <a class="modal_toggle">Кнопочка</a>
    <div class="clearfix"></div>
    <div class="nav_arrows">
        <div class="prev"><img src="./images/gold_prex.png" alt=""></div>
        <div id="number_counter"><span id="current"></span><span class="all_number">/10</span></div>
        <div class="next"><img src="./images/gold_next.png" alt=""></div>
    </div>
    <div class="clearfix"></div>
</div>

JavaScrit

$(".img-wrap").on("click", (function() {
var dataNumber = $(this).attr('data-number');    

$('#ajaxModal').arcticmodal({
    afterOpen: function(data, el) {
        for (var i = 1; i <= 10; i++) {
            if (dataNumber == [i]) {
                $('.modal_bdy').load('slides.html #' + [i]);
                $('#current').html(dataNumber);
            };
        } 
    },
});    
$('.nav_arrows .next').click(function() {
    if ((Number($('#current').html()) + 1) > 10) {
        return false;
    }
    $('.modal_bdy').load('slides.html #' + (Number($('#current').html()) + 1));
    $('#current').html((Number($('#current').html())) + 1);
});
$('.nav_arrows .prev').on('click', function() {
    if ((Number($('#current').html()) - 1) < 1) {
        return false;
    }
    $('.modal_bdy').load('slides.html #' + (Number($('#current').html()) - 1));
    $('#current').html((Number($('#current').html()) - 1));
});    

}));

После загрузки страницы, кликая на картинку, открывается модальное окно и вперед/назад листается по 1, как положено. Если кликнуть по картинке второй раз, то листается уже по +2/-2 соответственно. С количеством кликов по картинкам растет и размер цифры вперед/назад. Где была мною допущена ошибка?

2
  • Судя по всему, в момент клика на вторую картинку при открытом модальном окне, скрипт отсчета картинок срабатывает повторно, в результате отсчет слайдов делается в каждом сработавшем скрипте. Вам нужно в момент клика определять по какой именно ссылке был сделан клик и передавать в скрипт его data-number. Делегирование событий в помощь - jquery.page2page.ru/index.php5/On
    – Илья
    20 ноя 2017 в 8:58
  • Решил проще - вынес из функции. :)
    – Devergence
    20 ноя 2017 в 9:29

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Посмотрите другие вопросы с метками или задайте свой вопрос.