laravel - Image is not fully displayed after clicking - Stack Overflow

admin2025-04-17 3

I have a photo gallery in Laravel with Tailwind and Alpine.js. The images are only in a small box as a preview, and I need to fully show up after clicking on any of the photos.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galerie</title>
    <script src=";></script>
    <script defer src="/[email protected]/dist/cdn.min.js"></script>
    <style>
        body {
            background-color: #000;
            color: #fff;
        }

        a {
            color: #ff0000;
        }

        a:hover {
            color: #ff5555;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <!-- Navbar -->
    <nav class="bg-gray-900 p-4 text-white">
        <div class="max-w-7xl mx-auto flex justify-between items-center">
            <h1 class="text-2xl font-bold">Galerie</h1>
            <div class="flex items-center space-x-4">
                @auth
                    <a href="{{ route('dashboard') }}" class="text-white">Panel</a>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="text-white">Odhlásit se</button>
                    </form>
                @else
                    <a href="{{ route('login') }}" class="text-white">Přihlásit se</a>
                    <a href="{{ route('register') }}" class="text-white">Zaregistrovat se</a>
                @endauth
            </div>
        </div>
    </nav>

    <!-- Gallery Section with Lightbox -->
    <div x-data="{ open: false, image: '' }" class="max-w-7xl mx-auto py-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            @foreach (['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.png', 'image6.png', 'image7.jpg',
            'image8.jpg', 'image9.jpg', 'image10.jpg', 'image11.jpg', 'image12.jpg', 'image13.jpg', 'image14.jpg',
            'image15.jpg', 'image16.jpg', 'image17.jpg', 'image18.jpg', 'image19.jpg', 'image20.jpg', 'image21.jpg',
            'image22.png', 'image23.png', 'image24.jpg', 'image25.png', 'image26.png', 'image27.png', 'image28.png',
            'image29.png', 'image30.jpg', 'image31.jpg', 'image32.png', 'image33.png',] as $image)
                <div class="bg-gray-900 rounded-lg overflow-hidden shadow-md cursor-pointer"
                     @click="open = true; image = '{{ asset('images/'.$image) }}'">
                    <img src="{{ asset('images/'.$image) }}" alt="Obrazek_cislo" class="w-full h-48 object-cover">
                </div>
            @endforeach
        </div>
    </div>

    <!-- Lightbox Modal -->
    <div x-show="open" x-cloak class="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50"
         @click.away="open = false">
        <div class="relative max-w-4xl w-full">
            <button class="absolute top-4 right-4 text-white text-3xl" @click="open = false">&times;</button>
            <img :src="image" class="w-full max-h-screen object-contain">
        </div>
    </div>

    <style>
        [x-cloak] { display: none !important; }
    </style>

</body>
</html>

This is the welcome.blade.php.

import './bootstrap';
import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.data('solar', () => ({ ... }));

Alpine.start();

And this is the app.js.

In devtools in console, the log shows no sign of not working Alpine.js.

Thank you for any response.

I have a photo gallery in Laravel with Tailwind and Alpine.js. The images are only in a small box as a preview, and I need to fully show up after clicking on any of the photos.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galerie</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
    <style>
        body {
            background-color: #000;
            color: #fff;
        }

        a {
            color: #ff0000;
        }

        a:hover {
            color: #ff5555;
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <!-- Navbar -->
    <nav class="bg-gray-900 p-4 text-white">
        <div class="max-w-7xl mx-auto flex justify-between items-center">
            <h1 class="text-2xl font-bold">Galerie</h1>
            <div class="flex items-center space-x-4">
                @auth
                    <a href="{{ route('dashboard') }}" class="text-white">Panel</a>
                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="text-white">Odhlásit se</button>
                    </form>
                @else
                    <a href="{{ route('login') }}" class="text-white">Přihlásit se</a>
                    <a href="{{ route('register') }}" class="text-white">Zaregistrovat se</a>
                @endauth
            </div>
        </div>
    </nav>

    <!-- Gallery Section with Lightbox -->
    <div x-data="{ open: false, image: '' }" class="max-w-7xl mx-auto py-8">
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            @foreach (['image1.jpg', 'image2.jpg', 'image3.jpg', 'image4.jpg', 'image5.png', 'image6.png', 'image7.jpg',
            'image8.jpg', 'image9.jpg', 'image10.jpg', 'image11.jpg', 'image12.jpg', 'image13.jpg', 'image14.jpg',
            'image15.jpg', 'image16.jpg', 'image17.jpg', 'image18.jpg', 'image19.jpg', 'image20.jpg', 'image21.jpg',
            'image22.png', 'image23.png', 'image24.jpg', 'image25.png', 'image26.png', 'image27.png', 'image28.png',
            'image29.png', 'image30.jpg', 'image31.jpg', 'image32.png', 'image33.png',] as $image)
                <div class="bg-gray-900 rounded-lg overflow-hidden shadow-md cursor-pointer"
                     @click="open = true; image = '{{ asset('images/'.$image) }}'">
                    <img src="{{ asset('images/'.$image) }}" alt="Obrazek_cislo" class="w-full h-48 object-cover">
                </div>
            @endforeach
        </div>
    </div>

    <!-- Lightbox Modal -->
    <div x-show="open" x-cloak class="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50"
         @click.away="open = false">
        <div class="relative max-w-4xl w-full">
            <button class="absolute top-4 right-4 text-white text-3xl" @click="open = false">&times;</button>
            <img :src="image" class="w-full max-h-screen object-contain">
        </div>
    </div>

    <style>
        [x-cloak] { display: none !important; }
    </style>

</body>
</html>

This is the welcome.blade.php.

import './bootstrap';
import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.data('solar', () => ({ ... }));

Alpine.start();

And this is the app.js.

In devtools in console, the log shows no sign of not working Alpine.js.

Thank you for any response.

Share Improve this question edited Jan 31 at 6:57 DarkBee 15.5k8 gold badges72 silver badges118 bronze badges asked Jan 30 at 22:49 D4N13L. 33 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 2

Everything in Alpine starts with the x-data directive.

x-data defines a chunk of HTML as an Alpine component and provides the reactive data for that component to reference.

Here's an example of a contrived dropdown component:
<div x-data="{ open: false }">
    <button @click="open = ! open">Toggle Content</button>
 
    <div x-show="open">
        Content...
    </div>
</div>
Don't worry about the other directives in this example (@click and x-show), we'll get to those in a bit. For now, let's focus on x-data.

x-data directive - Alpine.js Docs

The variables declared under x-data can only be used within the specific component. Since your Lightbox Modal is not inside the x-data div, those variables are not valid there and the changes are not detected. After placing them in a shared div, it works correctly:

Wrong example

<!-- Gallery Section with Lightbox -->
<div x-data="{ open: false, image: '' }" class="max-w-7xl mx-auto py-8">
  ...
</div>

<!-- Lightbox Modal -->
<div x-show="open" x-cloak class="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50">
  ...
</div>

Successfully example

<div x-data="{ open: false, image: '' }">
  <!-- Gallery Section with Lightbox -->
  <div class="max-w-7xl mx-auto py-8">
    ...
  </div>

  <!-- Lightbox Modal -->
  <div x-show="open" x-cloak class="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50">
    ...
  </div>
</div>

Reproduction (without Laravel)

I left out Laravel from the reproduction so that it can be run directly from the browser. To reproduce the issue, Laravel is not necessary, only Alpine is required.

So instead of your @foreach, I used an Alpine template, which you can remove later. This way, your x-data issue can be reproduced online without Laravel for others.

body {
  background-color: #000;
  color: #fff;
}

a {
  color: #ff0000;
}

a:hover {
  color: #ff5555;
}

[x-cloak] {
  display: none !important;
}

<script src="https://cdn.tailwindcss.com"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

<body>
  <div x-data="{ open: false, image: '' }" class="min-h-screen flex flex-col"> 
    <!-- Gallery Section with Lightbox -->
    <div class="max-w-7xl mx-auto py-8">
      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
        <template x-for="(img, index) in Array.from({ length: 33 }, (_, i) => i + 1)" :key="index">
          <div
            class="bg-gray-900 rounded-lg overflow-hidden shadow-md cursor-pointer"
            @click="open = true; image = `https://picsum.photos/400/400?${index}`"
           >
            <img :src="`https://picsum.photos/400/400?${index}`" alt="Obrazek_cislo" class="w-full h-48 object-cover">
          </div>
        </template>
      </div>
    </div>

    <!-- Lightbox Modal -->
    <div
      x-show="open"
      x-cloak
      class="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50"
      @click.away="open = false"
    >
      <div class="relative max-w-4xl w-full">
        <button class="absolute top-4 right-4 text-white text-3xl" @click="open = false">&times;</button>
        <img :src="image" class="w-full max-h-screen object-contain">
      </div>
    </div>
  </div>
</body>

转载请注明原文地址:http://anycun.com/QandA/1744887001a89027.html

laravel - Image is not fully displayed after clicking - Stack Overflow

1 Answer 1

Reproduction (without Laravel)

laravelImage is not fully displayed after clickingStack Overflow