CODEWITHSUNDEEP
htmlangularjstwitter-bootstrapslidercarousel
user3106167
user3106167

Reputation: 103

an issue in preview an image gallery carousel in angularJS

I have create an image gallery with angular carousel. When i click on the particular image from the thumbnail gallery(for example if i select 4th image) the preview or popup view show the first image from the image gallery. but it has to display the particular selected image(e.g 4th image) from the gallery, the popup view have to show the selected image. Thanks in advance.

    @{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <title>Image Carousel</title>

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/angular-carousel.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/example-fixed-layout.css" rel="stylesheet" />
    <link href="~/Content/styles.css" rel="stylesheet" />
    <link href="~/Content/ladda-themeless.min.css" rel="stylesheet" />
</head>


<body ng-app="app" data-flow-prevent-drop data-flow-drag-enter="dropClass='drag-over'" data-flow-drag-leave="dropClass=''">

    <!-- Modal -->
    <h3>Image Upload</h3>
    <div ng-controller="CarouselDemoCtrl">

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">Image Preview</h4>
                    </div>
                    <div class="modal-body">
                        <carousel interval="myInterval">
                            <slide ng-repeat="file in images">
                                <div data-flow-init>

                                    <!-- Button trigger modal -->
                                    <img data-flow-img="file" class="carousel-inner" data-toggle="modal" style="width:500px;height:400px;">
                                </div>
                                <div>
                                    <p><b>Picture {{$index+1}} of {{images.length}}</b></p>
                                </div>
                            </slide>
                        </carousel>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-info" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="wrapper">
            <div data-flow-init data-flow-files-submitted="$flow.upload()" data-flow-file-added="!!{png:1,gif:1,jpg:1,jpeg:1}[$file.getExtension()]">
                <div class="drop" data-flow-drop ng-class="dropClass">
                    <span class="btn btn-primary ladda-button" data-style="expand-left" data-flow-btn><span class="ladda-label">Upload Image</span></span>
                </div>

                <br />
                <div style="border: solid gray 1px; width: 220px; height: 195px; cursor: pointer;">
                    <carousel interval="myInterval">
                        <slide active="slide.active" ng-repeat="file in $flow.files">
                            <div>
                                <img data-flow-img="file" class="carousel-inner" data-toggle="modal" data-max-size="10kb" data-ng-click="openLargeImage($flow.files,$index)" style=" width:220px;height:165px;">
                            </div>
                            <div style="width:220px; height:25px;">
                                <span style="position:absolute; width:220px; height:25px;right:50px;"> <b>Picture: {{$index+1}} of {{$flow.files.length}}</b></span>
                                <span style="position:absolute;width:220px; height:25px;left:80px"> <a class="btn btn-xs btn-danger" ng-click="file.cancel()"> Remove </a></span>
                            </div>
                        </slide>
                    </carousel>
                </div>

            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.13/angular.min.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/angular-carousel.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular-touch.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script src="~/Scripts/flow.js"></script>
    <script src="~/Scripts/fusty-flow.js"></script>
    <script src="~/Scripts/fusty-flow-factory.js"></script>
    <script src="~/Scripts/ng-flow.js"></script>
    <script src="~/Scripts/showImageLoader.js"></script>
    <script src="~/Scripts/ladda.min.js"></script>
    <script src="~/Scripts/spin.min.js"></script>
    <script type="text/javascript">
        var app = angular.module('app', ['ui.bootstrap', 'flow']);
        app.config(['flowFactoryProvider', function (flowFactoryProvider) {
            flowFactoryProvider.defaults = {
                target: '',
                permanentErrors: [500, 501],
                maxChunkRetries: 1,
                chunkRetryInterval: 5000,
                simultaneousUploads: 1
            };
            flowFactoryProvider.on('fileAdded', function (file, event) {
                console.log(file, event);
            });

            flowFactoryProvider.on('catchAll', function (event) {
                console.log('catchAll', arguments);
            });

            // Can be used with different implementations of Flow.js
            flowFactoryProvider.factory = fustyFlowFactory;
        }]);

        app.controller('CarouselDemoCtrl', function ($scope) {


            $scope.$on('test', function (event, result) {
                alert(result);
                event.preventDefault();//prevent file from uploading
            });

            $scope.up = function () {

            };

            $scope.openLargeImage = function (files, index) {
                $scope.images = files;
                $scope.index = index;
                $('#myModal').modal($scope)
            };

        });
    </script>
</body>
</html>

Upvotes: 2

Views: 1907

Answers (1)

t0mpl
t0mpl

Reputation: 5025

If your modal is just use to display img, do it like this

data-ng-click="openLargeImage(file)"

in your JS 

$scope.openLargeImage = function (file) {
          $scope.img = file.image;
          $('#myModal').modal();
        };

in your modal 

<img ng-src="{{img}}" />

it's not tested but that's the easiest way to do it

Upvotes: 1

Related Questions