Skip to content

Commit

Permalink
Corrected 'open' lifecycle.
Browse files Browse the repository at this point in the history 
Fix colorbox rendering when dynamic gallery links are used. (only after DOM is ready)
Remove console.logs.
Version Bump
  • Loading branch information
Igor Lino committed Jun 7, 2015
1 parent 76979be commit 31c8cda
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 119 deletions.
2 changes: 1 addition & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-colorbox",
"version": "1.0.0",
"version": "1.0.1",
"author": {
"name": "Igor Lino",
"url": "http://igorlino.github.io/angular-colorbox/"
Expand Down
7 changes: 6 additions & 1 deletion demo/controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,11 +86,16 @@ angular.module('colorboxdemo.controllers', []).
$scope.zoomModel2 = $scope.imagesForGallery[1];

$scope.zoomModelGallery01 = $scope.imagesForGallery[1];
$scope.zoomModelGallery04 = $scope.imagesForGallery[1];
$scope.zoomModelGallery04 = $scope.imagesForGallery[3];
$scope.zoomModelGallery05 = $scope.imagesForGallery[0];
$scope.setActiveImageInGallery = function (prop, img) {
$scope[prop] = img;
//console.log(img);
};
$scope.setScopeValue = function (prop, value) {
$scope[prop] = value;
};

});


114 changes: 39 additions & 75 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,8 @@
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5" media="screen" />
<link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.5"
media="screen"/>

<script src='https://rawgit.com/igorlino/angular-elevatezoom-plus/master/js/ezplus.module.js'></script>
<script src='https://rawgit.com/igorlino/angular-elevatezoom-plus/master/js/ezplus.directive.js'></script>
Expand All @@ -50,21 +51,18 @@
<script src='controller.js'></script>
<script src='app.js'></script>

<link rel="stylesheet" type="text/css" href="colorbox-darktheme.css" media="screen" />
<link rel="stylesheet" type="text/css" href="colorbox-darktheme.css" media="screen"/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox.js'></script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js'></script>





</head>

<body
ng-app="colorboxdemo"
ng-controller="ColorboxCtrl"
ng-init="approot='';zoom01=false;zoom01a=false;zoom03=false;zoom04=false;">
ng-init="approot='';zoom01=false;zoom01a=false;zoom03=false;zoom04=false;zoom05=false">

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
Expand Down Expand Up @@ -94,10 +92,11 @@ <h1>Angular ColorBox Examples</h1>

<h2>Basic Colorbox modal example</h2>

<p class="lead">Use these examples as a way to quickly start any new web project that requires image zooming.</p>
<p class="lead">Use these examples as a way to quickly start any new web project that requires image
zooming.</p>


<h2>Basic Click Example {{zoom01}}</h2>
<h2>Basic Click Example</h2>
<img
id="zoom_01"

Expand Down Expand Up @@ -137,101 +136,66 @@ <h2>Basic Colorbox modal example with Width/Height 75%</h2>
</colorbox>

<hr/>
<h2>Colorbox Gallery</h2>
<h2>Basic Gallery</h2>

<img id="zoom_03"
ez-plus
ezp-model="zoomModelGallery01"
ezp-options="zoomOptionsGallery01"
/>
<div id="gallery_05">
<a ng-repeat="image3 in imagesForGallery"

<div id="gallery_01">
<a class="img-group-01"
ng-repeat="image2 in imagesForGallery"
ng-click="setActiveImageInGallery('zoomModelGallery01',image2);"
class="img-group-05"
href="{{approot}}{{image3.large}}"

data-image="{{approot}}{{image2.small}}"
data-zoom-image="{{approot}}{{image2.large}}"
ng-click="setActiveImageInGallery('zoomModelGallery05',image3);"
>

href="#">
<img ng-src="{{approot}}{{image2.thumb}}"/>
<img ng-src="{{approot}}{{image3.thumb}}"/>
</a>
</div>

<colorbox
box-for=".img-group-01"
open="zoom03"
options="{rel:'img-group-01', slideshow:false, open:true}">
box-for=".img-group-05"
open="zoom05"
options="{rel:'img-group-05', slideshow:false, open:false}">

</colorbox>

<script type="text/javascript">
/* $(document).ready(function () {
$("#zoom_03").ezPlus({
gallery: 'gallery_01',
cursor: 'pointer',
galleryActiveClass: "active",
imageCrossfade: true,
loadingIcon: "images/spinner.gif"
});
$("#zoom_03").bind("click", function (e) {
var ez = $('#zoom_03').data('ezPlus');
//ez.closeAll(); //NEW: This function force hides the lens, tint and window
//$.fancybox(ez.getGalleryList());
return false;
});
});*/

</script>

<hr/>
<h2>Gallery with ElevateZoom Plus</h2>

<img id="zoom_03"

<h2>Colorbox Slideshow</h2>
ng-src="{{approot}}images/large/image2.jpg"

<img id="zoom_04"
ng-click="setScopeValue('zoom03',true);"

ez-plus
ezp-model="zoomModelGallery04"
ezp-options="zoomOptionsGallery04"
data-image-zoom="{{approot}}images/large/image1.jpg"
ezp-model="zoomModelGallery01"
ezp-options="zoomOptionsGallery01"
/>

<div id="gallery_04">
<a class="img-group-02"
ng-repeat="image in imagesForGallery"
ng-click="setActiveImageInGallery('zoomModelGallery04',image);"
<div id="gallery_01">
<a ng-repeat="image2 in imagesForGallery"

data-image="{{approot}}{{image.small}}"
data-zoom-image="{{approot}}{{image.large}}"
class="img-group-01"
href="{{approot}}{{image2.large}}"

href="#">
<img ng-src="{{approot}}{{image.thumb}}"/>
ng-click="setActiveImageInGallery('zoomModelGallery01',image2);"
data-image="{{approot}}{{image2.small}}"
data-zoom-image="{{approot}}{{image2.large}}">

<img ng-src="{{approot}}{{image2.thumb}}"/>
</a>
</div>

<colorbox
box-for=".img-group-01"
open="zoom03"
options="{rel:'img-group-01', slideshow:false, open:false}">
</colorbox>

box-for=".img-group-02"
open="zoom04"
options="{rel:'img-group-02', slideshow:true, open:true}">

</colorbox>
<hr/>

<script type="text/javascript">
/*$(document).ready(function () {
$("#zoom_04").ezPlus({
gallery: 'gallery_04',
cursor: 'pointer',
galleryActiveClass: "active",
imageCrossfade: true,
loadingIcon: "images/spinner.gif"
});
});
*/
</script>
</div>

</div>
Expand Down
77 changes: 36 additions & 41 deletions js/colorbox.directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,74 +30,64 @@

controller.$inject = ['$scope'];
function controller($scope) {
//console.log($scope.open);

}

link.$inject = ['$scope', '$element', '$attributes'];
function link($scope, $element, $attributes, controller) {
var cb = null;

/*$scope.$watch('open', function (newValue, oldValue) {
//console.log("watch $scope.open("+$scope.open+") " + oldValue + "->" + newValue);
if (oldValue !== newValue) {
updateOpen();
}
});*/
$scope.$watch('open', function (newValue, oldValue) {
//console.log("watch $scope.open(" + $scope.open + ") " + oldValue + "->" + newValue);
if (oldValue !== newValue) {
updateOpen(newValue);
}
});

$scope.$on('$destroy', function () {
$element.remove();
});

updateOpen();

function updateOpen() {
/*if ($scope.open) {
init();
} else {
if (cb) {
$.colorbox.close();
}
}*/
init();
}
init();

function init() {
if (cb) {
return;
function updateOpen(newValue) {
if (newValue) {
init(newValue);
} else {
$.colorbox.close();
}
}

function init(open) {
var options = {
href: $attributes.src,
boxFor: $attributes.boxFor,
onOpen: function () {
$scope.open = true;
//console.log("open")
if ($scope.onOpen()) {
if ($scope.onOpen && $scope.onOpen()) {
$scope.onOpen()();
}
},
onLoad: function () {
//console.log("load")
if ($scope.onLoad()) {
if ($scope.onLoad && $scope.onLoad()) {
$scope.onLoad()();
}
},
onComplete: function () {
//console.log("complete")
onComplete();
if ($scope.onComplete()) {
if ($scope.onComplete && $scope.onComplete()) {
$scope.onComplete()();
}
},
onCleanup: function () {
//console.log("cleanup")
if ($scope.onCleanup()) {
if ($scope.onCleanup && $scope.onCleanup()) {
$scope.onCleanup()();
}
},
onClosed: function () {
//console.log("closing")
$scope.open = false;
if ($scope.onClosed()) {
$scope.$apply(function() {
$scope.open = false;
});
if ($scope.onClosed && $scope.onClosed()) {
$scope.onClosed()();
}
}
Expand All @@ -119,15 +109,20 @@
}
}


if (options.boxFor) {
//opens the element by id boxFor
cb = $(options.boxFor).colorbox(options);
} else if (options.href) {
//opens the colorbox using an href.
cb = $.colorbox(options);
if (typeof(open) !== 'undefined') {
options.open = open;
}

//wait for the DOM view to be ready
$timeout(function () {
if (options.boxFor) {
//opens the element by id boxFor
cb = $(options.boxFor).colorbox(options);
} else if (options.href) {
//opens the colorbox using an href.
cb = $.colorbox(options);
}
}, 0);
}

function onComplete() {
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-colorbox",
"version": "1.0.0",
"version": "1.0.1",
"title": "Angular Colorbox",
"description": "Angular directive for Colorbox, the jQuery lightbox and modal window plugin.",
"keywords": [
Expand Down

0 comments on commit 31c8cda

Please sign in to comment.