I was looking at the official page of lightGallery but I couldn't find or solve the problem with seeing the photos in thumbnails like this:
When I import all the libraries, it is only displayed in this way:
So what else should I add?
lightGallery libraries:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lightgallery.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/js/lightgallery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lg-thumbnail/1.1.0/lg-thumbnail.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lg-fullscreen/1.1.0/lg-fullscreen.min.js"></script>
I code where I call from the controller and display each image
@extends('plantilla')
@section('content')
<div id="aniimated-thumbnials">
@foreach ($evidencias as $evidencia)
@if($evidencia->url)
<a href="{{ url($evidencia->url) }}">
<img src="{{ url($evidencia->url) }}">
</a>
@endif
@endforeach
</div>
@endsection
You must initialize the lightgallery library pointing to the div where all the photos are placed:
On the library page you have a documentation section, where all the options you can add appear, it even has a custom attributes section where you can put it directly in the html. For the issue of image size, it would be the most suitable for css, so that it appears with that thumbnail, if you look at the code in the developer mode of the browser. That way, they will appear in the size you want and if you click, they should appear with the actual size of the photo. You can mount a generic class like this or create a class, as you prefer.