https://claude.ai/chat/fd78e4dc-712d-4dbe-b377-846868f785a5
Certainly! I’ll create a demo Vue 3 app for showing photos using the GLightbox library. I’ll provide you with the necessary files and explain how to set up and use the app.
“`vue
<!– App.vue –>
<template>
<div id=”app”>
<h1>Vue 3 Photo Gallery</h1>
<div class=”gallery”>
<a href=”https://picsum.photos/1200/800″ class=”glightbox” data-gallery=”gallery1″>
<img src=”https://picsum.photos/300/200″ alt=”Image 1″>
</a>
<a href=”https://picsum.photos/1200/800″ class=”glightbox” data-gallery=”gallery1″>
<img src=”https://picsum.photos/300/200″ alt=”Image 2″>
</a>
<a href=”https://picsum.photos/1200/800″ class=”glightbox” data-gallery=”gallery1″>
<img src=”https://picsum.photos/300/200″ alt=”Image 3″>
</a>
</div>
</div>
</template>
<script>
import { onMounted } from ‘vue’;
import GLightbox from ‘glightbox’;
import ‘glightbox/dist/css/glightbox.min.css’;
export default {
name: ‘App’,
setup() {
onMounted(() => {
GLightbox({
selector: ‘.glightbox’
});
});
}
}
</script>
<style>
#app {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 60px;
}
.gallery {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
margin-top: 20px;
}
.gallery img {
width: 300px;
height: 200px;
object-fit: cover;
cursor: pointer;
}
</style>
“`
Now, let me explain how to set up and use this Vue 3 app with GLightbox:
1. First, create a new Vue 3 project using Vue CLI or Vite.
2. Install the GLightbox library:
“`
npm install glightbox
“`
3. Replace the contents of your `src/App.vue` file with the code provided in the artifact above.
4. Make sure to import the GLightbox CSS in your `main.js` file:
“`javascript
import ‘glightbox/dist/css/glightbox.min.css’
“`
5. Run your Vue 3 app:
“`
npm run serve
“`
This demo app creates a simple photo gallery with three images. When you click on an image, it opens in a lightbox using GLightbox. The images are placeholder images from picsum.photos, but you can replace them with your own images.
Key points about the code:
1. We import GLightbox and its CSS in the `<script>` section.
2. We use the `onMounted` hook to initialize GLightbox when the component is mounted.
3. The gallery is created using anchor tags with the `glightbox` class and `data-gallery` attribute.
4. The `href` attribute of each anchor tag contains the URL of the full-size image, while the `<img>` tag inside shows a thumbnail.
You can easily expand this gallery by adding more images or customizing the GLightbox options. Would you like me to explain any part of the code in more detail or help you customize it further?