blueimp / Gallery

blueimp Gallery is a touch-enabled, responsive and customizable image & video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading.
https://blueimp.github.io/Gallery/
Other
3.75k stars 984 forks source link

using WebPack #265

Closed adampatterson closed 1 year ago

adampatterson commented 2 years ago

I loaded the script through NPM and am importing blueimp like so import blueimp, from 'blueimp-gallery'

My config looks like this.

    document.getElementById('gallery').onclick = function (event) {
        event = event || window.event
        var target = event.target || event.srcElement,
            link = target.src ? target.parentNode : target,
            options = {
                index: link,
                event: event
            },
            links = this.getElementsByTagName('a')
        blueimp(links, options)
    }

I am not sure how to get the indicators to work. The examples show loading a separate file for the indicators.

I see indicatorOptions but don't see how they apply to the options.

If it's possible can I get an example? Otherwise, I will probably use a CDN for the files as I don't want to upload the NPM folder.

Thanks for the help!

adampatterson commented 2 years ago

I ended up loading the files individually.

sebastian-marinescu commented 1 year ago

Hi @adampatterson,

I also import it individually:

import Gallery from 'blueimp-gallery';
import 'blueimp-gallery/js/blueimp-gallery-indicator';

And inside your options-object, you can specify more options:

            indicatorContainer: 'ol',
            thumbnailProperty: 'thumbnail',
            thumbnailIndicators: true,

I think this issue can be closed 👍