var currentOffset = 0; var viewHeight, displayable, galleryHeight, galleryMargin, galleryCount, maxOffset; $(function () { //$("body").backstretch("img/backgrounds/bg_restaurant.jpg"); lightbox.option({ 'resizeDuration': 300, 'wrapAround': true, 'albumLabel': "Bild %1 von %2" }); function init() { viewHeight = $(window).height(); displayable = Math.floor((viewHeight - 220) / 140); galleryHeight = displayable * 140; galleryMargin = (viewHeight - galleryHeight) / 2; galleryCount = $('#navi li').length; maxOffset = -1 * (galleryCount - displayable) * 140; console.debug(displayable, galleryCount); $('#scroll').css({ height: galleryHeight, 'top': galleryMargin }) } // Anzuzeigende Bilder let imagesToLoad = [{ path: "Speisen01", alt: "" }, { path: "Speisen02", alt: "" }, { path: "Speisen03", alt: "" }, { path: "Speisen04", alt: "" }, { path: "Speisen05", alt: "" }, { path: "Restaurant01", alt: "" }, { path: "Restaurant02", alt: "" }, { path: "Restaurant03", alt: "" }, { path: "Restaurant04", alt: "" }, { path: "Restaurant05", alt: "" }, { path: "Restaurant06", alt: "" }, { path: "Restaurant07", alt: "" }, { path: "Restaurant08", alt: "", title: "" }, { path: "Restaurant09", alt: "" }, { path: "Restaurant10", alt: "" }, { path: "Restaurant11", alt: "" }, { path: "Restaurant12", alt: "" }, { path: "Restaurant13", alt: "" }, { path: "Restaurant14", alt: "" }, { path: "Restaurant15", alt: "" }, { path: "Restaurant16", alt: "" }, { path: "Restaurant17", alt: "" }, { path: "Restaurant18", alt: "" }, { path: "Restaurant19", alt: "" }, { path: "Restaurant20", alt: "" }, ]; // Ende Anzuzeigende Bilder imagesToLoad.forEach(function (element) { var item = '
  • '; $('#navi').append(item); }); $('#prev').click(function () { if (currentOffset < 0) { currentOffset += 140; } else { currentOffset = maxOffset; } $('#navi').css('transform', "translateY(" + currentOffset + "px)"); }); $('#next').click(function () { if (currentOffset > maxOffset) { currentOffset -= 140; } else { currentOffset = 0; } $('#navi').css('transform', "translateY(" + currentOffset + "px)"); }); $(window).on('mousewheel DOMMouseScroll', function (event) { if (event.originalEvent.detail >= 0) { $('#next').click(); } else { $('#prev').click(); } }); $(window).resize(function () { init(); }); init(); });