vvvmax / unitegallery

Unite Gallery - Responsive jQuery Image and Video Gallery Plugin. Aim to be the best gallery on the web on it's kind. See demo here:
http://unitegallery.net
MIT License
530 stars 158 forks source link

Image Thumbs Not Loading in Carousel #127

Open ghost opened 7 years ago

ghost commented 7 years ago

I'm trying to integrate the gallery in an Angular 2 application, and I've got most everything working except the gallery thumbs. They are showing the loading the icon and never actually loading the images.

Here's my markup:

<div id="video-gallery" class="container text-center" *ngIf="videos && videos.length > 0">

    <img *ngFor="let video of videos | orderBy: 'sortOrder'" alt="{{ video.imageAltText }}"
        src="{{ video.videoStill }}"
        [attr.data-image]="video.videoStill"
    [attr.data-type]="'youtube'"
    [attr.data-videoid]="video.videoId"
    [attr.data-description]="video.title">
</div>

In my class constructor I have the gallery init function in a timeout to make sure the DOM exists before the gallery is initialized:

setTimeout(() =>
{
    $('#video-gallery')['unitegallery']();
}, 1000);

The images exist. That is confirmed by the fact (and this is also an issue) that the video stills show on the screen before the carousel is actually loaded.

Here's a screen shot of my video stills which (mistakenly, as far as I'm concerned) appear before the carousel loads, confirming that my image sources point to existing images:

screen shot 2017-01-01 at 4 31 14 pm

Here's a screen shot of the carousel which has loaded and shows that the above images fail to load in the thumbs reel:

screen shot 2017-01-01 at 4 31 14 pm 2

I'd very much appreciate any guidance you could offer here.