Ported to angular main page example.

igorlino · Jun 24, 2015 · 644b1af · 644b1af
1 parent fc04fdf
commit 644b1af
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 15 deletions.
diff --git a/demo/js/app.js b/demo/js/app.js
@@ -6,8 +6,8 @@ angular.module('elevatezoomdemo', [
 ])
 
     .run(
-    [          '$rootScope', '$state', '$stateParams',
-        function ($rootScope,   $state,   $stateParams) {
+    ['$rootScope', '$state', '$stateParams',
+        function ($rootScope, $state, $stateParams) {
 
             // It's very handy to add references to $state and $stateParams to the $rootScope
             // so that you can access them from any scope within your applications.
@@ -17,7 +17,7 @@ angular.module('elevatezoomdemo', [
     ]
 )
 
-    .config(function($stateProvider, $urlRouterProvider) {
+    .config(function ($stateProvider, $urlRouterProvider) {
         //
         // For any unmatched url, redirect to /state1
         $urlRouterProvider.otherwise("/main");
@@ -52,5 +52,69 @@ angular.module('elevatezoomdemo', [
 
         function DemoCtrl($timeout, $scope, fancyboxService) {
             CueCtrl($timeout);
+
+            $scope.zoomOptionsGallery01 = {
+                scrollZoom: true,
+                zoomWindowWidth: 600,
+                zoomWindowHeight: 600,
+                easing: true,
+                zoomWindowFadeIn: 500,
+                zoomWindowFadeOut: 500,
+                lensFadeIn: 500,
+                lensFadeOut: 500,
+
+                initial: 'small',
+
+                gallery: 'gallery_01',
+                cursor: 'pointer',
+                galleryActiveClass: "active",
+                imageCrossfade: true,
+                loadingIcon: false
+            };
+
+            $scope.imagesForGallery = [];
+            $scope.setApproot = function(appRoot) {
+                //only change when needed.
+                if ($scope.approot && appRoot === $scope.approot) {
+                    return;
+                }
+                $scope.approot = appRoot;
+                $scope.imagesForGallery = [
+                    {
+                        thumb: appRoot + 'images/thumb/image1.jpg',
+                        small: appRoot + 'images/small/image1.jpg',
+                        large: appRoot + 'images/large/image1.jpg'
+                    },
+                    {
+                        thumb: appRoot + 'images/thumb/image2.jpg',
+                        small: appRoot + 'images/small/image2.jpg',
+                        large: appRoot + 'images/large/image2.jpg'
+                    },
+                    {
+                        thumb: appRoot + 'images/thumb/image3.jpg',
+                        small: appRoot + 'images/small/image3.jpg',
+                        large: appRoot + 'images/large/image3.jpg'
+                    },
+                    {
+                        thumb: appRoot + 'images/thumb/image4.jpg',
+                        small: appRoot + 'images/small/image4.jpg',
+                        large: appRoot + 'images/large/image4.jpg'
+                    },
+                    {
+                        thumb: appRoot + 'images/thumb/image5.jpg',
+                        small: appRoot + 'images/small/image5.jpg',
+                        large: appRoot + 'images/large/image5.jpg'
+                    }
+                ];
+
+                $scope.zoomModel1 = $scope.imagesForGallery[0];
+                $scope.zoomModel2 = $scope.imagesForGallery[1];
+
+                $scope.zoomModelGallery01 = $scope.imagesForGallery[1];
+                $scope.zoomModelGallery04 = $scope.imagesForGallery[1];
+            };
+
+            //default
+            $scope.setApproot('');
         }
     });
diff --git a/demo/main.html b/demo/main.html
@@ -33,13 +33,29 @@ <h1>Features</h1>
         </ul>
 
         <div class="zoom-left">
-            <img style="width:411px" id="img_01"
+            <img style="width:411px" id="zoom_03"
                  src="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/demo/images/small/image3.jpg"
                  data-zoom-image="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/demo/images/large/image3.jpg"
+
+                 ez-plus
+                 ezp-model="zoomModelGallery01"
+                 ezp-options="zoomOptionsGallery01"
                 />
 
-            <div id="gal1" style="width:500px;float:left;">
+            <div id="gallery_01" style="width:500px;float:left;">
+                <a class="img-group-01"
+                   ng-repeat="image2 in imagesForGallery"
+                   ng-click="setActiveImageInGallery('zoomModelGallery01',image2);"
+
+                   data-image="{{approot}}{{image2.small}}"
+                   data-zoom-image="{{approot}}{{image2.large}}"
+
+                   href="#">
+                    <img ng-src="{{approot}}{{image2.thumb}}"/>
+                </a>
+            </div>
 
+            <!--<div id="gal1" style="width:500px;float:left;">
                 <a href="#" class="elevatezoom-gallery" data-update=""
                    data-image="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/demo/images/small/image1.jpg"
                    data-zoom-image="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/demo/images/large/image1.jpg">
@@ -71,18 +87,17 @@ <h1>Features</h1>
                           src="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.6/demo/images/small/image4.jpg"
                           width="100"/></a>
 
-            </div>
+            </div>-->
+
+            <colorbox
+                box-for=".img-group-01"
+                open="zoom03"
+                options="{rel:'img-group-01', slideshow:false, open:true}">
+
+            </colorbox>
+
         </div>
         <div style="clear:both;"></div>
-        <script type="text/javascript">
-            $(document).ready(function () {
-                $("#zoom_06").ezPlus({
-                    zoomType: "inner",
-                    debug: true,
-                    cursor: "crosshair"
-                });
-            });
-        </script>
 
         <div class="scripts view_script_05">
             <h6>HTML</h6>