search

scaleflex / js-cloudimage-360-view

Engage your customers with a stunning 360 view of your products. Any questions or issues, please report to https://github.com/scaleflex/js-cloudimage-360-view/issues
Other
2.02k stars 232 forks source link

responsitivity #123

Closed flow-motion closed 2 years ago

flow-motion commented 2 years ago

Hi Amr, sorry to post it as an issue - - unfortunately i have no idea of how to use github correctly - and how to get in touch with you directly. First of all : thanks a lot for your work and that wonderful script for the 360 Productviewer. It is absolutely wonderful - also your ongoing changes - even, if i do not understand half of it.

MY issue as a USER of this is the multi device options. Any idea how to make it always fit perfectly in mobile / tablet / screen size? I mostly drop into scrollbars or in tiny images and large white areas :(

It would be great, to talk to you - or to get feedback. You can also write a mail to me, if you want to just take the info at flow-motion dot eu

thanks again for the script you already did. Take care

amrw-js commented 2 years ago

Hi @flow-motion, make sure you are using the latest version of the plugin. You can set data-ratio to adjust the height in different screens via media queries. if it's not provided the ratio should be the image aspect ratio. don't hesitate to write me back if you still face the same issue.

flow-motion commented 2 years ago

Thank you so much for your response. I updated the js-cloudimage-360-view.min.js to latest version.

I then used that code:

<!Doctype html>

xyz

Unfortuntaly the image is not fitting "automatically" to the screen size. When i play around a bit with width=" 90vb" - i am almost there - but in mobile version it is moved a little to the right and... of course -.... the definition ist not correct at all ...

Images are 1600x1600 normally in my case.

Any idea how to make that look good?

amrw-js commented 2 years ago

@flow-motion you should remove data-ratio to set the canvas dimension relative to the images aspect ratio if the previously mentioned solution didn't work, try to set the ratio in different media. examples 

<div
   class="cloudimage-360"
   id="gurkha-suv"
   data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
   data-filename-x="orange-{index}.jpg"
   data-amount-x="73"
   data-ratio='{
      "576": "1.3",
      "768": "2.22",
      "992": "2.23",
      "1200": "3",
      "2400": "3.2"
   }
></div>

codeSandBox

flow-motion commented 2 years ago

Hi Amr - i am sorry , but i am not that genious, you are..

Data ratio describes the relativity between width and length of the image - right? so if the image is 800 wide and 400 high - we have a ratio of 2 if it is 400 wide, 800 high we have 0.5

data-ratio='{ "576": "1.3", "768": "2.22", "992": "2.23", "1200": "3", "2400": "3.2" }

for explanation: "576" is screen width? - 1.3 is what?

amrw-js commented 2 years ago

@flow-motion sorry for my late reply, currently ratio represents the width/height, so if I have a container of width 1000px and I want the height to be 500px so the ratio should be 2

flow-motion commented 2 years ago

Okay - i wll try it that way. Thanks man.