{"id":11873,"date":"2016-06-10T22:55:27","date_gmt":"2016-06-10T20:55:27","guid":{"rendered":"http:\/\/www.magnificat.center\/?page_id=11873"},"modified":"2026-05-11T12:13:41","modified_gmt":"2026-05-11T10:13:41","slug":"foto-medjugorje","status":"publish","type":"page","link":"https:\/\/www.magnificat.center\/?page_id=11873&lang=en","title":{"rendered":"Photos of Medjugorje"},"content":{"rendered":"\n<!-- Magnificat Center \u00b7 Me\u0111ugorje Photo Gallery Slider -->\n<section style=\"background: #f5f3ef; padding: 40px 24px 80px;\">\n  <div style=\"max-width: 768px; margin: 0 auto;\">\n    \n    <!-- Section header -->\n    <div style=\"text-align: center; margin-bottom: 45px;\">\n      <div style=\"letter-spacing: 4px; font-size: 13px; font-weight: 600; text-transform: uppercase; color: #a08144; margin-bottom: 8px; font-family: 'Inter', sans-serif;\">\n        DISCOVER THE AREA\n      <\/div>\n      <h2 style=\"font-family: 'Cormorant Garamond', serif; font-size: 2.8rem; font-weight: 600; color: #1e2a2e; margin: 0.2rem 0 0.5rem 0; line-height: 1.2;\">\n        Photos of Me\u0111ugorje\n      <\/h2>\n      <div style=\"width: 50px; height: 2px; background-color: #cbaa5c; margin: 18px auto 0 auto; border: none;\"><\/div>\n    <\/div>\n\n    <!-- Slider container -->\n    <div class=\"medjugorje-slider-wrapper\" id=\"medjugorjeSliderWrapper\" style=\"position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 20px 40px -16px rgba(0,0,0,0.18); background: #fff; cursor: pointer;\">\n      \n      <!-- Slides track -->\n      <div class=\"medjugorje-slides\" id=\"medjugorjeSlides\" style=\"display: flex; transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform;\">\n        <!-- Slides injected by JS -->\n      <\/div>\n\n      <!-- Click to expand hint -->\n      <div class=\"expand-hint-medj\" style=\"position: absolute; top: 16px; right: 16px; background: rgba(0,0,0,0.55); color: #fff; padding: 8px 14px; border-radius: 20px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.5px; z-index: 10; backdrop-filter: blur(6px); display: flex; align-items: center; gap: 6px; opacity: 0; transition: opacity 0.3s; pointer-events: none;\">\n        <i class=\"fa fa-expand\" style=\"font-size: 0.75rem;\"><\/i> Click to expand\n      <\/div>\n\n      <!-- Navigation arrows -->\n      <button class=\"medj-slider-arrow medj-slider-arrow-left\" aria-label=\"Previous image\" style=\"position: absolute; left: 16px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.92); border: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.12); z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.25s; backdrop-filter: blur(4px);\">\n        <i class=\"fa fa-angle-left\" style=\"font-size: 1.3rem; color: #1e2a2e;\"><\/i>\n      <\/button>\n      <button class=\"medj-slider-arrow medj-slider-arrow-right\" aria-label=\"Next image\" style=\"position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.92); border: none; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.12); z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.25s; backdrop-filter: blur(4px);\">\n        <i class=\"fa fa-angle-right\" style=\"font-size: 1.3rem; color: #1e2a2e;\"><\/i>\n      <\/button>\n\n      <!-- Dots indicator -->\n      <div class=\"medj-slider-dots\" id=\"medjugorjeDots\" style=\"position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 10; flex-wrap: wrap; justify-content: center; padding: 0 16px;\"><\/div>\n    <\/div>\n\n    <!-- Thumbnail strip below -->\n    <div class=\"medj-thumbnail-strip\" id=\"medjugorjeThumbnails\" style=\"display: flex; gap: 10px; margin-top: 20px; overflow-x: auto; padding: 8px 0; scrollbar-width: thin; scrollbar-color: #cbaa5c #e8e4dc;\">\n      <!-- Thumbnails injected by JS -->\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==================== ME\u0110UGORJE LIGHTBOX OVERLAY ==================== -->\n<div id=\"medjugorjeLightbox\" style=\"display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.94); z-index: 9999; justify-content: center; align-items: center; flex-direction: column; opacity: 0; transition: opacity 0.35s ease;\">\n  \n  <!-- Close button -->\n  <button id=\"medjugorjeLightboxClose\" style=\"position: absolute; top: 20px; right: 24px; background: rgba(255,255,255,0.15); border: none; color: #fff; font-size: 1.6rem; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.25s; backdrop-filter: blur(4px);\">\n    <i class=\"fa fa-times\"><\/i>\n  <\/button>\n\n  <!-- Image container -->\n  <div style=\"max-width: 92vw; max-height: 82vh; display: flex; align-items: center; justify-content: center; position: relative;\">\n    <img decoding=\"async\" id=\"medjugorjeLightboxImage\" src=\"\" alt=\"\" style=\"max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); transition: transform 0.3s;\">\n  <\/div>\n\n  <!-- Counter -->\n  <div id=\"medjugorjeLightboxCounter\" style=\"color: rgba(255,255,255,0.8); margin-top: 18px; font-size: 0.9rem; font-weight: 500; letter-spacing: 1px; font-family: 'Inter', sans-serif;\"><\/div>\n\n  <!-- Prev\/Next in lightbox -->\n  <button id=\"medjugorjeLightboxPrev\" style=\"position: absolute; left: 20px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.12); border: none; color: #fff; font-size: 1.8rem; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.25s; backdrop-filter: blur(4px);\">\n    <i class=\"fa fa-angle-left\"><\/i>\n  <\/button>\n  <button id=\"medjugorjeLightboxNext\" style=\"position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.12); border: none; color: #fff; font-size: 1.8rem; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; transition: all 0.25s; backdrop-filter: blur(4px);\">\n    <i class=\"fa fa-angle-right\"><\/i>\n  <\/button>\n<\/div>\n\n<style>\n  \/* Me\u0111ugorje slider styles *\/\n  .medj-slider-arrow:hover {\n    background: #fff !important;\n    box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;\n    transform: translateY(-50%) scale(1.06) !important;\n  }\n\n  #medjugorjeSliderWrapper:hover .expand-hint-medj {\n    opacity: 1 !important;\n  }\n\n  .medjugorje-slides .gallery-slide {\n    min-width: 100%;\n    position: relative;\n    aspect-ratio: 4 \/ 3;\n    overflow: hidden;\n    background: #e8e4dc;\n  }\n\n  .medjugorje-slides .gallery-slide img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    display: block;\n    transition: transform 0.5s ease;\n  }\n\n  .medjugorje-slides .gallery-slide:hover img {\n    transform: scale(1.03);\n  }\n\n  .medj-slider-dots .slider-dot-medj {\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background: rgba(255,255,255,0.5);\n    border: 2px solid rgba(255,255,255,0.75);\n    cursor: pointer;\n    transition: all 0.3s;\n    backdrop-filter: blur(2px);\n  }\n\n  .medj-slider-dots .slider-dot-medj.active {\n    background: #cbaa5c;\n    border-color: #cbaa5c;\n    width: 28px;\n    border-radius: 20px;\n  }\n\n  .medj-thumbnail-strip .thumbnail-item-medj {\n    flex: 0 0 85px;\n    height: 62px;\n    border-radius: 8px;\n    overflow: hidden;\n    cursor: pointer;\n    border: 2px solid transparent;\n    transition: all 0.3s;\n    opacity: 0.6;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.08);\n  }\n\n  .medj-thumbnail-strip .thumbnail-item-medj:hover {\n    opacity: 0.85;\n    border-color: #cbaa5c;\n  }\n\n  .medj-thumbnail-strip .thumbnail-item-medj.active {\n    opacity: 1;\n    border-color: #cbaa5c;\n    box-shadow: 0 4px 14px rgba(203,170,92,0.3);\n  }\n\n  .medj-thumbnail-strip .thumbnail-item-medj img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n  }\n\n  \/* Lightbox button hovers *\/\n  #medjugorjeLightboxClose:hover,\n  #medjugorjeLightboxPrev:hover,\n  #medjugorjeLightboxNext:hover {\n    background: rgba(255,255,255,0.25) !important;\n  }\n\n  #medjugorjeLightboxPrev:hover {\n    transform: translateY(-50%) scale(1.08);\n  }\n\n  #medjugorjeLightboxNext:hover {\n    transform: translateY(-50%) scale(1.08);\n  }\n\n#medjugorjeLightboxClose:hover {\n    transform: scale(1.08);\n  }\n\n  .medj-thumbnail-strip::-webkit-scrollbar {\n    height: 5px;\n  }\n  .medj-thumbnail-strip::-webkit-scrollbar-track {\n    background: #e8e4dc;\n    border-radius: 4px;\n  }\n  .medj-thumbnail-strip::-webkit-scrollbar-thumb {\n    background: #cbaa5c;\n    border-radius: 4px;\n  }\n\n  @media (max-width: 768px) {\n    .medjugorje-slides .gallery-slide {\n      aspect-ratio: 3 \/ 4;\n    }\n    .medj-slider-arrow {\n      width: 36px !important;\n      height: 36px !important;\n      left: 10px !important;\n    }\n    .medj-slider-arrow-right {\n      right: 10px !important;\n      left: auto !important;\n    }\n    .medj-slider-arrow i {\n      font-size: 1.1rem !important;\n    }\n    .medj-thumbnail-strip .thumbnail-item-medj {\n      flex: 0 0 60px;\n      height: 44px;\n    }\n    .medj-slider-dots .slider-dot-medj {\n      width: 8px;\n      height: 8px;\n    }\n    .medj-slider-dots .slider-dot-medj.active {\n      width: 22px;\n    }\n    .expand-hint-medj {\n      font-size: 0.7rem !important;\n      padding: 6px 10px !important;\n      top: 10px !important;\n      right: 10px !important;\n    }\n    #medjugorjeLightboxPrev, #medjugorjeLightboxNext {\n      width: 38px;\n      height: 38px;\n      font-size: 1.3rem;\n    }\n    #medjugorjeLightboxPrev { left: 10px; }\n    #medjugorjeLightboxNext { right: 10px; }\n  }\n\n  @media (max-width: 480px) {\n    .medjugorje-slides .gallery-slide {\n      aspect-ratio: 3 \/ 4;\n    }\n    .medj-slider-arrow {\n      width: 30px !important;\n      height: 30px !important;\n      left: 6px !important;\n    }\n    .medj-slider-arrow-right {\n      right: 6px !important;\n    }\n    #medjugorjeLightboxClose {\n      top: 12px;\n      right: 14px;\n      width: 36px;\n      height: 36px;\n      font-size: 1.2rem;\n    }\n  }\n<\/style>\n\n<script>\n  (function() {\n    if (window._medjugorjeGalleryInitialized) return;\n    window._medjugorjeGalleryInitialized = true;\n\n    const galleryImages = [\n      { src: \"https:\/\/www.magnificat.center\/wp-content\/uploads\/2026\/05\/3-1024x680.jpg\", alt: \"Me\u0111ugorje beautiful view\" },\n      { src: \"https:\/\/www.magnificat.center\/wp-content\/uploads\/2026\/05\/9-1024x576.jpg\", alt: \"Me\u0111ugorje landscape view\" },\n      { src: \"https:\/\/www.magnificat.center\/wp-content\/uploads\/2026\/05\/8-1024x682.jpg\", alt: \"Me\u0111ugorje church and surroundings\" },\n      { src: \"https:\/\/www.magnificat.center\/wp-content\/uploads\/2026\/05\/6-1024x680.jpg\", alt: \"Me\u0111ugorje panoramic scenery\" },\n      { src: \"https:\/\/www.magnificat.center\/wp-content\/uploads\/2026\/05\/5-1024x576.jpg\", alt: \"Me\u0111ugorje peaceful nature\" },\n      { src: \"https:\/\/www.magnificat.center\/wp-content\/uploads\/2026\/05\/4-1024x683.jpg\", alt: \"Me\u0111ugorje spiritual landmark\" },\n\n      { src: \"https:\/\/www.magnificat.center\/wp-content\/uploads\/2026\/05\/2-1024x576.jpg\", alt: \"Me\u0111ugorje town scenery\" },\n      { src: \"https:\/\/www.magnificat.center\/wp-content\/uploads\/2026\/05\/1-1024x576.jpg\", alt: \"Me\u0111ugorje pilgrimage site\" }\n    ];\n\n    let currentIndex = 0;\n    let autoPlayInterval;\n    const slidesContainer = document.getElementById('medjugorjeSlides');\n    const dotsContainer = document.getElementById('medjugorjeDots');\n    const thumbnailStrip = document.getElementById('medjugorjeThumbnails');\n    const sliderWrapper = document.getElementById('medjugorjeSliderWrapper');\n\n    const lightboxOverlay = document.getElementById('medjugorjeLightbox');\n    const lightboxImage = document.getElementById('medjugorjeLightboxImage');\n    const lightboxCounter = document.getElementById('medjugorjeLightboxCounter');\n    const lightboxClose = document.getElementById('medjugorjeLightboxClose');\n    const lightboxPrev = document.getElementById('medjugorjeLightboxPrev');\n    const lightboxNext = document.getElementById('medjugorjeLightboxNext');\n\n    \/\/ Build slides\n    galleryImages.forEach((img, i) => {\n      const slide = document.createElement('div');\n      slide.className = 'gallery-slide';\n      slide.innerHTML = `<img decoding=\"async\" src=\"${img.src}\" alt=\"${img.alt}\" loading=\"${i < 2 ? 'eager' : 'lazy'}\">`;\n      slide.addEventListener('click', () => openLightbox(i));\n      slidesContainer.appendChild(slide);\n    });\n\n    \/\/ Build dots\n    galleryImages.forEach((_, i) => {\n      const dot = document.createElement('span');\n      dot.className = 'slider-dot-medj' + (i === 0 ? ' active' : '');\n      dot.addEventListener('click', (e) => {\n        e.stopPropagation();\n        goToSlide(i);\n      });\n      dotsContainer.appendChild(dot);\n    });\n\n    \/\/ Build thumbnails\n    galleryImages.forEach((img, i) => {\n      const thumb = document.createElement('div');\n      thumb.className = 'thumbnail-item-medj' + (i === 0 ? ' active' : '');\n      thumb.innerHTML = `<img decoding=\"async\" src=\"${img.src}\" alt=\"${img.alt}\" loading=\"lazy\">`;\n      thumb.addEventListener('click', (e) => {\n        e.stopPropagation();\n        goToSlide(i);\n      });\n      thumbnailStrip.appendChild(thumb);\n    });\n\n    function goToSlide(index) {\n      currentIndex = index;\n      slidesContainer.style.transform = `translateX(-${currentIndex * 100}%)`;\n      \n      document.querySelectorAll('#medjugorjeDots .slider-dot-medj').forEach((d, i) => {\n        d.classList.toggle('active', i === currentIndex);\n      });\n      \n      document.querySelectorAll('#medjugorjeThumbnails .thumbnail-item-medj').forEach((t, i) => {\n        t.classList.toggle('active', i === currentIndex);\n      });\n\n      const activeThumb = thumbnailStrip.children[currentIndex];\n      if (activeThumb) {\n        activeThumb.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });\n      }\n    }\n\n    function nextSlide() {\n      goToSlide((currentIndex + 1) % galleryImages.length);\n    }\n\n    function prevSlide() {\n      goToSlide((currentIndex - 1 + galleryImages.length) % galleryImages.length);\n    }\n\n    document.querySelector('.medj-slider-arrow-left').addEventListener('click', (e) => {\n      e.stopPropagation();\n      prevSlide();\n    });\n    document.querySelector('.medj-slider-arrow-right').addEventListener('click', (e) => {\n      e.stopPropagation();\n      nextSlide();\n    });\n\n    sliderWrapper.addEventListener('click', (e) => {\n      if (!e.target.closest('.medj-slider-arrow') && !e.target.closest('.slider-dot-medj')) {\n        openLightbox(currentIndex);\n      }\n    });\n\n    \/\/ Lightbox functions\n    function openLightbox(index) {\n      currentIndex = index;\n      updateLightboxImage();\n      lightboxOverlay.style.display = 'flex';\n      requestAnimationFrame(() => {\n        lightboxOverlay.style.opacity = '1';\n      });\n      document.body.style.overflow = 'hidden';\n      stopAutoPlay();\n    }\n\n    function closeLightbox() {\n      lightboxOverlay.style.opacity = '0';\n      setTimeout(() => {\n        lightboxOverlay.style.display = 'none';\n        document.body.style.overflow = '';\n      }, 350);\n      startAutoPlay();\n    }\n\n    function updateLightboxImage() {\n      lightboxImage.src = galleryImages[currentIndex].src;\n      lightboxImage.alt = galleryImages[currentIndex].alt;\n      lightboxCounter.textContent = `${currentIndex + 1} \/ ${galleryImages.length}`;\n      goToSlide(currentIndex);\n    }\n\n    function lightboxNextFn() {\n      currentIndex = (currentIndex + 1) % galleryImages.length;\n      updateLightboxImage();\n    }\n\n    function lightboxPrevFn() {\n      currentIndex = (currentIndex - 1 + galleryImages.length) % galleryImages.length;\n      updateLightboxImage();\n    }\n\n    lightboxClose.addEventListener('click', closeLightbox);\n    lightboxNext.addEventListener('click', (e) => { e.stopPropagation(); lightboxNextFn(); });\n    lightboxPrev.addEventListener('click', (e) => { e.stopPropagation(); lightboxPrevFn(); });\n\n    lightboxOverlay.addEventListener('click', (e) => {\n      if (e.target === lightboxOverlay) closeLightbox();\n    });\n\n    document.addEventListener('keydown', (e) => {\n      if (lightboxOverlay.style.display === 'flex') {\n        if (e.key === 'Escape') closeLightbox();\n        if (e.key === 'ArrowLeft') lightboxPrevFn();\n        if (e.key === 'ArrowRight') lightboxNextFn();\n      } else {\n        if (e.key === 'ArrowLeft') prevSlide();\n        if (e.key === 'ArrowRight') nextSlide();\n      }\n    });\n\n    let lbTouchStartX = 0;\n    lightboxOverlay.addEventListener('touchstart', (e) => {\n      lbTouchStartX = e.changedTouches[0].screenX;\n    }, { passive: true });\n\n    lightboxOverlay.addEventListener('touchend', (e) => {\n      const diff = lbTouchStartX - e.changedTouches[0].screenX;\n      if (Math.abs(diff) > 50) {\n        if (diff > 0) lightboxNextFn();\n        else lightboxPrevFn();\n      }\n    });\n\n    let touchStartX = 0;\n    slidesContainer.addEventListener('touchstart', (e) => {\n      touchStartX = e.changedTouches[0].screenX;\n    }, { passive: true });\n\n    slidesContainer.addEventListener('touchend', (e) => {\n      const diff = touchStartX - e.changedTouches[0].screenX;\n      if (Math.abs(diff) > 50) {\n        if (diff > 0) nextSlide();\n        else prevSlide();\n      }\n    });\n\n    function startAutoPlay() {\n      if (autoPlayInterval) return;\n      autoPlayInterval = setInterval(nextSlide, 4500);\n    }\n\n    function stopAutoPlay() {\n      clearInterval(autoPlayInterval);\n      autoPlayInterval = null;\n    }\n\n    sliderWrapper.addEventListener('mouseenter', stopAutoPlay);\n    sliderWrapper.addEventListener('mouseleave', startAutoPlay);\n    sliderWrapper.addEventListener('touchstart', stopAutoPlay, { passive: true });\n    sliderWrapper.addEventListener('touchend', () => {\n      setTimeout(startAutoPlay, 2000);\n    });\n\n    startAutoPlay();\n    goToSlide(0);\n  })();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>DISCOVER THE AREA Photos of Me\u0111ugorje Click to expand<\/p>\n","protected":false},"author":1,"featured_media":16205,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11873","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.magnificat.center\/index.php?rest_route=\/wp\/v2\/pages\/11873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.magnificat.center\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.magnificat.center\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.magnificat.center\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.magnificat.center\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=11873"}],"version-history":[{"count":6,"href":"https:\/\/www.magnificat.center\/index.php?rest_route=\/wp\/v2\/pages\/11873\/revisions"}],"predecessor-version":[{"id":16403,"href":"https:\/\/www.magnificat.center\/index.php?rest_route=\/wp\/v2\/pages\/11873\/revisions\/16403"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.magnificat.center\/index.php?rest_route=\/wp\/v2\/media\/16205"}],"wp:attachment":[{"href":"https:\/\/www.magnificat.center\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}