how can I enlarge a picture in grid to full screen?

[AC]

Hi Staff, so glad that ios tester is back to work. I just tested my app and I got a problem there. I want to get some suggestions on the solution.

I created a 2Cols grid and put one cell to a image object. I successfully retrieved photos from database and they are listed in the grid. I want to click the image to enlarge it to full screen but not worked out.

Is there any way to temporary set a grid cell to full size so the photo can fit to the full screen?

The code I used to the image object is:

Code: Select all

   $(this).css('width', function(_ , cur){ 
           return cur === '279px' ? '100%' : '279px'; 
         });  // original width is 500px  
      $(this).css('height', function(_ , cur){ 
           return cur === '263px' ? '100%' : '263px'; 
         });  // original width is 500px

[Alena Prykhodko]

Hi,

No, this approach probably will not work, because you need to make it position absolute, thus all grid will be positioned absolute.

You need to mimic it.
1) Create invisible image
2) Fill it with image you would like to enlarge
3) On click enlarge it instead of the cell.

Or you can try to enlarge image in the cell instead of cell, but don't forget to make it's position absolute before enlargement.

[AC]

Hi Alena, can u advice me what codes I should use to make this happen? I tried to approach ur 2nd suggestion but the image just cant break the grid cell's margins.

[Maryna Brodina]

Hello!

I am sorry for delay! Unfortunately custom JS/CSS is outside the scope of our support. You may consider purchasing Advisory Pack to get more in-depth help on this question. Here is more information about Advisory Pack http://appery.io/services/#Advisory_Pack