Let's take a look at how we can change our image gallery, so whenever we click one of the images, which is smaller, we get a larger version to appear above it. Now, when using Livewire, it's good to make a consideration whether you want to make a request to the backend, or whether you want to use plain JavaScript in order to solve a problem. In this example, making a request to the backend to swap out an image might not be most ideal. We also installed Alpine, so it might be easier to use Alpine to make these images clickable and have it show up here, rather than using Livewire. Let's start with that. Let's make sure that we can click these images and get a larger image in the preview right.

Let's start with that. Let's make sure that we can click these images and get a larger image in the preview right here. Let's switch back to our editor. Let's open up our product page, and now we can use Alpine to make the image swap dynamically. Now, it's very easy to get started with Alpine. In order to make things reactive, all we have to do is add x-data, and this will accept a JSON object. So let's define a reference on our JSON object, which will contain the URL of our main, otherwise large image.

So let's define a reference on our JSON object, which will contain the URL of our main, otherwise large image. Let's make sure that by default, we'll set it to the path of our main product image. So we can simply copy and paste this. Now instead of using Blade, we can use a binding method that's available in Alpine to bind the current image. We'll say x-bind:src, in this case, image. This is going to reference the data object and the image key. But if you switch back to your browser, we should still see our main image. And there you go, that's still working.

But if you switch back to your browser, we should still see our main image. And there you go, that's still working. So now whenever we click one of these smaller images, we want the following image to be swapped out. So next, we want to add a click handler to each of our images shown on the bottom side where we have the little thumbnails. So again, we can use Alpine. We can use the addEventListener, which will trigger whenever someone clicks one of these images. And we'll basically tell Alpine to update the image property on the data object.

images. And we'll basically tell Alpine to update the image property on the data object. And we want to change it to the path of the image that the user is clicking. This should do the trick. Whenever we click one of these images below, it should swap out with the image above. As you can see, Alpine is very easy to use, and we make this dynamic with just a few changes. So whenever you're adding functionality, always consider, should I use Alpine or should I use Livewire? Because whenever you use Livewire, you're going to make a request to the server. That's fine.

Because whenever you use Livewire, you're going to make a request to the server. That's fine. You can always optimize it by reducing and minimizing the amount of requests you have to make to the server.