Lightgallery: AngularJS demo not existing

[vandres]

[kotchuprik]

+1

I think that angular removed after refactor :)

[sachinchoolur]

Hi guys,
For current use please refer the stack overflow post

I will add a demo when i get time..

[kotchuprik]

SO demo isn't good. Need to add watcher and I think that good way is binding on UL not LI.

[armanforghani]

+1

[kim0z]

Any example for using lightGallery with AngularJS?

[ayaolwan]

Example for lightGallery AngularJS?

[kim0z]

@ayaolwan

You should have 2 arrays
photo.fullres - it holds the photos that will be presented when you click on the thumbnail in the Gallery
photo.thumbnail - it holds the thumbnail that you will see in the gallery which is smaller (else it will take a lot of time)

for fast debugging just put the photo in both arrays

You should resize the photo for faster rendering, I used a AWS lambda :
https://aws.amazon.com/blogs/compute/resize-images-on-the-fly-with-amazon-s3-aws-lambda-and-amazon-api-gateway/

Below I'm loading photos from S3, not all code presented:

 $scope.photos.push({
         fullres: strict_escape_url,
         thumbnail: S3URL_RESIZE + '100x100/' + data.Contents[i].Key
 });

Below is the html:

<div ng-show="photosSlider">
        <style>
            .demo {
                list-style: none outside none;
                padding-left: 0;
            }

            .demo li {
                display: block;
                float: left;
                height: 65px;
                margin-bottom: 6px;
                margin-right: 6px;
                width: 100px;
            }

            .demo img {
                max-width: 100%;
                height: auto;
            }

        </style>
        <div class="navbar navbar-default navbar-fixed-bottom"
             style="bottom: 50px; overflow: scroll; background-color: inherit;right: 10%;left:5%; width: 70%; height: 220px">
            <ul class="demo">
                <li style="cursor: pointer;" lightgallery ng-repeat="photo in photos"
                    data-src="{{photo.fullres}}">
                    <img ng-src="{{photo.thumbnail}}" ng-mouseover=""/>
                    <!-- ng-mouseover="photoMouseOver($event)" -->
                </li>
            </ul>
        </div>
    </div>

[ayaolwan]

@sachinchoolur

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. If the issue is still valid for version 2.x, please re-open. Apologize for not responding on time. Thank you for your contributions.