Здравствуйте. На странице есть 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 соответственно. С количеством кликов по картинкам растет и размер цифры вперед/назад. Где была мною допущена ошибка?
data-number
. Делегирование событий в помощь - jquery.page2page.ru/index.php5/On