<div class="page page-gallery"> <!-- page header --> <div class="pageheader"> <h2>{{page.title}} <span>// {{page.subtitle}}</span></h2> <div class="page-bar"> <ul class="page-breadcrumb"> <li> <a ui-sref="app.dashboard"><i class="fa fa-home"></i> {{main.title}}</a> </li> <li> <a href="javascript:;">Extra Pages</a> </li> <li> <a ui-sref="app.pages.gallery">{{page.title}}</a> </li> </ul> </div> </div> <!-- /page header --> <!-- page content --> <div class="pagecontent" style="min-height: 800px"> <uib-tabset class="tabs-dark tab-nopadding"> <uib-tab heading="4 Columns"> <ul class="mix-filter pull-right"> <li class="filter active" data-filter="all"> All </li> <li class="filter" data-filter=".cats"> Cats </li> <li class="filter" data-filter=".animals"> Animals </li> <li class="filter" data-filter=".cities"> Cities </li> <li class="filter" data-filter=".cats, .animals"> Cats and Animals </li> </ul> <ul class="mix-controls"> <li class="select-all"> <label class="checkbox checkbox-custom checkbox-custom-sm inline-block m-0"> <input type="checkbox" ng-model="selectedAll" ng-click="selectAll()"><i></i> Select all </label> </li> <li ng-class="{'disabled': !isSelected}"> <a href="javascript:;"><i class="fa fa-envelope-o"></i> Email</a> </li> <li ng-class="{'disabled': !isSelected}"> <a href="javascript:;"><i class="fa fa-download"></i> Download</a> </li> <li ng-class="{'disabled': !isSelected}"> <a href="javascript:;"><i class="fa fa-pencil"></i> Edit</a> </li> <li ng-class="{'disabled': !isSelected}"> <a href="javascript:;"><i class="fa fa-trash-o"></i> Delete</a> </li> </ul> <!-- row --> <div class="row mix-grid" ui-jq="mixItUp"> <div class="gallery" ui-jq="magnificPopup" ui-options="{
            delegate: 'a.img-preview',
		        type: 'image',
		        tLoading: 'Loading image #%curr%...',
            mainClass: 'mfp-img-mobile',
            gallery: {
              enabled: true,
              navigateByImgClick: true,
              preload: [0,1]
            }
           }"> <!-- col --> <div class="col-md-3 col-sm-4 mb-20 mix mix_all {{image.category}}" ng-class="{'selected': image.selected}" ng-repeat="image in images"> <div class="img-container"> <img class="img-responsive" ng-src="{{image.src}}" alt=""> <div class="img-details"> <h4 class="custom-font">{{image.title}}</h4> <div class="img-controls"> <a href="javascript:;" class="img-select" ng-click="selectImage($index)"> <i class="fa fa-circle-o" ng-show="!image.selected"></i> <i class="fa fa-circle" ng-show="image.selected"></i> </a> <a href="javascript:;" class="img-link"> <i class="fa fa-link"></i> </a> <a class="img-preview" href="{{image.src}}" title="{{image.title}}"> <i class="fa fa-search"></i> </a> <a href="javascript:;" class="img-more"> <i class="fa fa-ellipsis-v"></i> </a> </div> </div> </div> </div> <!-- /col --> </div> </div> <!-- /row --> </uib-tab> <uib-tab heading="3 Columns"> <ul class="mix-filter pull-right"> <li class="filter active" data-filter="all"> All </li> <li class="filter" data-filter=".cats"> Cats </li> <li class="filter" data-filter=".animals"> Animals </li> <li class="filter" data-filter=".cities"> Cities </li> <li class="filter" data-filter=".cats, .animals"> Cats and Animals </li> </ul> <ul class="mix-controls"> <li class="select-all"> <label class="checkbox checkbox-custom checkbox-custom-sm inline-block m-0"> <input type="checkbox" ng-model="selectedAll" ng-click="selectAll()"><i></i> Select all </label> </li> <li ng-class="{'disabled': !isSelected}"> <a href="javascript:;"><i class="fa fa-envelope-o"></i> Email</a> </li> <li ng-class="{'disabled': !isSelected}"> <a href="javascript:;"><i class="fa fa-download"></i> Download</a> </li> <li ng-class="{'disabled': !isSelected}"> <a href="javascript:;"><i class="fa fa-pencil"></i> Edit</a> </li> <li ng-class="{'disabled': !isSelected}"> <a href="javascript:;"><i class="fa fa-trash-o"></i> Delete</a> </li> </ul> <!-- row --> <div class="row mix-grid" ui-jq="mixItUp"> <div class="gallery" ui-jq="magnificPopup" ui-options="{
            delegate: 'a.img-preview',
		        type: 'image',
		        tLoading: 'Loading image #%curr%...',
            mainClass: 'mfp-img-mobile',
            gallery: {
              enabled: true,
              navigateByImgClick: true,
              preload: [0,1]
            }
           }"> <!-- col --> <div class="col-md-4 col-sm-6 mb-20 mix mix_all {{image.category}}" ng-class="{'selected': image.selected}" ng-repeat="image in images"> <div class="img-container"> <img class="img-responsive" ng-src="{{image.src}}" alt=""> <div class="img-details"> <h4 class="custom-font">{{image.title}}</h4> <div class="img-controls"> <a href="javascript:;" class="img-select" ng-click="selectImage($index)"> <i class="fa fa-circle-o" ng-show="!image.selected"></i> <i class="fa fa-circle" ng-show="image.selected"></i> </a> <a href="javascript:;" class="img-link"> <i class="fa fa-link"></i> </a> <a class="img-preview" href="{{image.src}}" title="{{image.title}}"> <i class="fa fa-search"></i> </a> <a href="javascript:;" class="img-more"> <i class="fa fa-ellipsis-v"></i> </a> </div> </div> </div> </div> <!-- /col --> </div> </div> <!-- /row --> </uib-tab> <uib-tab heading="2 Columns"> <ul class="mix-filter pull-right"> <li class="filter active" data-filter="all"> All </li> <li class="filter" data-filter=".cats"> Cats </li> <li class="filter" data-filter=".animals"> Animals </li> <li class="filter" data-filter=".cities"> Cities </li> <li class="filter" data-filter=".cats, .animals"> Cats and Animals </li> </ul> <ul class="mix-controls"> <li class="select-all"> <label class="checkbox checkbox-custom checkbox-custom-sm inline-block m-0"> <input type="checkbox" ng-model="selectedAll" ng-click="selectAll()"><i></i> Select all </label> </li> <li ng-class="{'disabled': !isSelected}"> <a href="javascript:;"><i class="fa fa-envelope-o"></i> Email</a> </li> <li ng-class="{'disabled': !isSelected}"> <a href="javascript:;"><i class="fa fa-download"></i> Download</a> </li> <li ng-class="{'disabled': !isSelected}"> <a href="javascript:;"><i class="fa fa-pencil"></i> Edit</a> </li> <li ng-class="{'disabled': !isSelected}"> <a href="javascript:;"><i class="fa fa-trash-o"></i> Delete</a> </li> </ul> <!-- row --> <div class="row mix-grid" ui-jq="mixItUp"> <div class="gallery" ui-jq="magnificPopup" ui-options="{
            delegate: 'a.img-preview',
		        type: 'image',
		        tLoading: 'Loading image #%curr%...',
            mainClass: 'mfp-img-mobile',
            gallery: {
              enabled: true,
              navigateByImgClick: true,
              preload: [0,1]
            }
           }"> <!-- col --> <div class="col-md-6 col-sm-6 mb-20 mix mix_all {{image.category}}" ng-class="{'selected': image.selected}" ng-repeat="image in images"> <div class="img-container"> <img class="img-responsive" ng-src="{{image.src}}" alt=""> <div class="img-details"> <h4 class="custom-font">{{image.title}}</h4> <div class="img-controls"> <a href="javascript:;" class="img-select" ng-click="selectImage($index)"> <i class="fa fa-circle-o" ng-show="!image.selected"></i> <i class="fa fa-circle" ng-show="image.selected"></i> </a> <a href="javascript:;" class="img-link"> <i class="fa fa-link"></i> </a> <a class="img-preview" href="{{image.src}}" title="{{image.title}}"> <i class="fa fa-search"></i> </a> <a href="javascript:;" class="img-more"> <i class="fa fa-ellipsis-v"></i> </a> </div> </div> </div> </div> <!-- /col --> </div> </div> <!-- /row --> </uib-tab> </uib-tabset> </div> <!-- /page content --> </div>