Forum | Appery.io

Maryna,

"but on service success event retrieve all images from response and transmit them to photoswipe"

Could you list a step by step for me? I'm just not sure how exactly to do this, and I know others need help with this....

Thanks!
Joe

Hello! Sorry for delay. Working on it.

Hey thanks so much!

Hi Joe,

Here is a tutorial for you on how to create PhotoSwipe album from REST service:

1) Follow the steps 1-5 from 'Creating UI' section: http://docs.appery.io/tutorials/addin...

2) Create a service that returns an array of references to image.

3) On a page, add Grid component containing Image component (we'll hide it later).

4) Create a mapping from service to the Grid as it's shown here: http://docs.appery.io/documentation/u...

5) Add the following JS code to image mapping:
codeAppery("html_2").append(
'<ul class="gallery">' +
'<li>'+
'<a href="' + value + '">' +
'<img alt="Image 001" src="' + value + '" &#47;>' +
'<&#47;a>' +
'<&#47;li>' +
'<&#47;ul>'
);/codewhere html_2 is a html component name.

6) On service Complete event run the following code:
code$("[name=mobilegrid_5]")&#46;hide();
var photoSwipeInstance = Appery("startScreen")&#46;find("ul&#46;gallery a")&#46;photoSwipe({}, "startScreen");/codewhere mobilegrid_5 is a Grid name,
startScreen is a page name.

Katya,

Wow! It works! Thank you so much! This will probably help a lot of other people as well!

Now I just need help with two things:

1) How to make it list horizontally as well as vertically, say 4X4...

2) How to cache the list and limit it to say 10 images per page...

Thanks again!
Joe

Katya,

To clarify, when I say cache to limit the list by 10, I understand the query where parameter so my worry is repeated images...

I've noticed the list service retrieves database elements out of order, so if I included a numeric navigation at the bottom, or people were zoomed in and scrolling, how should I cache the list so it doesn't reproduce images on the next page?

Thanks again,
Joe

Hello!
1) Could you clarify what 4x4 means? Do you mean images preview to look like this http://www.photoswipe.com/latest/exam...? Then the same as in example create CSS property for width li in gallery pre&#46;gallery li {
float: left;
width: 25%;
}/pre
2) [quote:]"list service retrieves database elements out of order"[/quote] you can specify sorting order http://docs.appery.io/documentation/b...

Maryna,

Thanks again for your help. Changing .gallery li using your example did not work, as .gallery li is already there as 33.33334% in the example.

I made it work by changing .gallery to display:inline.

However some of the pictures have different height, so I may need to change it from auto to a certain %.

Concerning limiting the list service, how would I implement js code that would read when someone scrolls down on their phone, and load more as needed? Meaning like the newsfeed on Facebook, or any other page that loads more content as people scroll down..

Thanks again,
Joe

Hello! Create JS asset with the following code:
pre$(window)&#46;on({
scrollstop: function() {
if ($&#46;mobile&#46;activePage&#46;attr("dsid") == "gallery") { &#47;&#47;use this code only for screen with name "gallery"
if ($(window)&#46;scrollTop() == $(document)&#46;height() - $(window)&#46;height()){
alert('need new data');
&#47;&#47; run your code here
}
}
}
});/pre

Maryna,

Awesome I'll try the js code and let you know how it works.

Regarding "//run your code here", do you mean a service url to the database?

Also, on iOS7 the pictures do not list horizontally as they should, and I cannot access the camera service.... I realize only iOS6 and up can call on the native camera service in the safari browser.

The pictures list horizontally and vertically as they should on my galaxy s in chrome browser and natively. However any of the older operating systems running the app in a browser seem to fail at login and fail at adding a counter to the database....