The Goal
Basically, what I'm looking for is the ability to click a region below an image to trigger a click()
event which will scroll the window to the following image.
The Question
Is there a better way to do this? I've achieved the result I want, but with a whole ton of <divs>
? I know there are some plugins out there but I'd like to do it without including a large library.
The progress...
I've done this by placing several "invisible" <div>
elements around the image which are bound to click events. Later on I'll try to work through left, right, and top scrolling.
A live preview is available here.
Here is the code:
...
<div id="projimgarray">
<div class="main-proj">
<div class="topclick"></div>
<div class="bottomclick"></div>
<div class="leftclick"></div>
<div class="rightclick"></div>
<imG class="main-proj-img" src="https://picsum.photos/800/600">
</div>
<div class="main-proj">
<div class="topclick"></div> // these are the "invisible divs"
<div class="bottomclick"></div>
<div class="leftclick"></div>
<div class="rightclick"></div>
<img class="main-proj-img" src="https://picsum.photos/801/600">
</div>
$("document").ready(function() {
$(".bottomclick").click(function() {
console.log("Scroll jquery is working");
$( this ).parent().addClass("activeproj");
let $target = $(".activeproj").next(".main-proj");
if ($target.length == 0 )
$target = $(".main-proj:first");
$([document.documentElement, document.body]).animate({
scrollTop: $($target).offset().top
}, 2000);
$('.activeproj').removeClass('activeproj');
});
});