Código JavaScript Integración Google Drive - OV DIVI

<script>
  // Configuración de Google Drive
  const FOLDER_ID = 'TU_ID_DE_CARPETA_DRIVE'';
  const API_KEY = 'TU_API_KEY';
  // Variables globales
  let images = [];
  let currentIndex = 0;
  let currentPage = 1;
  const imagesPerPage = 20; // Cambiar paginación

  // Función para mover el modal
  function moveModal() {
      const modal = document.getElementById('imageModal-gallery');
      const mainArea = document.getElementById('et-main-area');

      if (modal && mainArea) {
          mainArea.parentNode.insertBefore(modal, mainArea.nextSibling);
      }
  }

  // Función para renderizar el header de la galería
  function renderGalleryHeader() {
      const oldHeader = document.querySelector('.gallery-header');
      if (oldHeader) {
          oldHeader.remove();
      }

      const header = document.createElement('div');
      header.className = 'gallery-header';

      // Total de imágenes
      const totalImages = document.createElement('div');
      totalImages.className = 'total-images';
      totalImages.innerText = `Total: ${images.length} imágenes`;

      // Selector de orden
      const orderSelector = document.createElement('select');
      orderSelector.className = 'order-selector';
      orderSelector.innerHTML = `
          <option value="recent">Más recientes</option>
          <option value="oldest">Más antiguas</option>
          <option value="az">A-Z</option>
          <option value="za">Z-A</option>
      `;

      orderSelector.addEventListener('change', (e) => {
          sortImages(e.target.value);
          currentPage = 1;
          renderGallery();
          renderPagination();
          scrollToGalleryWithOffset();
      });

      header.appendChild(totalImages);
      header.appendChild(orderSelector);

      const gallery = document.getElementById('gallery');
      gallery.parentNode.insertBefore(header, gallery);
  }

  function sortImages(orderType) {
      switch(orderType) {
          case 'recent':
              images.sort((a, b) => b.name.localeCompare(a.name));
              break;
          case 'oldest':
              images.sort((a, b) => a.name.localeCompare(b.name));
              break;
          case 'az':
              images.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
              break;
          case 'za':
              images.sort((a, b) => b.name.toLowerCase().localeCompare(a.name.toLowerCase()));
              break;
      }
  }

  // Función para obtener las imágenes de Google Drive
  async function getImagesFromDrive() {
    try {
        let allImages = [];
        let pageToken = '';

        do {
            const url = `https://www.googleapis.com/drive/v3/files?q='${FOLDER_ID}'+in+parents&pageSize=1000&key=${API_KEY}&fields=nextPageToken,files(id,name,webContentLink,thumbnailLink,mimeType)${pageToken}`;
            const response = await fetch(url);
            const data = await response.json();

            const pageImages = data.files.filter(file =>
                file.mimeType && file.mimeType.startsWith('image/')
            );
            allImages = allImages.concat(pageImages);

            pageToken = data.nextPageToken ? `&pageToken=${data.nextPageToken}` : '';

        } while (pageToken);

        images = allImages;
        renderGalleryHeader(); // Agregamos esto
        renderGallery();
        renderPagination();
    } catch (error) {
        console.error('Error al obtener las imágenes:', error);
    }
  }

  // Función para renderizar la galería
  function renderGallery() {
      const gallery = document.getElementById('gallery');
      gallery.innerHTML = '';

      const startIndex = (currentPage - 1) * imagesPerPage;
      const endIndex = Math.min(startIndex + imagesPerPage, images.length);

      for (let i = startIndex; i < endIndex; i++) {
          const image = images[i];
          const item = document.createElement('div');
          item.className = 'gallery-item';

          const imageId = image.name.replace(/\.[^/.]+$/, "").replace(/\s+/g, '-').toLowerCase();

          item.innerHTML = `
              <img src="${image.thumbnailLink.replace('=s220', '=s1000')}"
                   alt="${image.name}"
                   class="gallery-image-${imageId}">
              <button class="download-btn download-btn-${imageId}"
                      data-url="${image.webContentLink}"
                      title="Descargar"></button>
          `;
          item.querySelector('img').addEventListener('click', () => openModal(i));
          item.querySelector('.download-btn').addEventListener('click', (e) => {
              e.stopPropagation();
              downloadImage(image.webContentLink, image.name);
          });
          gallery.appendChild(item);
      }
  }

function scrollToGalleryWithOffset() {
    const gallery = document.getElementById('gallery');
    const galleryPosition = gallery.getBoundingClientRect().top + window.pageYOffset - 70;
    window.scrollTo({
        top: galleryPosition,
        behavior: 'smooth'
    });
}

function renderPagination() {
      // Eliminar paginación anterior si existe
      const oldPagination = document.querySelector('.pagination');
      if (oldPagination) {
          oldPagination.remove();
      }

      const totalPages = Math.ceil(images.length / imagesPerPage);
      const paginationContainer = document.createElement('div');
      paginationContainer.className = 'pagination';

      const prevButton = document.createElement('button');
      prevButton.innerText = 'Anterior';
      prevButton.className = 'pagination-btn';
      prevButton.disabled = currentPage === 1;
      prevButton.addEventListener('click', () => {
          if (currentPage > 1) {
              currentPage--;
              renderGallery();
              renderPagination();
              scrollToGalleryWithOffset();
          }
      });

      const nextButton = document.createElement('button');
      nextButton.innerText = 'Siguiente';
      nextButton.className = 'pagination-btn';
      nextButton.disabled = currentPage === totalPages;
      nextButton.addEventListener('click', () => {
          if (currentPage < totalPages) {
              currentPage++;
              renderGallery();
              renderPagination();
              scrollToGalleryWithOffset();
          }
      });

      const pageInfo = document.createElement('span');
      pageInfo.className = 'page-info';
      pageInfo.innerText = `Página ${currentPage} de ${totalPages}`;

      paginationContainer.appendChild(prevButton);
      paginationContainer.appendChild(pageInfo);
      paginationContainer.appendChild(nextButton);

      const gallery = document.getElementById('gallery');
      gallery.parentNode.appendChild(paginationContainer);
  }

  // Funciones del modal
  const modal = document.getElementById('imageModal-gallery');
  const modalImage = document.getElementById('modalImage-gallery');

  function openModal(index) {
      currentIndex = index;
      updateModalImage();
      modal.style.display = 'block';
  }

  function closeModal() {
      modal.style.display = 'none';
  }

  function updateModalImage() {
      const imageUrl = images[currentIndex].thumbnailLink;
      modalImage.src = imageUrl.replace('=s220', '=s1400');
      modalImage.alt = images[currentIndex].name;
  }

  function nextImage() {
      currentIndex = (currentIndex + 1) % images.length;
      updateModalImage();
  }

  function prevImage() {
      currentIndex = (currentIndex - 1 + images.length) % images.length;
      updateModalImage();
  }

  // Función para descargar imagen
  async function downloadImage(url, filename) {
      try {
          window.location.href = url;
      } catch (error) {
          console.error('Error al descargar la imagen:', error);
      }
  }

  // Event Listeners
  document.getElementById('closeModal-gallery').addEventListener('click', closeModal);
  document.getElementById('prevBtn-gallery').addEventListener('click', prevImage);
  document.getElementById('nextBtn-gallery').addEventListener('click', nextImage);

  // Cerrar modal al hacer clic en el overlay
  modal.addEventListener('click', (e) => {
      if (e.target === modal) {
          closeModal();
      }
  });

  // Eventos de teclado
  document.addEventListener('keydown', (e) => {
      if (modal.style.display === 'block') {
          if (e.key === 'Escape') closeModal();
          if (e.key === 'ArrowRight') nextImage();
          if (e.key === 'ArrowLeft') prevImage();
      }
  });

  // Inicializar la galería y mover el modal
  document.addEventListener('DOMContentLoaded', () => {
      moveModal();
      getImagesFromDrive();
  });
</script>