schwarzwaldfalke / nggallery Goto Github PK

GalleryCtrl.js :
angular.module('myApp').controller('GalleryCtrl',[function($scope,$document){
var self = this;

self.images = [
    {thumb: 'image/slider/1.jpg', img: 'image/slider/1.jpg', description: 'Image 1'},
    {thumb: 'image/slider/2.jpg', img: 'image/slider/2.jpg', description: 'Image 2'},
    {thumb: 'image/slider/3.jpg', img: 'image/slider/3.jpg', description: 'Image 3'},
    {thumb: 'image/slider/4.jpg', img: 'image/slider/4.jpg', description: 'Image 4'}
];

}]);

Gallery.html :

and i add 'jkuri.gallery' in app.js file but i have e error :

TypeError: Cannot read property '0' of undefined
at Scope.scope.getImageDownloadSrc (ngGallery.js:129)
at fn (eval at (angular.js:14138), :4:248)
at expressionInputWatch (angular.js:15191)
at Scope.$digest (angular.js:16730)
at Scope.$apply (angular.js:17003)
at done (angular.js:11324)
at completeRequest (angular.js:11522)
at XMLHttpRequest.requestLoaded (angular.js:11463)

please help me

Add $timeout(function() {scope.$apply()}); statement at the end of showImage function.

How to hide thumbs in popup?

Gallery after open doesn't show image in screen. Thumbnails are showing, but in main screen is still showing loading ring.

I think that is problem with "showImage" function, but I was check image paths and looks right.

Need to replace this code:

var $thumbwrapper = angular.element(document.querySelectorAll('.ng-thumbnails-wrapper'));
var $thumbnails = angular.element(document.querySelectorAll('.ng-thumbnails'));

With this:

var $thumbwrapper = element.find('.ng-thumbnails-wrapper');
var $thumbnails = element.find('.ng-thumbnails');

This allows to use multiple galleries on a single page and it should be faster to search element only inside scope.

http://stackoverflow.com/questions/33556430/nothing-shows-up-after-no-error-implementation-of-jankuri-ng-gallery

Have a look at that link.
I even tried replicating the exact same thing that you have done, as in formatting controllers in similar manner and even fed static entries to self.images but still nothing shows up.

I don't know what's wrong here.

It seems that passing template into template-url attr in directive doesn't work.
Because attrs.templateUrl in templateUrl method get just name instead of value of variable .

P.S.: Thank you for your gallery. It's great.

I'm getting these errors in the console:

Error: undefined is not an object (evaluating 'scope.index')
getImageDownloadSrc@http://xxx.xxx.xxx.xxx/Galley/js/ngGallery.js:128:43

Error: undefined is not an object (evaluating 'scope.index')
showImageDownloadButton@http://xxx.xxx.xxx.xxx/Galley/js/ngGallery.js:122:43

When I click an image there is no downloadbutton, nor close-button, and there are also no left and right arrows.

This is my JS code:

`var app = angular.module('galley', ['jkuri.gallery']);

app.controller('Ctrl', ['$scope', '$http', '$document', function($scope, $http, $document){

$http.get('images.json').success(function(data){
    $scope.images = data;
})

}]);`

How to fix this? Is my code wrong?

Gtrz,
MaccerC

Hi,
I have problem with
.ng-gallery-content > img {
max-height: calc(100% - 150px);
max-width: calc(100% - 100px);
....
In dev tools i see
max-height: calc(-50%);
max-width: calc(-0%);

And main image is not shown

If ngAnimate is enabled the fadeIn animation is preserved when changing photo making it coexist along with loader for this short time. Extra css must be made

Hi! I have done all by instruction but have errors http://joxi.ru/KAgZN9BFgbz1x2
What could be the problem?

In function "loadImage": typeof this.complete === false
In function "openGallery": typeof i !== undefined

typeof [anything] is never undefined or false. removing "typeof" in both these statements will fix the conditional statements.

In template, change "- {{ description }}" to "{{ description ? '"-"' + description : '' }}"

I cannot find out how to make the download button to show. I read something about downloadSrc property, but how do I set this property?

Hey! I love this plugin! I'm using it inside an accordion and when I click a thumbnail, the gallery opens inside it. Is there any way to set the entire body as the gallery container?
Thanks!

In case of IOS image orientation issue. there is no option to manipulate the images through directives or other. Methods for adding additional directives could be added to the library.

It will be a great feature if it will support videos and images.

First off, thanks for creating this gallery module!

I noticed a small issue when changing images, while viewing a gallery. If you click on a thumbnail in the thumbnail strip, instead of using the left or right arrows, the description does not get updated.

It seems this is due to changeImage() calling loadImage() directly, instead of showImage() (like nextImage() and prevImage() do).

if I have the image 500, how to handle paging?

Hey, I have created a branch and would like to submit a pull request.

• added IIFE around module / directive
• removed anonymous function for ngGallery
• added $inject for dependency injection

( function () {
    'use strict';
    angular.module(  'jkuri.gallery', []  ).directive(  'ngGallery', ngGallery  );

    ngGallery.$inject = [ '$document', '$timeout', '$q', '$templateCache' ];

    function ngGallery(  $document, $timeout, $q, $templateCache  ) {
        /** CODE OMIT **/
        }
} )();

This error occurs while clicking on previous button when preview is on first image on list.

I'm afraid, there is no way to override default settings for baseClass and thumbClass in setScopeValues().

Maybe I am just being blind but I think the scope of the directive should offer to accept thumbClass and baseClass from HTML, e.g:

...
scope: {
                images: '=',
                thumbsNum: '@',
                baseClass: '@',
                thumbClass: '@',
                hideOverflow: '='
            }
...

<ng-gallery data-images="images" data-base-class="customBaseClass" data-thumb-class="customThumbClass" data-thumbs-num="images.length"></ng-gallery>

PR: #38

Width of ng-thumbnails-wrapper and the position of ng-thumbnails should be recalculated after each image change (next/previous). Otherwise the width/position is wrong if the thumbnails have different aspect ratios:

Hi,
i get this error: Cannot read property 'scrollLeft' of undefined (ngGallery.js:207)

...
current_scroll = $thumbwrapper[0].scrollLeft,
...

I've update the library at the latest version, with the merge for allow the multiple galleries in one page.
What can i do for fix this?
Thanks a lot!

I would like to know if this PR was merged to master branch. I need so much use it.

Hi @SchwarzwaldFalke ,
We are cdnjs team, we want to host your project on cdnjs.
But I'm not sure which files in this repo need to be added, could you please help up find out the main files?
Thank you.

cdnjs/cdnjs#8042

http://demo.jankuri.com/ngGallery/

results in:

502 Bad Gateway
nginx/1.10.1

Hi @SchwarzwaldFalke ,
We found that the repo doesn't have any release. Could you please add git tags so that the git auto-updater in cdnjs can recognize the correct version and automatically update the repo?
Thank you.

cdnjs/cdnjs#8042

How can i bind ng-click with delete action on image ?

The fix would be

 transform: translate3d(0, -50%, 0);
  -webkit-transform: translate3d(0, -50%, 0);

instead of

 transform: translateY(-50%);
  -webkit-transform: translateY(-50%);

in ngGallery.css

hi, it's not support auto scroll, right?

I have ng-gallery inside a modal from ui-bootstrap. When a image is displayed full-screen, I want it to fill the whole document and not just the modal.

I made a sample to show how it goes.
Plnkr: http://plnkr.co/edit/YVFXwmEGvIAY5EV4mqcj?p=preview

While it is unfortunate to have a modal over modal, I believe in case of full screen that could work well. Only if it is attached to document.body instead of parent element.

Last but not least, thanks for this cool component =p

On opened gallery, there should be an option to remove page scrolling. Meaning, a parameter, to set body{overflow:hidden;} on open and remove it on gallery close.

I apologize, if there already is such option.

I'm new to angular, so apologies if this is a silly question. What is the best way to call openGallery(); on page load? My attempts to do this so far have returned "openGallery is not defined" as I believe I am out of scope.

Thanks in advance for any guidance you can offer! And thanks for the slideshow, it's great!

I want to support search engines to get the images from the site, but using ng-gallery will prevent me doing so.

So I want to implement normal loop of images using img tag and then use javascript (angular) function to open that image in model box and other images to follow on model as gallery images.

Is it possible?

In the example that you give for the 'app.js' it's written 'self.images' and it should be 'this.images'.

And well done for the gallery! ;)