JS : Wrong redirection with a slider

Question

I do my work-placement in a company who use somes trainee to do a website. They use this website only in the company.

I recovered the work of trainee who worked before me, and, in the index of the website, they created a slider with pictures, with a lightbox when you click on the picture

I have to do the same with a slider of miniature, like they do, but when you click on the miniature, it opens a lightbox with a video.

My problem is : I create the slider with the miniature, but, when you click on the miniature, the lightbox opens with a video, but whatever the which miniature I click, it's open the same video

this is the code :

app.controller("videoCtrl", function($rootScope, $scope, $window) {

  // INFORMATION GENERAL VIDEO
  // legende = "resume" ou titre de la video
  // src = adresse de la video
  // miniature =  background video
  $scope.video = [{
      "legende": "CECI EST LA VIDEO 1",
      "src": "images/index/video/video1.mp4",
      "miniature": "images/index/video/videoMiniature.png"
    },
    {
      "legende": "CECI EST LA VIDEO 2",
      "src": "images/index/video/video2.mp4",
      "miniature": "images/index/video/miniature2.png"
    },
    {
      "legende": "CECI EST LA VIDEO 3",
      "src": "images/index/video/video3.mp4",
      "miniature": "images/index/video/miniature3.jpg"
    }

  ];

  // reinitialise le scroll au changement de vue
  $rootScope.$on('$routeChangeSuccess', function() {
    var interval = setInterval(function() {
      if (document.readyState == 'complete') {
        $window.scrollTo(0, 0);
        clearInterval(interval);
      }
    }, 10000);
  });

  // Scope slider + img slider + config slider
  $scope.slickConfig = {
    prevArrow: '<img src="images/index/slider/prev.png"class="slick-prev"/>',
    nextArrow: '<img src="images/index/slider/next.png"class="slick-next"/>',
    autoplay: true,
    draggable: true,
    autoplaySpeed: 10000 //1000 egal 1 second
  }


});

<div class="col-lg-5 col-md-5 col-sm-6 col-xs-12 contVideo">
  <div>
    <div class="video" ng-controller="videoCtrl">
      <slick class="carousel" infinite="true" settings="slickConfig">
        <div ng-repeat="data in video" class="contentVideo" ng-style="{'background-image':'url({{data.miniature}})'}">
          <a data-toggle="modal" data-target="#myModal">
            <img ng-src="images/index/video/BoutonPlay.png" alt="Play" />
          </a>
          <div class="descriptionVideo">
            <p>{{data.legende}}</p>
          </div>
        </div>
      </slick>
      <div class="modal fade" id="myModal" ng-repeat="data in video">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button ng-attr-type="button" class="close" data-dismiss="modal">x</button>
            </div>
            <div class="modal-body">
              <video id="video1" ng-src="{{data.src}}" controls="controls" width="550px" height="300px" poster="{{data.miniature}}" preload="metadata"></video>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

I removed the bla about your language - it is fine. I also tagged it angular, since I believe that is the issue you have. Lastly I removed the snippet header since you do not have a running snippet — mplungjan, Jan 11 '18 at 08:57
This might be a long shot, but you need to pass the object that you clicked on (_data_ in carousel) into your data-target (_#myModal_), problem is that no matter what you are clicking - it runs _ng-repeat_ and plays the first video. _#myModal_ needs one single object to receive. — Alex Ananjev, Jan 12 '18 at 15:16
Thank you @AlexAnanjev ... So i can't fix that ? i can't do a carrousel of miniature who open a modal with the video of this miniature ? — WeelCodeur, Jan 12 '18 at 15:36

score 0 · Answer 1 · answered Jan 15 '18 at 08:54

I will post this as an answer, as it is too long for comments.

You can fix that.

I barely have any AngularJS experience, but I'll explain the logic of code you need to implement.

You have 3 video objects in $scope.video , when you click

<a data-toggle="modal" data-target="#myModal">

you need to call a

$('#nameOfElement').click(function(e){})

where e is an Event, event will contain the ID of clicked video, you need to take this ID and pass it to #myModal and select the relevant video (instead of looping through all of the video you need to load only one).

This question might help

Passing data to a bootstrap modal

This is as accurate as I can explain with my knowledge of AngularJS.

JS : Wrong redirection with a slider

1 Answers1

Linked