Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!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 paramter is added to retrive 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);
                  }
                  
                  // calclaute 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>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers