How to set the sequential slide switching by clicking on .prev and .next ? That is, when you click on .next , the pop-up window #popup-box-a replaced by #popup-box-b , etc. When you click on .prev , respectively, in the opposite direction.

And loop the circle so that #popup-box-a opens after the last one. I tried through name.length , but I'm not very friendly with jquery.

Here is a piece of code.

 $(document).ready(function() { $('body').append('<div class="prev" id="prev-a"></div><div class="popup-box" id="popup-box-a"><img class="artbigpic" src="../IMG/arts/ami.png" /></div><div class="next" id="next-a"></div>'); $('body').append('<div class="prev" id="prev-b"></div><div class="popup-box" id="popup-box-b"><img class="artbigpic" src="../IMG/arts/chibi_chibi.jpg" /></div><div class="next" id="next-b"></div>'); $('body').append('<div class="prev" id="prev-c"></div><div class="popup-box" id="popup-box-c"><img class="artbigpic" src="../IMG/arts/screaming.jpg" /></div><div class="next" id="next-c"></div>'); $('body').append('<div class="prev" id="prev-d"></div><div class="popup-box" id="popup-box-d"><img class="artbigpic" src="../IMG/arts/knight.png" /></div><div class="next" id="next-d"></div>'); $('body').append('<div class="prev" id="prev-e"></div><div class="popup-box" id="popup-box-e"><img class="artbigpic" src="../IMG/arts/nahraen.jpg" /></div><div class="next" id="next-e"></div>'); $('body').append('<div class="prev" id="prev-f"></div><div class="popup-box" id="popup-box-f"><img class="artbigpic" src="../IMG/arts/regina.png" /></div><div class="next" id="next-f"></div>'); $('body').append('<div class="prev" id="prev-g"></div><div class="popup-box" id="popup-box-g"><img class="artbigpic" src="../IMG/arts/rin.png" /></div><div class="next" id="next-g"></div>'); $('body').append('<div class="prev" id="prev-h"></div><div class="popup-box" id="popup-box-h"><img class="artbigpic" src="../IMG/arts/luara.png" /></div><div class="next" id="next-h"></div>'); $('body').append('<div class="prev" id="prev-i"></div><div class="popup-box" id="popup-box-i"><img class="artbigpic" src="../IMG/arts/moulin_rouge.jpg" /></div><div class="next" id="next-i"></div>'); $('body').append('<div class="prev" id="prev-j"></div><div class="popup-box" id="popup-box-j"><img class="artbigpic" src="../IMG/arts/DA_contest.png" /></div><div class="next" id="next-j"></div>'); $('body').append('<div class="prev" id="prev-k"></div><div class="popup-box" id="popup-box-k"><img class="artbigpic" src="../IMG/arts/owl.jpg" /></div><div class="next"> id="next-k"</div>'); $('body').append('<div class="prev" id="prev-l"></div><div class="popup-box" id="popup-box-l"><img class="artbigpic" src="../IMG/arts/eva.png" /></div><div class="next" id="next-l"></div>'); $('body').append('<div class="prev" id="prev-m"></div><div class="popup-box" id="popup-box-m"><img class="artbigpic" src="../IMG/arts/me.jpg" /></div><div class="next" id="next-m"></div>'); $('body').append('<div class="prev" id="prev-n"></div><div class="popup-box" id="popup-box-n"><img class="artbigpic" src="../IMG/arts/winter.jpg" /></div><div class="next" id="next-n"></div>'); $('body').append('<div class="prev" id="prev-o"></div><div class="popup-box" id="popup-box-o"><img class="artbigpic" src="../IMG/arts/minako.jpg" /></div><div class="next" id="next-o"></div>'); $('body').append('<div class="prev" id="prev-p"></div><div class="popup-box" id="popup-box-p"><img class="artbigpic" src="../IMG/arts/moon_fairy.jpg" /></div><div class="next" id="next-p"></div>'); $('body').append('<div class="prev" id="prev-q"></div><div class="popup-box" id="popup-box-q"><img class="artbigpic" src="../IMG/arts/flower_fairy.png" /></div><div class="next" id="next-q"></div>'); $('body').append('<div class="prev" id="prev-r"></div><div class="popup-box" id="popup-box-r"><img class="artbigpic" src="../IMG/arts/luara_and_cassandra.jpg" /></div><div class="next" id="next-r"></div>'); $('[class*=popup-link]').click(function(e) { e.preventDefault(); e.stopPropagation(); var name = $(this).attr('class'); var id = name[name.length - 1]; var scrollPos = $(window).scrollTop(); $('#popup-box-'+id).show(); $('#prev-'+id).show(); $('#next-'+id).show(); $('html,body').css('overflow', 'hidden'); $('html').scrollTop(scrollPos); });
  • Can I change the name "popup-box-r" to popup-box-1? - Mihanik71
  • class popup-link where did it come from? - Vyacheslav Danshin

1 answer 1

Well, you can loop like this, if of course I correctly understood the task ...

 $(document).ready(function() { var imgSrcArr = [ "../IMG/arts/ami.png", "../IMG/arts/chibi_chibi.jpg", "../IMG/arts/screaming.jpg", "../IMG/arts/knight.png", "../IMG/arts/nahraen.jpg", "../IMG/arts/regina.png", "../IMG/arts/rin.png", "../IMG/arts/luara.png", "../IMG/arts/moulin_rouge.jpg", "../IMG/arts/DA_contest.png", "../IMG/arts/owl.jpg", "../IMG/arts/eva.png", "../IMG/arts/me.jpg", "../IMG/arts/winter.jpg", "../IMG/arts/minako.jpg", "../IMG/arts/moon_fairy.jpg", "../IMG/arts/flower_fairy.png", "../IMG/arts/luara_and_cassandra.jpg" ]; imgSrcArr.forEach(function(imgSrc, i) { var $domElemToAppend = $( '<div class="prev" id="prev-' + i + '">prev</div>' + '<div class="popup-box" id="popup-box-' + i + '"><img class="artbigpic" src="' + imgSrc + '" alt="' + imgSrc + '"/></div>' + '<div class="next" id="next-' + i + '">next</div>' ); $('body').append($domElemToAppend); if (i + 1 < imgSrcArr.length) { $domElemToAppend.hide(); }; }); $('.prev,.next').on('click', function(e) { var index = parseInt(e.target.id.split('-')[1]); var direction = (e.target.className == 'next') ? 1 : -1; var targetIndex = index + direction; if (targetIndex < 0) { targetIndex = imgSrcArr.length - 1; } else if (targetIndex > imgSrcArr.length - 1) { targetIndex = 0; }; var selector = '#prev-' + index + ',#next-' + index + ',#popup-box-' + index + ',#prev-' + targetIndex + ',#next-' + targetIndex + ',#popup-box-' + targetIndex; $(selector).toggle(); }) }); 
 <body><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script></body>