Open exhuma opened 5 years ago
You can create a new array of thumbnails and assign that to the div or whatever element.
data() {
return {
images: [
'https://images.unsplash.com/photo-1558433916-90a36b44753f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
'https://images.unsplash.com/photo-1558388552-42934495cefa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
'https://images.unsplash.com/photo-1558429731-b85ee8dea73a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
'https://images.unsplash.com/photo-1558430326-bee2159db4fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
],
thumbnails: [
'https://images.unsplash.com/photo-1558388552-42934495cefa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
'https://images.unsplash.com/photo-1558388552-42934495cefa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
'https://images.unsplash.com/photo-1558429731-b85ee8dea73a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
'https://images.unsplash.com/photo-1558430326-bee2159db4fa?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60',
],
}
}
<gallery :images="images" :index="index" @close="index = null"></gallery>
<v-flex
class="image"
v-for="(image, imageIndex) in thumbnails"
:key="imageIndex"
@click="index = imageIndex"
:style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
d-flex
lg2 md2 sm4 xs4
></v-flex>
This solution is simple and elegant, and should be included as an example in the documentation -- it's a fairly common use case. Thank you @szabizs!
Currently the component only allows to set the HREF to the full image. For larger galleries this makes everything really slow especially on slow networks.
It would be really nice to expose the "thumbnail" property so th initial load of the gallery can be sped up.