Trying to access photo swipe data from outside its scope (so as to eventually make an jsonp ajax call)

Greetings all, I don’t know if this has been answered before.

I am trying to do this.

var app = new Framework7({
	  // App root element
	  root: '#app',
	  // App Name
	  name: 'My App',
	  // App id
	  id: 'com.myapp.test',
	  
});

var ajaxObj = function(){
	photos = [{
			html: '<video src="assets/video/1.mp4" height="auto" controls="controls" onclick="this.paused ? this.play() : this.pause();"></video>',
			caption: "Hier Soir avec DJ Montana",
	}];
	return photos;
}

var myPhotoBrowserPopupDark = app.photoBrowser.create({
	
	ajaxObj,
	theme: 'dark',
        type: 'standalone'
	
});

The photo does not display but the caption those and it loads indefinitely. I want to do this because I am trying to load the data via ajax (cross-origin. I am implementing this with jquery, tried the framework7 app.request in vain)

hi,
i tested like this, and it works.

...
ajaxObj: function(){
        photos = [{
            html: '<video src="assets/video/1.mp4" height="auto" controls="controls" onclick="this.paused ? this.play() : this.pause();"></video>',
            caption: "Hier Soir avec DJ Montana",
        }];
        return photos;
        }
...
self.standalone = self.$app.photoBrowser.create({
  // photos: self.photos,
  photos: this.ajaxObj()
});
...

Do you have any error in the console?

1 Like

Thanks pvtallulah, but I am lost.

Please can I know to which object the method ajaxObj belongs in:

I have tried figuring it out in vain, I am sorry about this.
Please can you just edit this script:

and I will certainly find my way out.
Thanks again in advance.

Ok, here i make a jsfiddle:
jsfiddle

But, your code have some errors:
Here you assign an function to a var,

var ajaxObj = function(){
  photos = [{
    html: '<video src="assets/video/1.mp4" height="auto" controls="controls" onclick="this.paused ? this.play() :this.pause();"></video>',
    caption: "Hier Soir avec DJ Montana",
  }];
  return photos;
}

and when you create the PB you pass thar var (ajaxObj),

var myPhotoBrowserPopupDark = app.photoBrowser.create({
  ajaxObj,
  theme: 'dark',
  type: 'standalone'
});

The result of that params will be something like this

{
  ajaxObj: ƒ (),
  theme : "dark",
  type: "standalone"
}

but PB its expecting an object of params, including photo: []
so, if you see my jsfiddle, i declare PB as the docs says

var myPhotoBrowserPopupDark = app.photoBrowser.create({
  photos: ajaxObj(),
  theme: 'dark',
  type: 'standalone'
});

// Result
{
 "photos": [
  {
   "html": "<video src=\"assets/video/1.mp4\" height=\"auto\" controls=\"controls\" onclick=\"this.paused ? this.play() :this.pause();\"></video>",
   "caption": "Hier Soir avec DJ Montana"
  }
 ],
 "theme": "dark",
 "type": "standalone"
}

Check the fiddle, hope it can help you.

1 Like

Yes it works now. Thanks so much, I got twisted in my syntax, I definitely need to do some revisions.

1 Like