Advice for displaying a full screen image

1

Hi guys.

I’d love a little advice if anyone has the time!

I have an app which shows a list of thumbnails with some data. When the user taps on a list item I go to a new state where I wish to show the image in full screen and show the image title and a few other things.

The problem I am having is that I do not know how to display the image full screen in a consistent manner. Depending on the aspect ratio of the image, it may or ay not take up the full view. Ideally I’d love for it to take up the full view but without stretching it.

If this isn’t possible I’d like an entirely black background where I can center the image.

I cannot achieve this either, I’ve tried adding a black background to the ionic-content in CSS but it seems that only extends to just under the image, since the image container isn’t full screen, the black background doesn’t extend all the way to the bottom of the view.

I also tried using a popup to display the image, but I cannot get that to work in a full screen setting either. The popup starts from the center of the screen and shows an image which far extends the borders of the screen.

Any advice would be much appreciated.

Kind regards,
Ed

2

Here you go my friend, try this http://codepen.io/rdelafuente/pen/tJrik

Full view, without the code: http://codepen.io/rdelafuente/full/tJrik/

Modify as you need :smiley:

15 Likes
3

Rob buddy, as always, thank you sir, thank you very very much!!!

4

Very nice examples :smile:

5

Well done! Nice example and very easy to follow!

6

very nice,thinks,thinks

7

Thanks for that example! It would be great if it was possible to drag right/left in order to view next/previous images. Do you know if it’s possible? I appreciate your help.

8

Yes, it’s possible :smiley: You can use the ion-slide-box directive.

Code: http://codepen.io/rdelafuente/pen/lteGc

Full: http://codepen.io/rdelafuente/full/lteGc/

9 Likes
9

Sorry to resurrect this one, but :

The last solution looks good on a large screen, but on a smaller one the backdrop is not triggered, so the comments are barely readable if the background is white.

I tried to put a backdrop manually, and messed the css a bit but could not find how to do that. Any ideas ?

Thanks!

10

Hey!

You are right. Looks like in the latest version the backdrop is only visible for widths equal or greater than 680px. I’ve updated the example to fix that.

Just add these lines to your CSS:

 /* Fix modal backdrop for smaller devices */
@media (max-width: 679px) {
  .active .modal-backdrop-bg {
    opacity: .5;
  }
  .modal-backdrop-bg {
    -webkit-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
    background-color: #000;
    opacity: 0;
  }
}
1 Like
11

beautiful, thanks!

this may be a bit off-topic, but in your example using the ion-slide-box the first picture is always displayed first. I’d like the popup to open on the correct slide, i.e. when the user taps the 3rd photo of a list, the popup starts in the 3rd photo index.

I tried using $ionicSlideBoxDelegate.slide after the popup is shown, without success: the folowing error happens:

 TypeError: Cannot read property 'length' of undefined
    at circle

Any suggestions ?

12

Mmm that’s weird.

I’ve updated the example with the required functionality. Let me know if you have any other issues.

1 Like
13

Oops. I put all methods in the .then() callback called when the $ionicModal.fromTemplateUrl completes. Re-organizing my code fixed the problem. Thanks for the code update!

1 Like
14

This caches the images. when i open the next image, i see the previous image for a couple of seconds. how do we fix this?

15

Hi,

Make sure upon destroying or closing modal you set the image variable (i.e. $scope.imgSrc = undefined).