I am trying to implement a photo browser that is similar to the one built in IOS for browsing album photos.
I could use ionic slide box, but the photos need to be full screen when viewed, scrollable AND zoomable. I am not sure how to make the images zoomable.
Any hints or a working example would be greatly appreciated.
p.s. what I am trying to implement is very similar to the photo browser at the following link:
http://www.idangero.us/framework7/kitchen-sink/
After browsing the forums, I noticed that there are many similar requests from other users !! I am surprised that such a component is not implemented yet in the framework !!
Yeah, I think it is a basic feature. Hope it will be implemented soon.
Something similar to this?
Not quite like that. The user should be able to slide an image to view the next/previous image in full screen mode. In the same time, for each viewed image the user should be able to zoom in/out.
The best example for this is at the link given above for F7 (click on the photobrowser). It mimics the behaviour of the how photos are viewed in the IOS platform.
It is my opinion that this should be a component of the Ionic framework as any app that deals with pictures may need it.
Why not use slidebox?
Images in your example are not zoomable (pinch/zoom functionalilty do not seem to be there, at least not on my iphone when I tested it)
Just updated the repo to include a slide-box for the image gallery.
All the essential stuff was there, just need an id in the array of images to pass to the slide-box so it knows what slide should be active.
Yes, thank you very much. That is very helpful.
Just few notes I have to add. When enabling pagination, it seems the paginator is placed underneath the bottom navbar. Is there any way to control where it can be placed in the template file (other than using css) ?
It may be very useful to place such an example in a more prominent place on the website.
Right now, css is controlling where that pager is, so css will be the only way to do.
Thanks for putting this together - it helped a lot! However, when I try to use this code, there seems to be a problem with scrolling while zoomed in. If I zoom in to an image and then try to scroll horizontally, it scrolls to the next slide without first scrolling completely to the edge of the zoomed in image. This makes it very difficult to view a zoomed in corner of an image.
I realize this uses an older version of the framework, so I also tried it with the Beta 14 and still the same problem.
Am I misinterpreting something? I would like to have the same behavior as the IOS photo browser. Specifically, I’m trying to be able to zoom in to an image and then scroll the entire image horizontally before scrolling to the next slide.
Has anyone found a solution to “scrolling to the edge of the image before switching to the next slide”?
Yes, I have.
In the controller:
$scope.preventSlide = function () {
$ionicSlideBoxDelegate.enableSlide(false);
};
$scope.enableSlide = function () {
$ionicSlideBoxDelegate.enableSlide(true);
};
$scope.resetZoom = function () {
setTimeout(function () {
$ionicScrollDelegate.zoomTo(1, false, 0, 0);
}, 300);
};
$scope.checkScroll = function (index) {
var scrollPos = $ionicScrollDelegate.$getByHandle(index.toString()).getScrollPosition();
var scrollView = $ionicScrollDelegate.$getByHandle(index.toString()).getScrollView().__maxScrollLeft;
if (scrollPos.zoom > 1) {
if (scrollPos.left == 0 || scrollPos.left == scrollView) {
$scope.enableSlide();
} else {
$scope.preventSlide();
}
} else {
$scope.enableSlide();
}
};
In HTML:
<ion-slide-box active-slide="activeSlide" show-pager="false" style="height: 100%" on-slide-changed="resetZoom()">
<ion-slide ng-repeat="media in gallery">
<ion-scroll delegate-handle="image{{$index}}" direction="xy" locking="false" zooming="true" min-zoom="1" max-zoom="4" on-tap="hide.bars = !hide.bars"
class="animate modal-content" scrollbar-x="false" scrollbar-y="false" has-bouncing="false" on-scroll="checkScroll('image' + {{$index}})"
ng-class="hide.bars ? 'content-dark full' : 'content-light'">
<img ng-src="{{URL}}" class="modal-img"/>
</ion-scroll>
</ion-slide>
It´s a bit heavy i think and I haven’t tried it out in the wild yet but it´s works good as far as I have tested it. Hope it helps.
Thanks a lot @makkart. I’ll give this one a try.
Why not using F7’s photo browser in ionic?
README and sample here
Codepen http://codepen.io/kevincobain2000/pen/LpBKQM
Been searching for some ionic implantation like F7 for a year and landed on this page like thousand times and here is my thought.
Though Ionic is just awesome in many ways,
The Pinch to Zoom example is just not up to my usual expectations for ionic in general.
it lacks the most important feature:
it does not “reduce” the gaps btwn the edges and a picture but rather “increase” them as you zoom on it.
the result is an zoomed-in photo floating and gone somewhere outside of the screen with BIGGER GAPS to the edges taking up most of the view.
I hated it so much, tried God knows how many tricks, turned to framework 7 photo browser, which has turned out to be a little difficult to integrate with ionic.
ANYBODY has come up with a better ionic solution?
Hello. I’ve made a photo browser just like that for ionic 2.
Check it out https://github.com/nikini/ionic-gallery-modal