कोणीय + jQuery, छवि परिवर्तन के स्रोत को बदलते समय

मैं एक विशेष थंबनेल (एक मोडल के अंदर) स्क्रॉल करने के लिए jQuery का उपयोग करने का प्रयास कर रहा हूं, जब दाएं/बाएं तीर दबाए जाते हैं (जब उपयोगकर्ता छवि पर क्लिक करता है तो मोडल पॉप अप होना चाहिए)। उपयोगकर्ता थंबनेल पर क्लिक करते समय स्क्रॉल काम करने में सक्षम था, लेकिन जब मैं वर्तमान 2 परिवर्तनों को बदलता हूं तो मैं एक क्लिक ट्रिगर नहीं कर सका। किसी भी सहायता की सराहना की जाएगी।कोणीय + jQuery, छवि परिवर्तन के स्रोत को बदलते समय

मैं Angular.js में नया हूं इसलिए कोड सुधारने के लिए अन्य सुझाव हैं, तो इसकी सराहना की जाएगी।

jsbin link

<body ng-app="mediaGallery" class="ng-cloak" ng-controller="mediaGalleryCtrl"> 

    <div class="row"> 
     <div class="small-8 columns"> 
      <div class="small-3 columns"> 
       <div ng-repeat="obj in array"> 
        <div ng-if="$index < 4"> 
         <img ng-click="changeMainMedia($index, 'current1')" class="thumbnail" ng-src="{{obj.src}}" /> 
        </div> 
        <div ng-if="$index == 4"> 
         <div class="thumbnail" data-open="media-gallery"> 
          <label class="text-right success label">{{array.length - 3}} +</label> 
         </div> 
        </div> 
       </div> 

      </div> 

      <div class="small-9 columns"> 
       <img data-open="media-gallery" class="main-gallery" ng-src="{{array[current1].src}}" /> 
      </div> 
     </div> 
    </div> 



    <div ng-keydown="key($event)" id="media-gallery" class="small reveal text-center media-gallery" data-reveal> 
     <div class="modal-body"> 
      <div class="main-media"> 
       <img class="main-gallery media-gallery-main" ng-src="{{array[current2].src}}" /> 
       <hr> 

       <div class="nested-media" scroll-thumbnail> 
        <img ng-click="changeMainMedia($index, 'current2')" ng-repeat="obj in array" class="thumbnail media-gallery-thumbnail" ng-src="{{obj.src}}" /> 
       </div> 
      </div> 

      <button class="close-button" data-close aria-label="Close reveal" type="button"> 
      <span aria-hidden="true">x</span> 
     </button> 
     </div> 
    </div> 

    <script> 
     var app = angular.module("mediaGallery", []); 
     app.controller("mediaGalleryCtrl", ['$scope', function(scope) { 
      var array = [{ 
       src: "https://placeimg.com/640/480/any" 
      }, { 
       src: "https://placeimg.com/640/480/tech" 
      }, { 
       src: "https://placeimg.com/640/480/animals" 
      }, { 
       src: "https://placeimg.com/640/480/nature" 
      }, { 
       src: "https://placeimg.com/640/480/arch" 
      }, { 
       src: "https://placeimg.com/640/480/people" 
      }]; 

      scope.array = array; 
      scope.current1 = 0 
      scope.current2 = 0; 

      scope.changeMainMedia = function(index, key) { 
       scope[key] = index; 
      } 

      scope.key = function($event) { 
       var previous = -1; 
       var current = scope.current2; 

       if ($event.keyCode == "39") { 
        previous = current; 
        current = (current + 1) % array.length; 
       } else if ($event.keyCode == "37") { 
        previous = current; 
        current = (current - 1) % array.length; 
       } 
       current = current < 0 ? (array.length + current) : current; 

       scope.current2 = current; 
      } 
     }]); 

     app.directive('scrollThumbnail', function() { 
      return { 
       link: function(scope, elem, attrs) { 
        elem.on("click", function(event) { 
         $(this).animate({ 
          scrollLeft: $(event.target).position().left 
         }, "slow"); 
        }); 
       } 
      }; 
     }); 

     $(document).foundation() 
    </script> 

</body>

स्रोत

2017-01-06 Node.JS

क्या भ्रमित है कि jQuery का उपयोग कर के बारे में शीर्षक और अपने प्रश्न बात के शरीर लेकिन इनाम में कहा गया है कि आप jQuery –

@SergChernata उपयोग करने के लिए नहीं मुझे क्या नहीं करना चाहती है एक विशिष्ट डॉम आईडी –

@ सर्ग चेरनाटा के साथ डोम चयनकर्ता का उपयोग करना चाहते हैं, मुझे कोणीय के साथ अधिक अनुभव नहीं है, लेकिन मैं एक उत्तर की तलाश कर रहा हूं जो डीओएम –

यह एक समाधान है जो jQuery की जरूरत नहीं है है। मैंने आपके कोड में किए गए परिवर्तनों पर टिप्पणी की।

<!DOCTYPE HTML> 

<html> 

<head> 
    <title>index</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <meta name="description" /> 
    <meta name="author"> 

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.css" /> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/js/foundation.js"></script> 

    <style> 
     .media-gallery .media-gallery-thumbnail { 
      max-height: 5em; 
      display: inline-block 
     } 

     .media-gallery .media-gallery-main { 
      height: auto; 
      width: auto; 
      max-height: 20em; 
     } 

     .media-gallery .nested-media { 
      overflow-x: scroll; 
      white-space: nowrap; 
     } 

     .media-gallery .media-gallery-main { 
      max-width: 100%; 
      -moz-transition: all 0.3s; 
      -webkit-transition: all 0.3s; 
      transition: all 0.3s; 
     } 

     .media-gallery .media-gallery-main:hover { 
      -moz-transform: scale(1.5); 
      -webkit-transform: scale(1.5); 
      transform: scale(1.5); 
     } 

     [ng\:cloak], 
     [ng-cloak], 
     [data-ng-cloak], 
     [x-ng-cloak], 
     .ng-cloak, 
     .x-ng-cloak { 
      display: none !important; 
     } 
    </style> 
</head> 

<body ng-app="mediaGallery" class="ng-cloak" ng-controller="mediaGalleryCtrl"> 

    <div class="row"> 
     <div class="small-8 columns"> 
      <div class="small-3 columns"> 
       <div ng-repeat="obj in array"> 
        <div ng-if="$index < 4"> 
         <img ng-click="changeMainMedia($index, 'current1', $event)" class="thumbnail" ng-src="{{obj.src}}" /> 
        </div> 
        <div ng-if="$index == 4"> 
         <div class="thumbnail" data-open="media-gallery"> 
          <label class="text-right success label">{{array.length - 3}} +</label> 
         </div> 
        </div> 
       </div> 

      </div> 

      <div class="small-9 columns"> 
       <img data-open="media-gallery" class="main-gallery" ng-src="{{array[current1].src}}" /> 
      </div> 
     </div> 
    </div> 



    <div ng-keydown="key($event)" id="media-gallery" class="small reveal text-center media-gallery" data-reveal> 
     <div class="modal-body"> 
      <div class="main-media"> 
       <img class="main-gallery media-gallery-main" ng-src="{{array[current2].src}}" /> 
       <hr> 

       <div class="nested-media" scroll-thumbnail> 
        <img ng-click="changeMainMedia($index, 'current2', $event)" ng-repeat="obj in array" class="thumbnail media-gallery-thumbnail" ng-src="{{obj.src}}" /> 
       </div> 
      </div> 

      <button class="close-button" data-close aria-label="Close reveal" type="button"> 
      <span aria-hidden="true">x</span> 
     </button> 
     </div> 
    </div> 

    <script> 
     var app = angular.module("mediaGallery", []); 

     app.controller("mediaGalleryCtrl", ['$scope', function (scope) { 
        var array = [{ 
          src : "https://placeimg.com/640/480/any" 
         }, { 
          src : "https://placeimg.com/640/480/tech" 
         }, { 
          src : "https://placeimg.com/640/480/animals" 
         }, { 
          src : "https://placeimg.com/640/480/nature" 
         }, { 
          src : "https://placeimg.com/640/480/arch" 
         }, { 
          src : "https://placeimg.com/640/480/people" 
         } 
        ]; 

        scope.array = array; 
        scope.current1 = 0 
         scope.current2 = 0; 

        scope.changeMainMedia = function (index, key, $event) { 
         scope[key] = index; 

        // Use scroll function to scroll to element after click 
        // $event parameter is added to retrieve the node value 
        scope.scroll($event.target); 
        } 

        // Animate scrolling 
        // Midified from: http://stackoverflow.com/a/8918062/529024 
        scope.scrollTo = function (element, to, duration) { 

         if (duration <= 0) 
          return; 
         var difference = to - element.scrollLeft; 
         var perTick = difference/duration * 10; 

         setTimeout(function() { 
          element.scrollLeft = element.scrollLeft + perTick; 
          if (element.scrollLeft === to) 
           return; 
          scope.scrollTo(element, to, duration - 10); 
         }, 10); 
        } 

        // calculate scroll position and starting scroll animation 
        scope.scroll = function (element) { 
         // Get center of parent 
         var left = element.offsetLeft; 

         var scroll = left - element.parentElement.scrollLeft; 

         // Start scroll 
         scope.scrollTo(element.parentElement, scroll, 300); 

        } 

        scope.key = function ($event) { 
         var previous = -1; 
         var current = scope.current2; 

         if ($event.keyCode == "39") { 
          previous = current; 
          current = (current + 1) % array.length; 
         } else if ($event.keyCode == "37") { 
          previous = current; 
          current = (current - 1) % array.length; 
         } 
         current = current < 0 ? (array.length + current) : current; 

         scope.current2 = current; 

        // Scroll to element 
         scope.scroll(scope.getElement()); 
        } 

        // get the element that is matching current2 value 
        scope.getElement = function() { 
         var parent = scope.parentElement; 
         var children = parent.children(); 

         return children.eq(scope.current2)[0]; 
        } 

        // This function is used by directive scrollThumbnail to set the parent element 
        // and use it to get element sibilings 
        scope.setElement = function (element) { 
         scope.parentElement = element; 
        } 
       } 
      ]); 

     app.directive('scrollThumbnail', function() { 
      return { 
       scope : true, 
       link : function (scope, elem, attrs) { 
       // set element to scope.parentElement. 
        scope.setElement(elem); 
       } 
      }; 
     }); 

     $(document).foundation() 
    </script> 
</body> 
</html>

और यह एक JSBin लिंक: https://jsbin.com/ruzikilexe/1/edit?html,output

स्रोत

2017-01-10 17:11:13

कोणीय + jQuery, छवि परिवर्तन के स्रोत को बदलते समय

उत्तर

संबंधित मुद्दे