// Imágenes de ejemplo para la galería
const images = [
    "imagen1.jpg",
    "imagen2.jpg",
    "imagen3.jpg",
    "imagen4.jpg",
    "imagen5.jpg",
    "imagen6.jpg",
    "imagen7.jpg",
    "imagen8.jpg",
    "imagen9.jpg",
    "imagen10.jpg",
    // Agrega más imágenes aquí
];

// Configuración de la galería
const itemsPerPage = 12; // 3 columnas x 4 filas
const totalPages = Math.ceil(images.length / itemsPerPage);

// Función para generar la galería de imágenes
function generateGallery(page) {
    const startIndex = (page - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    const galleryItems = images.slice(startIndex, endIndex);

    const galleryElement = $("#gallery");
    galleryElement.empty();

    for (let i = 0; i < galleryItems.length; i++) {
        const imageSrc = galleryItems[i];
        const imageElement = $("<img>").attr("src", imageSrc).addClass("img-fluid");
        const galleryItem = $("<div>").addClass("col-lg-4 col-md-6 gallery-item").append(imageElement);
        galleryElement.append(galleryItem);
    }
}

// Función para generar la paginación
function generatePagination() {
    const paginationElement = $("#pagination");
    paginationElement.empty();

    for (let i = 1; i <= totalPages; i++) {
        const pageItem = $("<li>").addClass("page-item").append($("<a>").addClass("page-link").text(i));
        paginationElement.append(pageItem);
    }

    paginationElement.find("li:first-child").addClass("active");

    paginationElement.find("li").click(function () {
        const page = $(this).text();
        generateGallery(page);

        paginationElement.find("li").removeClass("active");
        $(this).addClass("active");
    });
}

// Inicializar la galería y paginación
generateGallery(1);
generatePagination();
``