Prevent images for being displayed
allaghi opened this issue · comments
Hello everyone,
I am facing issue that how I prevent images displayed when I click on button as shown in this picture
Hey @allaghi,
You can use the selector option to target only images
Docs
- https://www.lightgalleryjs.com/demos/html-markup/
- https://www.lightgalleryjs.com/docs/settings/#selector
If you face any issues, please share your HMTL markup and I'll suggest the selector option that works for you
Thank you @sachinchoolur I will try it , and if I face any issue I will let you know
@sachinchoolur I am using lightGallery with vue
`
<a v-for="(photo, index) in photos" :key="photo.id"
class="group relative z-0 hover:cursor-pointer"
:href="`https://almanara-shipping.com/public/uploads/${photo.car_id}/${photo.photo_name}`"
>
<div class="w-full min-h-80 bg-gray-200 aspect-w-1 aspect-h-1 rounded-md overflow-hidden group-hover:opacity-75 lg:h-80 lg:aspect-none">
<img
class="relative z-10 w-full h-full object-center object-cover lg:w-full lg:h-full"
:src="`https://almanara-shipping.com/public/uploads/${photo.car_id}/${photo.photo_name}`"
:alt="car.make + ' ' + car.model "
/>
</div>
<!-- photo dropdown -->
<div class="absolute z-50 top-5 right-5">
<button type="button" class="block bg-white opacity-60 w-full rounded-full p-2" @click="open = open === index ? null : index">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 fill-slate-100" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</button>
</div>
<div v-if="open === index" class="fixed inset-0 z-40" @click="open = false" />
<!-- photo menu -->
<transition
enter-active-class="transition ease-out duration-200"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
>
<div v-if="open === index" class="absolute z-50 bg-white p-3 w-4/5 top-16 right-5 rounded-md space-y-2 shadow-sm">
<Link class="flex w-full items-center hover:cursor-pointer hover:bg-gray-100 pl-1 pr-2 py-1 rounded-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-1 fill-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>Make main photo
</Link>
<Link :href="route('vehicle.photo.delete', photo.id)" method="post" as="button" class="flex w-full items-center hover:cursor-pointer hover:bg-gray-100 pl-1 pr-2 py-1 rounded-sm">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-1 fill-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>Delete photo
</Link>
</div>
</transition>
<!-- photo dropdown -->
</a>
</lightgallery>`
Hi @sachinchoolur , by the way I am using vue
Thank you so much @sachinchoolur I did what you told me and it worked .