JeremyHeleine / Photo-Sphere-Viewer

A JavaScript library to display Photo Sphere panoramas.
849 stars 937 forks source link

How to embed PSV in responsive templates? #120

Open chk1xn opened 3 years ago

chk1xn commented 3 years ago

Hi all and apologies is this is a dumb Q but I'm completely stuck for days now and appreciate any hints anyone could give...

I'm trying to add PSV to my existing pages' design based on skel. So far I only succeeded in showing panoramas embedded in plain html pages, using simple CSS like in "example.html" included in the package, ie one view per page only.

Once I add them to my actual CSS and JS framework/design, preferrably a couple of them, neatly arranged on the skel grid, no panorama shows up. The div remains empty and I have no idea how to embed more than one of them.

Many thanks for any hints/examples pointing me in the right direction...

chk1xn commented 3 years ago

Update: I've managed to embed one panorama per page, using my template/design. However I still have no clue, how to add more than one panorama picture on one page.

Currently I'm working with the example code which is using one static name for the containing div. I'm sure there is an elegant way to pass the name of an individual panorama picture to JS to build the respective containers (or any other trick) but I'm out of ideas...

AdamMiltonBarker commented 2 years ago

Update: I've managed to embed one panorama per page, using my template/design. However I still have no clue, how to add more than one panorama picture on one page.

Currently I'm working with the example code which is using one static name for the containing div. I'm sure there is an elegant way to pass the name of an individual panorama picture to JS to build the respective containers (or any other trick) but I'm out of ideas...

How did you sort out dynamic height ?

chk1xn commented 2 years ago

I didn't. For the sake of getting my pages online, I've decided to do one landing page with thumbnails for all panos and when clicking on one, it launches a new page that shows only this one pano. Sorry. FWIW, I'm using skel for my responsive pages and those DIVs (sized in u-nits) work perfectly for such panos. So I just specify the width and the height gets automatically adjusted to it...