I am experimenting with a plugin that allows me to attach popups to images. My goal is to enable navigation between all popups using previous and next buttons upon clicking on a popup.
Below is the element when it's displayed:
<div class="imp-tooltip imp-tooltip-visible" style="border-radius: 5px; padding: 20px; background: rgba(0, 0, 0, 0.9)"></div>
I attempted the following implementation:
<nav>
<button id="down" ></button>
<button id="up" ></button>
</nav>
var $currentElement = $(".imp-tooltip imp-tooltip-visible").first();
$("#down").click(function() {
var $nextElement = $currentElement.next('.imp-tooltip');
if ($nextElement.length) {
$currentElement = $nextElement;
$('html, body').stop(true).animate({
scrollTop: $nextElement.offset().top
}, 1000);
}
return false;
});
$("#up").click(function() {
var $prevElement = $currentElement.prev('.imp-tooltip');
if ($prevElement.length) {
$currentElement = $prevElement;
$('html, body').stop(true).animate({
scrollTop: $prevElement.offset().top
}, 1000);
}
return false;
});