SHARE
TWEET

Untitled

a guest Jul 18th, 2019 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. $scope.selectedIndex = null;
  2. $scope.selectedGiphy = null;
  3.  
  4. $scope.fetchSinglegGiphy = function(giphy, index) {
  5.    $scope.selectedIndex = index;
  6.    $scope.selectedGiphy = giphy;
  7. }
  8.      
  9. <div class="row grid" ng-if="giphyList.length > 0">
  10.   <div data-ng-repeat="giphy in giphyList | limitTo : perPage : startAt" class="col-xs-12 col-sm-6 col-lg-4 col-xl-3 d-flex mb-4">
  11.     <div class="giphy d-flex flex-column w-100">
  12.       <div class="thumbnail pb-2 text-center" data-toggle="modal" data-target="#giphyModal" ng-click="fetchSinglegGiphy(giphy, $index)">
  13.         <img ng-src="{{giphy.images.downsized.url}}" class="img-fluid">
  14.       </div>
  15.       <div class="text mt-auto">
  16.         <p class="m-0 meta">{{giphy.import_datetime | dateParse | date : "MMMM dd y" }}</p>
  17.         <p class="rating m-0">
  18.           <i class="fa fa-star" aria-hidden="true"></i> {{giphy.rating | capitalize}}
  19.         </p>
  20.         <ul class="list-unstyled mb-0 text-center">
  21.           <li ng-if="giphy.username != ''" class="text-muted">{{giphy.type | capitalize}} file uploaded by<br> <strong>{{giphy.username | capitalize }}</strong></li>
  22.           <li ng-if="giphy.username == ''" class="text-muted">{{giphy.type | capitalize}} file uploaded by<br> <strong>Unknown</strong></li>
  23.           <li class="h6">{{giphy.title | titlecase }}</li>
  24.         </ul>
  25.       </div>
  26.     </div>
  27.   </div>
  28. </div>
  29.  
  30. <div class="modal fade" id="giphyModal">
  31.   <div class="modal-dialog">
  32.     <div class="modal-content">
  33.       <div class="modal-header">
  34.         <h4 class="modal-title h-3">{{selectedGiphy.title | titlecase }}</h4>
  35.         <button type="button" class="close" data-dismiss="modal">
  36.         <span>&times;</span>
  37.         </button>
  38.       </div>
  39.       <div class="modal-body">
  40.         <div class="row">
  41.           <div class="col-12">
  42.             <div class="image image text-center">
  43.               <img ng-src="{{selectedGiphy.images.original.url}}" alt="{{selectedGiphy.title }}" class="img-fluid">
  44.             </div>
  45.           </div>
  46.         </div>
  47.       </div>
  48.       <div class="modal-footer justify-content-between">
  49.         <div class="text-muted">Image ID: {{selectedGiphy.id}}</div>
  50.         <div class="btn-group btn-group-sm">
  51.           <button type="button" class="btn btn-success" data-dismiss="modal">
  52.              <i class="fa fa-times-circle"></i> Close
  53.           </button>
  54.         </div>
  55.       </div>
  56.     </div>
  57.   </div>
  58. </div>
  59.      
  60. <div class="controls text-center">
  61.     <a href="#" ng-click="fetchSinglegGiphy(giphy, $index = $index - 1)" class="left">
  62.       <i class="fa fa-chevron-left"></i>
  63.     </a>
  64.     <a href="#" ng-click="fetchSinglegGiphy(giphy, $index = $index + 1)" class="right">
  65.       <i class="fa fa-chevron-right"></i>
  66.     </a>
  67. </div>
  68.      
  69. <div class="controls text-center">
  70.     <a href="#" ng-click="fetchSinglegGiphy(giphy, selectedIndex - 1)" class="left"><i class="fa fa-chevron-left"></i></a>
  71.     <a href="#" ng-click="fetchSinglegGiphy(giphy, selectedIndex + 1)" class="right"><i class="fa fa-chevron-right"></i></a>
  72.  </div>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top