{"id":2024,"date":"2025-04-25T15:11:27","date_gmt":"2025-04-25T15:11:27","guid":{"rendered":"https:\/\/neptunmanagement.com\/?page_id=2024"},"modified":"2025-05-01T05:28:09","modified_gmt":"2025-05-01T05:28:09","slug":"gallery","status":"publish","type":"page","link":"https:\/\/neptunmanagement.com\/fr\/gallery\/","title":{"rendered":"Gallery"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2024\" class=\"elementor elementor-2024\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e63d6f e-flex e-con-boxed e-con e-parent\" data-id=\"7e63d6f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-de0989a elementor-widget elementor-widget-heading\" data-id=\"de0989a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Gallery<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b2bc85b e-con-full e-flex e-con e-parent\" data-id=\"b2bc85b\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8a8700a elementor-widget elementor-widget-heading\" data-id=\"8a8700a\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;]}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">GALLERY<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f55864f elementor-widget elementor-widget-shortcode\" data-id=\"f55864f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <style>\n\n\n.image-slider {\n    display: flex;\n    flex-flow: column;\n    width: clamp(100%, 96vw, 830px);\n    aspect-ratio: 16 \/ 9;\n    min-height: 300px;\n    overflow: hidden;\n    border-radius: 0px;\n    container-type: inline-size;\n    contain: content;\n    \n    \n}\n\n.slider__content {\n    flex-grow: 1;\n    display: flex;\n    justify-content: space-between;\n}\n\n.slider-control--button {\n    border: 0;\n    background: 0;\n    outline: 0;\n    cursor: pointer;\n    place-content: center;\n    padding-inline: 3vw;\n    z-index: 1;\n    display: grid;\n}\n\n.icon {\n    height: 2rem;\n    width: 2rem;\n    fill: var(--icon-default);\n    border-radius: 50%;\n}\n\n.slider-control--button:where(:hover) {\n    background-image: linear-gradient(\n        to var(--position),\n        #0000 0%,\n        #0002,\n        80%,\n        #0006 100%\n    );\n    .icon {\n        fill: var(--icon-accent);\n        background: #0001;\n    }\n}\n\n.slider-control--button:active {\n    outline: 0.2em solid hsl(204 100 53);\n    outline-offset: -0.5em;\n}\n\n.prev-button {\n    --position: left;\n}\n.next-button {\n    --position: right;\n}\n\n.image-display {\n    position: fixed;\n    inset: 0;\n}\n\n.slider-navigation {\n    z-index: 10;\n    display: grid;\n    grid-auto-flow: column;\n    grid-template-columns: repeat(6, 1fr);\n    grid-auto-columns: 100%;\n    gap: 1.25rem;\n    padding: 1rem;\n    place-content: center;\n    background-color: var(--navigation-color);\n    backdrop-filter: blur(6px);\n}\nnav.slider-navigation{\n\t background: rgba(255, 255, 255, 0.1);  \/* Transparent white *\/\n  backdrop-filter: blur(10px);          \/* Blur background *\/\n  -webkit-backdrop-filter: blur(10px);  \/* Safari support *\/\n  border-radius: 0px;                  \/* Rounded corners *\/\n  border: 0px solid rgba(255, 255, 255, 0.2); \/* Light border *\/\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); \/* Shadow for depth *\/\n  padding: 20px;\n  color: #fff; \/* Text color white *\/\n}\n.nav-button {\n    display: grid;\n    width: 100%;\n    height: 100%;\n    border-radius: 0.5em;\n    overflow: hidden;\n    align-items: center;\n    justify-content: center;\n    border: 0;\n    aspect-ratio: 16 \/ 9;\n    transition: filter 150ms linear, scale 266ms ease;\n\tpadding: 0px;\n    background: none;\n}\n\t.nav-button{\n\t\tpadding: 0px !important;\n    background: none !important;\n\t}\n\n.thumbnail {\n    display: block;\n    max-width: 100%;\n    width: 100%;\n    object-fit: cover;\n   height: 90% !important;\n}\n\n.nav-button[aria-selected=\"true\"] {\n    scale: 1.1;\n \n}\nbutton.slider-control--button.next-button{\n\t background: rgba(255, 255, 255, 0.1);  \/* Transparent white *\/\n  \n  border-radius: 0px;                  \/* Rounded corners *\/\n  border: 0px solid rgba(255, 255, 255, 0.2); \/* Light border *\/\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); \/* Shadow for depth *\/\n  padding: 20px;\n  color: #fff; \n\t position: absolute;\n  top: 50%; \n  transform: translateY(-50%); \n  z-index: 10;\t\n}\n\tbutton.slider-control--button.prev-button{\n\t\t background: rgba(255, 255, 255, 0.1);    \n  border-radius: 0px;                  \n  border: 0px solid rgba(255, 255, 255, 0.2); \n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); \n  padding: 20px;\n  color: #fff;\n\t\t position: absolute;\n  top: 55%; \n\t}\n.nav-button[aria-selected=\"true\"],\n.nav-button:focus-visible {\n    outline: 0.2em solid var(--active-color);\n    outline-offset: 0.2em;\n}\n\n.nav-button[aria-selected=\"false\"] {\n    filter: opacity(0.7);\n}\n\n.nav-button[aria-selected=\"false\"]:where(:hover, :focus-visible) {\n    filter: opacity(1);\n}\n\n@media(max-width: 660px) {\n    .nav-button:not(:has(img)) {\n        background-color: rgb(241, 235, 232);\n    }\n\n    .slider-navigation {\n        display: flex;\n        justify-content: center;\n        padding-block: 1.5em;\n    }\n\n    .nav-button {\n        inline-size: 0.625rem;\n        aspect-ratio: 1;\n        border-radius: 50%;\n    }\n\n    .nav-button > .thumbnail {\n        display: none;\n    }\n\tnav.slider-navigation{\n\t\t\t\tdisplay:none;\n\t\t\t}\n\t\t\tbutton.slider-control--button.prev-button{\n\t\t\t\ttop:45% !important;\n\t\t\t\tpadding:10px !important;\n\t\t\t}\n\tbutton.slider-control--button.next-button{\n\t\t\t\ttop:45% !important;\n\t\t\t\tpadding:10px !important;\n\t\t\t}\n\t\n\n    .nav-button[aria-selected=\"true\"] {\n        background-color: black;\n        scale: 1.5;\n    }\n}\n\t\t@media (max-width: 768px) {\n  .image-slider {\n    width: 100%;\n    aspect-ratio: auto;\n    min-height: 200px;\n    flex-direction: column;\n    padding: 0;\n  }\n\n  .slider__content {\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n  }\n\n  .image-display img {\n    width: 100%;\n    height: auto;\n    object-fit: contain;\n  }\n\n  .slider-control--button {\n    padding: 10px;\n    background: rgba(0, 0, 0, 0.3);\n  }\n\n  .slider-control--button.next-button,\n  .slider-control--button.prev-button {\n    top: 40%;\n    transform: translateY(-50%);\n  }\n\n  .slider-control--button.next-button {\n    right: 0;\n  }\n\n  .slider-control--button.prev-button {\n    left: 0;\n  }\n\n  .slider-navigation {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: center;\n    gap: 0.5rem;\n    padding: 0.5rem;\n    background: rgba(0, 0, 0, 0.3);\n  }\n\n  .nav-button {\n    width: 60px;\n    height: 40px;\n    aspect-ratio: auto;\n    padding: 0;\n    border-radius: 5px;\n  }\n\n  .thumbnail {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  .nav-button[aria-selected=\"true\"] {\n    outline: 2px solid #fff;\n    scale: 1.1;\n  }\n}\n\n\n    <\/style>\n   <div class=\"image-slider\">\n    <section class=\"slider__content\">\n        <button type=\"button\" class=\"slider-control--button prev-button\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" class=\"icon arrow-left-circle\" viewbox=\"0 0 16 16\">\n                <path fill-rule=\"evenodd\" d=\"M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-4.5-.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z\" \/>\n            <\/svg>\n        <\/button>\n        <main class=\"image-display\"><\/main>\n        <button type=\"button\" class=\"slider-control--button next-button\">\n            <svg width=\"16\" height=\"16\" fill=\"currentColor\" class=\"icon arrow-right-circle\" viewbox=\"0 0 16 16\">\n                <path fill-rule=\"evenodd\" d=\"M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z\" \/>\n            <\/svg>\n        <\/button>\n    <\/section>\n    <nav class=\"slider-navigation\">\n        <button class=\"nav-button\" aria-selected=\"true\">\n            <img decoding=\"async\" class=\"thumbnail\" src=\"https:\/\/neptunmanagement.com\/wp-content\/uploads\/2025\/04\/image-3.jpg\" alt=\"Thumbnail 1\" \/>\n        <\/button>\n        <button class=\"nav-button\" aria-selected=\"false\">\n            <img decoding=\"async\" class=\"thumbnail\" src=\"https:\/\/neptunmanagement.com\/wp-content\/uploads\/2025\/04\/image-3-1.png\" alt=\"Thumbnail 2\" \/>\n        <\/button>\n        <button class=\"nav-button\" aria-selected=\"false\">\n            <img decoding=\"async\" class=\"thumbnail\" src=\"https:\/\/neptunmanagement.com\/wp-content\/uploads\/2025\/04\/image-4.png\" alt=\"Thumbnail 3\" \/>\n        <\/button>\n        <button class=\"nav-button\" aria-selected=\"false\">\n            <img decoding=\"async\" class=\"thumbnail\" src=\"https:\/\/neptunmanagement.com\/wp-content\/uploads\/2025\/04\/image-6.png\" alt=\"Thumbnail 4\" \/>\n        <\/button>\n        <button class=\"nav-button\" aria-selected=\"false\">\n            <img decoding=\"async\" class=\"thumbnail\" src=\"https:\/\/neptunmanagement.com\/wp-content\/uploads\/2025\/04\/drink-more-water-hub.jpg\" alt=\"Thumbnail 5\" \/>\n        <\/button>\n        <button class=\"nav-button\" aria-selected=\"false\">\n            <img decoding=\"async\" class=\"thumbnail\" src=\"https:\/\/neptunmanagement.com\/wp-content\/uploads\/2025\/04\/aec891_9f6b6e3222754b27bd12b8cf6917cc61mv2.avif\" alt=\"Thumbnail 6\" \/>\n        <\/button>\n    <\/nav>\n<\/div>\n   <script>\n  \/\/ Slider class code\n  class Slider {\n    constructor(slider) {\n      this.slider = slider;\n      this.display = slider.querySelector(\".image-display\");\n      this.navButtons = Array.from(slider.querySelectorAll(\".nav-button\"));\n      this.prevButton = slider.querySelector(\".prev-button\");\n      this.nextButton = slider.querySelector(\".next-button\");\n      this.sliderNavigation = slider.querySelector(\".slider-navigation\");\n      this.currentSlideIndex = 0;\n      this.preloadedImages = {};\n      this.initialize();\n    }\n    initialize() {\n      this.setupSlider();\n      this.preloadImages();\n      this.eventListeners();\n    }\n    setupSlider() {\n      this.showSlide(this.currentSlideIndex);\n    }\n    showSlide(index) {\n      this.currentSlideIndex = index;\n      const navButtonImg = this.navButtons[this.currentSlideIndex].querySelector(\"img\");\n      if (navButtonImg) {\n        const imgClone = navButtonImg.cloneNode();\n        this.display.replaceChildren(imgClone);\n      }\n      this.updateNavButtons();\n    }\n    updateNavButtons() {\n      this.navButtons.forEach((button, buttonIndex) => {\n        const isSelected = buttonIndex === this.currentSlideIndex;\n        button.setAttribute(\"aria-selected\", isSelected);\n        if (isSelected) button.focus();\n      });\n    }\n    preloadImages() {\n      this.navButtons.forEach((button) => {\n        const imgElement = button.querySelector(\"img\");\n        if (imgElement) {\n          const imgSrc = imgElement.src;\n          if (!this.preloadedImages[imgSrc]) {\n            this.preloadedImages[imgSrc] = new Image();\n            this.preloadedImages[imgSrc].src = imgSrc;\n          }\n        }\n      });\n    }\n    eventListeners() {\n      document.addEventListener(\"keydown\", (event) => {\n        this.handleAction(event.key);\n      });\n      this.sliderNavigation.addEventListener(\"click\", (event) => {\n        const targetButton = event.target.closest(\".nav-button\");\n        const index = targetButton\n          ? this.navButtons.indexOf(targetButton)\n          : -1;\n        if (index !== -1) {\n          this.showSlide(index);\n        }\n      });\n      this.prevButton.addEventListener(\"click\", () => this.handleAction(\"prev\"));\n      this.nextButton.addEventListener(\"click\", () => this.handleAction(\"next\"));\n    }\n    handleAction(action) {\n      if (action === \"Home\") {\n        this.currentSlideIndex = 0;\n      } else if (action === \"End\") {\n        this.currentSlideIndex = this.navButtons.length - 1;\n      } else if (action === \"ArrowRight\" || action === \"next\") {\n        this.currentSlideIndex = (this.currentSlideIndex + 1) % this.navButtons.length;\n      } else if (action === \"ArrowLeft\" || action === \"prev\") {\n        this.currentSlideIndex =\n          (this.currentSlideIndex - 1 + this.navButtons.length) %\n          this.navButtons.length;\n      }\n      this.showSlide(this.currentSlideIndex);\n    }\n  }\n\n  \/\/ Initialize the slider\n  const ImageSlider = new Slider(document.querySelector(\".image-slider\"));\n<\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>GALLERY<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-2024","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/pages\/2024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/comments?post=2024"}],"version-history":[{"count":231,"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/pages\/2024\/revisions"}],"predecessor-version":[{"id":2855,"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/pages\/2024\/revisions\/2855"}],"wp:attachment":[{"href":"https:\/\/neptunmanagement.com\/fr\/wp-json\/wp\/v2\/media?parent=2024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}