compact / angular-bootstrap-lightbox Goto Github PK
View Code? Open in Web Editor NEWAn AngularJS lightbox built using UI Bootstrap Modal.
Home Page: http://compact.github.io/angular-bootstrap-lightbox/
License: MIT License
An AngularJS lightbox built using UI Bootstrap Modal.
Home Page: http://compact.github.io/angular-bootstrap-lightbox/
License: MIT License
Hi,
I have created a Plunker for this Awesome module.If you can put that on your home page then it'll help for everyone.Thanks for the great work.Keep it up ๐
Here it is : Plunker
Hi, I think the latest release of this plugin (0.6) specifies the bower dependencies as:
"angular": "^1.3.15"
"angular-bootstrap": "^0.12.1"
As far as I know, Angular Bootstrap didn't support Angular 1.3 until version 0.13, which was recently released.
This leads to warnings about potential code incompatibility. E.g.
angular-bootstrap#0.13.0 incompatible with ^0.12.1
Resort to using angular-bootstrap#~0.13 which resolved to angular-bootstrap#0.13.0
Code incompatibilities may occur.
Is there any plan to support angular-bootstrap 0.13 in the near future?
Thanks, and thanks also for the work going into this plugin!
Because I don't know the URLs ahead of time, I needed a way to figure out them on runtime.
My solution was to add data-attributes in the server-side generated template like so:
<div data-ng-controller="GalleryController" data-lightbox-url="{{ backend.interpolated.url }}" data-lightbox-thumbnail="{{ backend.interpolated.url }}" data-lightbox-caption="{{ backend.interpolated.value }}">
<img src="{{ data-lightbox-thumbnail.from.above }}" alt="{{ data-lightbox-caption.from.above }}" data-ng-click="openLightbox()" />
</div>
(One could render JSON into the data-attributes as well ;-))
In my GalleryController, I filled $scope.images
like so:
$scope.images = [{
url: $attrs.lightboxUrl,
thumbUrl: $attrs.lightboxThumbnail,
caption: $attrs.lightboxCaption
}];
I open the modal like
$scope.openLightbox = function() {
Lightbox.openModal($scope.images, 0);
});
Feel free to extend your API :)
I have a directive I made called Rating. Only when I load the bootstrapLightbox module, get:
GET http://localhost:8000/app/template/rating/rating.html 404 (Not Found)
Error: [$compile:tpload] Failed to load template: template/rating/rating.html (HTTP status: 404 Not Found)
A that's not the templateUrl for that directive.
Then, when I satisfy this request I get:
Error: [$compile:tplrt] Template for directive 'rating' must have exactly one root element. template/rating/rating.html
I have other directives in the same view and before rating and they are still working.
Not only 'url' that shown in the example?
Demo3 has an error.
Replace in modal template:
<img lightbox-src="" alt="">
to:
<img lightbox-src="{{Lightbox.imageUrl}}" alt="">
I need to add some actions on each image. For that I make a custom template wish call some new method injected by decorator :
$provide.decorator('Lightbox', function($delegate) {
$delegate.deleteImage = function(image) {
alert("delImage : " + this.images + ", id" + image.id + ", index:", this.index);
this.images.splice(this.index, 1);
if (this.images.length == 0) this.closeModal()
};
return $delegate;
});
to work, I need to have access to theses variables and make some changes :
var Lightbox = {};
// array of all images to be shown in the lightbox (not Image objects)
Lightbox.images = [];
// the index of the image currently shown (Lightbox.image)
Lightbox.index = -1;
can you add this in next release ?
thanks
Is it possible to make this compatible with newer bootstrap version?
Now it seems to require 0.14 version but seems to also work with newer versions of UI bootstrap. I did a quick test with UI Bootstrap 1.3.2.
Thank you for this excellent module!
Would it make sense to expose a flag for each image that is being loaded via the ImageLoader service, for e.g. image.isLoaded
. It could be set to true after the ImageLoader promise is resolved in the Lightbox.setImage
method. It would help in toggling an animation element to let the user know that images are being loaded in the background.
I am using another sweet module for showing progress of global $http
/$resource
promises (angular-loading-bar), but I believe it'd be even better UX if a different loading indicator appears in the center of the space where the loaded image would show up.
Does this make sense? Or is it possible to achieve that with custom templates as it is that I couldn't figure out?
Works out of the box.
Having the same issue as this user.
This is the console error
Unknown provider: $uibModalProvider <- $uibModal <- Lightbox <- Lightbox
ui.boostrap is being required correctly and used on other elements in the same controller
var accountApp = angular.module('accountApp', [
'ngRoute',
'ngResource',
'messageModule',
'accountControllers',
'ui.bootstrap',
'Devise',
'braintree-angular',
'ngFileUpload',
'bootstrapLightbox',
]);
Is it possible to add some multi language features to the lib? For now I have to fork repo and replace "< Previous" and "Next >" buttons by glyphicon-chevron-left/right icons and remove "Open in new tab" button. It would be nice add some configuration for this.
When i'm opening lightbox by clicking on any image on my page and image loaded and after this image's height\width becomes 0px. I'm try to debug this and found reason of that behavior:
ImageLoader.load(src) promise generate both event success and failure...
In the Chrome failure fire before success and we see no problems, but in FF success fire before failure and it resize to 0px.
OK, i'm deep more in this function and found intresting thing,
scope.$watch(function () {
return attrs.lightboxSrc;
}
fires two times,
1st time with attrs.lightboxSrc == "" and Lightbox.index == -1
2st time with attrs.lightboxSrc == %MyUrl% and Lightbox.index == %MyIndex%
I'm fix this by this code
if(Lightbox.index < 0){
return
}
before
ImageLoader.load(src).then(function (image) {})
But i dont wanna to pull request cause i dont know how correct my code >.<
Sorry for my English, its not my native :)
Hi,
I'm starting to use the ligthbox, I tried to create a quick sample, passing the image url to the lightbox instead a complex object, but I'm getting and error with the function isVideo, trying to check the image.type. Does it mean that the image needs to be a complex object containing a type always?
Thanks!
P.S great work!!
The background/overlay does not hide when I close the dialogue box (either clicking off or clicking the "close" button).
I got this error message when using angular-ui-bootstrap 0.14.3
$modalStack is now deprecated. Use $uibModalStack instead
Would be nice to make this library to support the new version of Angular Bootstrap.
https://github.com/angular-ui/bootstrap/wiki/Migration-guide-for-prefixes
As far as I can see, everything works. It is just the annoying dependency warning that needs to be fixed.
In order to properly load lightbox.html
it was necessary to us, to wrap the markup in
<script type="text/ng-template" id="lightbox.html">
/* Content of lightbox.html goes here */
</script>
Maybe you can add those lines on your own :)
I would like to use video sources too. Like Mp4 and webm. Do you have any plan to encompass it?
Nice piece of software btw!
Cheers,
Luca
It would be really nice if there was a feature for creating(or controlling) the modal size
Hello,
i'm currently displaying my images using base64_encode so my tag looks like this
div ng-click="openLightboxModal($index)">
img ng-src="data:image/JPEG;base64,{{item.hash}}"
So i got this issue when i click on my image it says "Failed to load image", because i think he wants to load it from a url, which i'm not able to give him to.
Is there a way around ? Or did i missed something ?
Thanks
Seems that the Lightbox.keyboardNavEnabled is not working. It would appear that the parameter is being forced to "true" when openModal is called. Me thinks this is probably not the desired behavior as it completely overrides the user setting from controller.
`
Lightbox.openModal = function (newImages, newIndex, modalParams) {
Lightbox.images = newImages;
Lightbox.setImage(newIndex);
// store the modal instance so we can close it manually if we need to
Lightbox.modalInstance = $uibModal.open(angular.extend({
'templateUrl': Lightbox.templateUrl,
'controller': ['$scope', function ($scope) {
// $scope is the modal scope, a child of $rootScope
$scope.Lightbox = Lightbox;
Lightbox.keyboardNavEnabled = true;
}],
'windowClass': 'lightbox-modal'
}, modalParams || {}));
`
The provided angular-bootstrap-lightbox.min.js is broken. Using this file as the lightbox src produces the following error when you inject Tabletop into a controller:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.18/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-%20Lightbox%20%3C-%20imageSliderDirective
at Error (native)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:6:450
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:36:145
at Object.c [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:34:236)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:36:213
at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:34:236)
at Object.d [as invoke] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:34:453)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:36:231
at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:34:236)
at Object.d [as invoke] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:34:453)
Switching to angular-bootstrap-lightbox.js resolves this issue.
When installing via NPM the index.js is missing. #41
And something else:
(I'm rather new with webpack so maybe this is just a mistake on my end.)
Shouldn't the index.js file require the css file? like so:
require("./dist/angular-bootstrap-lightbox.css");
require('./dist/angular-bootstrap-lightbox');
module.exports = 'angular-bootstrap-lightbox';
Because without this the css doesn't emerge.
I'm trying to fit this lightbox into a mobile screen. There is a huge amount of margins on the left & right of every image.
I'm not sure how to go about customizing this. I see the "calculateImageDimensionLimits" & "calculateModalDimensions" but don't know how to change any of those values. Should those hard-coded numbers be baked into the configuration?
If I implement the JS file to the HTML part (script tag) it makes the page to appear blank.
It just loads up, changes the background color maybe, but that's it. Nothing more happens. No error in console either.
If I remove the JS file from the DOM again, it just works fine again.
Modal-backdrop isn't correctly displayed. I think the height of 0px is to small and that's the reason why the whole background layer is missing.
Please compare bootstrap modal with your demo for proof.
Thank you.
Sorry if this is a simple question, but how do I catch the promise when the lightbox is closed? I was hoping if I had:
var instance = Lightbox.openModal(images,index);
I could then do this:
instance.result.then(function (result) {...});
But it doesn't seem to catch the promise?
Thanks,
Bob
At https://github.com/compact/angular-bootstrap-lightbox/blob/master/src/lightbox.html it is assumed that the developer is using default interpolate start and end symbols. E.g. in ng-href="{{Lightbox.imageUrl}}"
However, many developer use different symbols for compatibility reasons (e.g. with server side templating engines).
There is a plunker to demonstrate this issue:
http://plnkr.co/edit/Rum0RqcqIsGNIvp6LQnS?p=preview
In demo1.js file you'll see commented lines 4,5 and 6 (the symbol interpolation we make for angular to prevent conflict with php syntax). If you remove the comment try to run it with interpolation of characters then it results in the same error I have in my code. This is due to the syntax symbols of the angular-bootstrap-lightbox.js library not being interpolated (e.g. lightbox modal html is with {{}} syntax).
Do you have any suggestions how to overcome this problem?
To use your module as replacement for jQuery prettyPhoto (which is GPL v2-licensed) I needed to make some adjustments.
To me, the lightbox nav is only required, if I load more than one image into the modal (which I don't).
So I added data-ng-if="Lightbox.images.length > 1"
to the .btn-group
of .lightbox-nav
.
Maybe you want to adjust your template as well ;-)
i have an array of objects with the image path stored in image_name
value. In your example you have used url
. How do i change this value in the LightboxProvider?
Although #32 is closed by its author, the issue hasn't been resolved. Merging code fix is necessary.
I'm currently trying to use your plugin but i have a problem i'm currently using the custom build of ui.bootstrap directly from the repository 'https://github.com/angular-ui/bootstrap' but I have a problem of dependency with your plugin. You are using: 'ui.bootstrap' as dependency but do you really use it ?
angular.module('bootstrapLightbox', [
'ui.bootstrap'
]);
The problem is that if you are doing custom build of ui.bootstrap the injection is used like : 'ui.bootstrap.modal' and there is no 'ui.bootstrap' so I can't use your plugin.
Regards,
Gaetan SENN
When i added a footer to modal view, then it is visible under the white background.
<div class="modal-body">
...
</div>
<div class="modal-footer">
<p>The Footer</p>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
Hi, I have a problem with images on ios. Images has with width=1px height=0px. I can resolve it with getting height and width on image.onload in lightboxSrc directive.
var image = new Image();
image.src = src;
// these variables must be set before resize(), as they are used in it
imageWidth = image.naturalWidth;
imageHeight = image.naturalHeight;
resize();
var image = new Image();
image.src = src;
image.onLoad = function(){
imageWidth = image.naturalWidth;
imageHeight = image.naturalHeight;
resize();
};
it's work, but I don't know, is it good solution.
I'm using require library.
angular-bootstrap-lightbox gets loaded, but when I run the function I get
Lightbox is not defined
I have to use define to load the library and angular controller
define(['app', 'angular-bootstrap-lightbox'], function (app)
{
"use strict";
app.requires.push('bootstrapLightbox');
app.controller("ctrl", function($scope)
{
....
Hi,
Great module.
Is there anyway to configure it to display the images/videos in the center of the screen?
I have some images too small and they appear on the top of the screen with just the 30px top margin given by bootstrap.
I've took your starting example and tried to achive the following: Modify the lightbox.html
to include a button to perform a custom action in the main controller.
So far I've done the following:
angular.module('app').controller('GalleryCtrl', function ($scope, Lightbox) {
$scope.images = [....];
$scope.openLightboxModal = function (index) {
Lightbox.openModal($scope.images, index);
};
$scope.myNewFunction = function (image) {
// Do something with image
}
});
And the part of the modified lightbox.html
including the button is:
<button type="button" btn-click="myNewFunction(Lightbox.image)" class="btn btn-danger">Do something</button>
But as fas as I understand, it's not possible to pass a controller to the lightbox, is it right?
Is there any way to achieve it with the current implementation?
My photo wall is at the end of the page. (after 3/4 block)
so when a user click on a picture, the modal open at the top (scroll top).
when the user close the modal, he has to scroll back to the photowall.
Then, if he want to display the modal again, the modal open at the good position (when the user clicks).
Do you have any idea to disable the first scroll top ?
I am trying to user angular-bootstrap-lightbox via angular directive.
app.directive('productBuyers', ['Product', function(Product, Lightbox) {
return {
restrict : 'E',
scope : {},
template : '<div>' +
'<p class="product-buyers-header bold" ng-show="photos.length">Others who have bought this product:</p>' +
'<div class="product-buyers-container">' +
'<div class="product-buyer placeholder square" ng-hide="photos.length"></div>' +
'<div class="product-buyer square" ng-click="openLightboxModal($index)" ng-repeat="photo in photos | limitTo:3" ng-style="{\'background-image\':\'url(\' + photo.image + \')\'}"></div>' +
'<div class="clear"></div>' +
'</div>' +
'</div>',
link : function($scope, element, attrs) {
$scope.photos = [];
function getImages() {
Product.customerPhotos(attrs.productId).success(function(response) {
$scope.photos = response.data;
Squares.init();
}).error(function(response) {
console.log("There was a problem getting the product images");
});
}
$scope.openLightboxModal = function (index) {
Lightbox.openModal($scope.photos, index);
};
getImages();
}
}
}]);
it says " Lightbox is undefined". I am not sure how can I use it with directive. Is there any way to do it?
The module ""videosharing-embed"" that you are trying to load does not exist. [$injector:nomod] Module 'videosharing-embed' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.(โฆ)
I am trying to use this with ionic project, but I keep having this kind of bug:
ionic.bundle.js:21157 Error: [$injector:unpr] Unknown provider: LightboxProvider <- Lightbox <- propertyDamageController
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=LightboxProvider%20%3C-%20Lightbox%20%3C-%20propertyDamageController
at ionic.bundle.js:8895
at ionic.bundle.js:13089
at Object.getService [as get] (ionic.bundle.js:13236)
at ionic.bundle.js:13094
at getService (ionic.bundle.js:13236)
at invoke (ionic.bundle.js:13268)
at Object.instantiate (ionic.bundle.js:13285)
at ionic.bundle.js:17841
at self.appendViewElement (ionic.bundle.js:52255)
at Object.switcher.render (ionic.bundle.js:50449)
Here is what I inject into my ionic app:
angular.module('starter', ['ionic', 'ionic-material', 'ionic-toast', 'ngCordova','starter.model', 'starter.factory', 'ui.router','ngPDFViewer','ui.bootstrap', 'bootstrapLightbox'])
function propertyDamageController($scope, $state, $cordovaCamera, vehicle, Lightbox) {
Hi,
I included all the necessary files and added the 'bootstrapLightbox' as a dependency to my module, but i keep getting this error when I'm adding the 'Lightbox' parameter to my controller.
I will appreciate any help on this one.
Does this support angular-ui-boostrap modal services like backdrop static? Are there any future plans on enabling these options per instance rather globally? Thanks!
Regular inputs work fine but inputs on a modal popup start to bring up the keyboard but then remove it. The only way to get keyboard to open fully is to touch input for an extended time.
Works fine on desktop, so to see the problem must use a mobile device.
http://plnkr.co/edit/cdAH7gjHToZf2KiNwBYK
Tested on iPad 8.1 and android 4.4.4 both using chrome 38.
Images that are not on the home page (index) will not open . How to configure to display the current image that are on other pages in the paging ?
Thank you!
Hi,
I put the images on different pages using the ng-repeat and the custom filter | filterBy : [ 'id '] , ' ' " , only just the image of the first object in the array of the list is expanded correctly , the other I need go adding +1 , +2 , +3 and successively. The third object in the array only magnifies the image properly if I add ($index+2) , eg .
$scope.Images =
[
{ id="1", url: "/images/img-1.jpg", src: "/images/img-1.jpg" },
{ id="2", url: "/images/img-2.jpg", src: "/images/img-2.jpg" },
{ id="3", url: "/images/img-3.jpg", src: "/images/img-3.jpg" }
];
The object that is the first in Array $ scope.images list functions normally
<div ng-controller="QuadrinhosCtrl">
<div ng-repeat="image in images | filterBy: ['id']: '1'">
<a ng-click="openLightboxModal($index)" title="Ampliar Imagem">
<img ng-src="{{image.src}}" width="655" height="406" class="img-thumbnail" >
</a>
</div>
</div>
The object that is second on the list of Array $ scope.images only works if I add +1 to $ index
<div ng-controller="QuadrinhosCtrl">
<div ng-repeat="image in images | filterBy: ['id']: '2'">
<a ng-click="openLightboxModal($index+1)" title="Ampliar Imagem">
<img ng-src="{{image.src}}" width="655" height="406" class="img-thumbnail" >
</a>
</div>
</div>
The object that is third on the list of Array $ scope.images only works if I add +2 at $ index
<div ng-controller="QuadrinhosCtrl">
<div ng-repeat="image in images | filterBy: ['id']: '3'">
<a ng-click="openLightboxModal($index+2)" title="Ampliar Imagem">
<img ng-src="{{image.src}}" width="655" height="406" class="img-thumbnail" >
</a>
</div>
</div>
I wonder if this directive works by placing the images (objects) , the same array, in different pages , if so, how could do it ?
Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.