3 Replies Latest reply on Oct 23, 2012 12:47 PM by beverly

    Snippet to rotate image in a Web Viewer


      [Sorry if you get this twice. I think I posted to the wrong forum earlier.


      I'm trying to figure out the code I can add to a data URL in a Web Viewer to rotate images. I'm sure there's a simple short line—something like...


      style="image-orientation: 90deg"


      ... but of course that doesn't seem to work. If you know what it should be, would you please add it to the following code...



      "data:text/html,<img src="" & PHO::File Path & "" width="" & "100%" & "" />"


      I ask that because messing up a single character will cause it to fail and debugging these WVs can be a nightmare. (I can hear you nodding.)


      By the way, I'm looking for a way to do this without plug-ins that rotate the original image or lengthy CCS. When it's all done, I imagine using some kind of radio button or scripting to control text in a field which will be used as part of the text html, so I can rotate the WV image regardless of what orientation the picture was taken.


      Thanks in advance.


      Jonathan Stars

      Data Design Pros, LLC

        • 1. Re: Snippet to rotate image in a Web Viewer

          You can try this bit of CSS3, Jonathan

          img style="transform:rotate(90deg);"


          Reference: http://www.w3schools.com/cssref/css3_pr_transform.asp (there's a "try-it" section to test the CSS)


          • 2. Re: Snippet to rotate image in a Web Viewer

            Thanks for the hint, Beverly. I couldn't seem to make that work in my line of code. But when I went to the site your recommended, I found a very clever web slider tool. It wasn't quite what I was looking for, but taking out the slider led me to the following code which works beautifully.



            <!DOCTYPE html>





            {-ms-transform:rotate(" & WebViewer::Rotation & "deg); /* Firefox */

            -moz-transform:rotate(" & WebViewer::Rotation & "deg); /* Firefox */

            -webkit-transform:rotate(" & WebViewer::Rotation & "deg); /* Safari and Chrome */

            -o-transform:rotate(" & WebViewer::Rotation & "deg); /* Safari and Chrome */

            transform:rotate(" & WebViewer::Rotation & "deg);}




            <div id=\"div1\"><img src=\"" & WebViewer::File Path &  "\" width=\"" &  WebViewer::Width  &  "\" /></div>




            The Rotation field uses a radio button for 90 degree rotations and the width uses radio buttons for percentages.


            Jonathan Stars

            • 3. Re: Snippet to rotate image in a Web Viewer

              Yes, the site was meant to be the "answer" as not all browsers support the "standard" of transform:rotate (yet!). You needed the other "options", as well. I just didn't know what browser, so use all of them!