vue-gallery icon indicating copy to clipboard operation
vue-gallery copied to clipboard

Add support for "low-res/thumbnail" source

Open exhuma opened this issue 5 years ago β€’ 2 comments

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.

exhuma avatar May 09 '19 09:05 exhuma

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>

szabizs avatar May 22 '19 08:05 szabizs

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!

rlafuente avatar Sep 14 '19 22:09 rlafuente