Zoom and rotate image

Support
#1

Hi,
ever since using Pro I’ve challenged myself to accomplish things with a minimum of custom coding, although I’m quite capable in PHP/JS/CSS. So far I’ve been able to achieve that for a dew years, apart from some custom CSS.

Recently I created this page which has four buttons that control the display of the image: zoom in or out, rotate left and rotate right. As it was just a POC, it isn’t perfect. For example: when change the images dimensions, the div holding the image isn’t resizing, although it’s set to auto-width and auto-height.
I could write more custom code for this, but I was wondering, given all the amazing code that has been build already into Pro, what I do to be able to rotate and zoom the image with as minimum of custom-code possible.

Thanks in advance for any pointers into interesting hints that will help me solve this without custom coding :grinning:

#2

Hello @dhunink,

Thank you for the inquiry.

Unfortunately, this won’t be possible without at least a custom script or some custom css. You’ll need to add a click event listener to the anchor tags or buttons to toggle class names (e.g., rotate-90-deg ) or adjust the attributes and styles of the target element. It looks like you’ve already started implementing this with your this.rocketonclick function on the anchors. You will have to extend this to achieve the desired functionality.

You might find this APi useful: https://theme.co/docs/rivet-api

Best regards,
Themeco