Skip to main content
se añadieron 554 caracteres en el cuerpo
Origen Enlace
Eduardo
  • 384
  • 2
  • 13

Edición 2, utilizo AlpineJS

Para atribuirle al mismo modal las propiedades de hash, y vincular los eventos para mostrar ó cerrar el mismo modal esta es la parte dentro del componente de Blade en donde se especifíca el comportamiento:

@props(['hash'])

<div 
    x-data="{show: false, hash: '{{ $hash }}'}" 
    x-show="show"
    x-on:modal.window="
        show = ($event.detail === hash);
    "
    @keydown.escape.window="show = false"
    @hashchange.window="
        show = (location.hash === '#{{$hash}}');
    "
>

Edición 2, utilizo AlpineJS

Para atribuirle al mismo modal las propiedades de hash, y vincular los eventos para mostrar ó cerrar el mismo modal esta es la parte dentro del componente de Blade en donde se especifíca el comportamiento:

@props(['hash'])

<div 
    x-data="{show: false, hash: '{{ $hash }}'}" 
    x-show="show"
    x-on:modal.window="
        show = ($event.detail === hash);
    "
    @keydown.escape.window="show = false"
    @hashchange.window="
        show = (location.hash === '#{{$hash}}');
    "
>
Se explico con más detalle algunos elementos relacionados con la funcionalidad del código.
Origen Enlace
Eduardo
  • 384
  • 2
  • 13

Edición, la parte del Modal, ¿en dónde se ven las imagenes?

Para mostrar las imágenes estoy utilizando un botón que inicia un modal. La función, show hace que pueda ver el contenido gracias a que esta lleva una variable:

<button
    onclick="$modals.show('faro-posts-img-modal-{{ $post->id }}')"
    class="bg-blue-100 border-2 border-blue-500 text-sm rounded-md p-1 text-blue-500 hover:bg-blue-500 hover:border-none hover:text-white transition ease-in-out"
>
    Mostrar
</button>

Este es el script, se despeja un "CustomEvent" y buscar la propiedad "hash":

<script>
    window.$modals = {
        show(hash) {
            window.dispatchEvent(
                new CustomEvent('modal', { 
                    detail: hash
                })
            );
        }
    }
</script>

Como hash es la propiedad que la función intenta buscar en las etiquetas del componente y así poder abrir las imágenes correspondientes con un post:

<x-faro-posts-img-modal hash="faro-posts-img-modal-{{$post->id}}">
@foreach loop
@endforeach
</x-faro-posts-img-modal>

Existe un problema al cerrar el modal ya que para cerrar también se necesita un atributo como "#".

En la etiqueta: <a href="#"> tengo este símbolo: &times; que es mi botón para poder cerrar el modal pero pasa que la URL ahora se ve así: http://tweety.test/faro#, esto ocasiona que cuando quiero abrir un nuevo modal y utilizar nuevamente el slider, no me permita poder ver las imágenes a menos que refresque la página.

Esta parte es el componente Blade:

        <div class="fixed inset-0 flex items-center justify-center w-72 h-64 m-auto md:h-auto md:w-auto md:max-w-3xl md:my-5 md:mx-5 md:mx-auto bg-white rounded-md shadow-md overflow-x-auto md:overflow-hidden">
            <a href="#" 
                class="absolute right-10 top-10 md:right-16 md:top-10 h-8 w-8 text-xl text-center flex items-center justify-center cursor-pointer hover:bg-gray-200 transition ease-in-out">
                &times;
            </a>
            
            {{$slot}}
            
        </div>

Es en la variable de {{$slot}} en donde se está incluyendo el foreach loop y en donde se aplica las clases del slider.

Edición, la parte del Modal, ¿en dónde se ven las imagenes?

Para mostrar las imágenes estoy utilizando un botón que inicia un modal. La función, show hace que pueda ver el contenido gracias a que esta lleva una variable:

<button
    onclick="$modals.show('faro-posts-img-modal-{{ $post->id }}')"
    class="bg-blue-100 border-2 border-blue-500 text-sm rounded-md p-1 text-blue-500 hover:bg-blue-500 hover:border-none hover:text-white transition ease-in-out"
>
    Mostrar
</button>

Este es el script, se despeja un "CustomEvent" y buscar la propiedad "hash":

<script>
    window.$modals = {
        show(hash) {
            window.dispatchEvent(
                new CustomEvent('modal', { 
                    detail: hash
                })
            );
        }
    }
</script>

Como hash es la propiedad que la función intenta buscar en las etiquetas del componente y así poder abrir las imágenes correspondientes con un post:

<x-faro-posts-img-modal hash="faro-posts-img-modal-{{$post->id}}">
@foreach loop
@endforeach
</x-faro-posts-img-modal>

Existe un problema al cerrar el modal ya que para cerrar también se necesita un atributo como "#".

En la etiqueta: <a href="#"> tengo este símbolo: &times; que es mi botón para poder cerrar el modal pero pasa que la URL ahora se ve así: http://tweety.test/faro#, esto ocasiona que cuando quiero abrir un nuevo modal y utilizar nuevamente el slider, no me permita poder ver las imágenes a menos que refresque la página.

Esta parte es el componente Blade:

        <div class="fixed inset-0 flex items-center justify-center w-72 h-64 m-auto md:h-auto md:w-auto md:max-w-3xl md:my-5 md:mx-5 md:mx-auto bg-white rounded-md shadow-md overflow-x-auto md:overflow-hidden">
            <a href="#" 
                class="absolute right-10 top-10 md:right-16 md:top-10 h-8 w-8 text-xl text-center flex items-center justify-center cursor-pointer hover:bg-gray-200 transition ease-in-out">
                &times;
            </a>
            
            {{$slot}}
            
        </div>

Es en la variable de {{$slot}} en donde se está incluyendo el foreach loop y en donde se aplica las clases del slider.

Origen Enlace
Eduardo
  • 384
  • 2
  • 13

Como hacer un image slider dinámico para muchos posts, Laravel

Tengo un slider que me funciona para ver muchas imágenes esto actualmente sólo me funciona para 1 post, resulta que no sé cuantos más tenga y naturalmente necesito que funcione en todos los posts posibles.

Este es mi image slider en Javascript: gallery.js:

var slides = document.querySelector('.slider-items').children;
var nextSlide = document.querySelector('.right-slide');
var prevSlide = document.querySelector('.left-slide');
var totalSlides = slides.length;
var index = 0;

nextSlide.onclick = function () {
     next("next");
}

prevSlide.onclick = function () {
     next("prev");
}

function next(direction) {

   if (direction == "next") {
        index++;
        if (index == totalSlides) {
            index = 0;
        }
   }

   else {
        if (index == 0) {
            index = totalSlides-1;
        }
        else {
            index--;
        }
    }

    for (i = 0; i < slides.length;i++) {
        slides[i].classList.remove("active");
    }

  slides[index].classList.add("active");     
}

Y esta es mi vista:

<div class="slider-items">
    @foreach($post->images as $image)
    <div class="inset-0 flex items-center justify-between md:w-96 h-full mx-auto
        slider-items {{ $loop->first ? 'active' : '' }}">
        <img 
            src="{{ $image->name }}" 
            alt="gallery" 
            class="h-full"
        >
    </div>
    @endforeach
</div>

Mediante la variable $loop de Blade es como le digo que la primer iteración del loop tendrá como verdadero la clase de .active, las demás estarán ocultas.

La clase ´´´.slider-items´´´ está en todas las iteraciones por default pero la clase .active estará navegando por todos los divs y entonces según mi CSS la imagen sólamente se verá cuando ambas (.active y .slider-items)esten juntas. Sólamente funciona para 1 post como dije y no sé que hacer para que a otros posts le puedan funcionar también el slider, que debería de cambiar en el Javascript? ¿Cuál es otra manera de escribir un image slider? Gracias