RobinCK / vue-gallery

:camera: Responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. 🇺🇦
https://robinck.github.io/vue-gallery/
MIT License
470 stars 85 forks source link

Add support for "low-res/thumbnail" source #76

Open exhuma opened 5 years ago

exhuma commented 5 years ago

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.

szabizs commented 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>
rlafuente commented 5 years ago

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!