Home/ Questions/Q 7078681
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T06:34:40+00:00

I am trying to add functionality to a webpage that will allow the user

  • 0

I am trying to add functionality to a webpage that will allow the user to rotate and zoom in on images. I’ve found many jquery plugins that allow for zooming. None that also do rotation though. So I’m trying to use a jquery plugin for zooming/panning in conjunction with CSS for handling the rotation, but so far unsuccessfully. It doesn’t seem to matter if I apply the CSS before adding the jquery plugin, or after. Or chaining them together (again, tried both rotating before and after the zoom plugin for the chaining, and nothing seems to work).

for reference, my code is below:

HTML:

<body>
    <script src="scripts/jquery-1.6.4.js" type="text/javascript"></script>
    <script src="zoom_assets/jquery.smoothZoom.min.js" type="text/javascript"></script>
    <script src="scripts/PictureViewer_SmoothZoom.js" type="text/javascript"></script>

    <img src="images/leaftemple11680.jpg" id="leafTemple" />
</body>

CSS:

.rotate90Left{
    /* for firefox, safari, chrome, etc. */
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    /* for ie */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

JavaScript:

//jquery chain - add CSS second
$(document).ready(function(){

    $('#leafTemple').smoothZoom({
        width: 480,
        height: 360
    }).addClass('rotate90Left');

});

the zoom/pan plugin i am using is from here:

http://codecanyon.net/item/smooth-zoom-pan-jquery-image-viewer/511142

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is, SmoothZoom uses -webkit-transform to zoom into the picture and puts the data as an inline-style on the image, like this: 

    <img style="-webkit-transform: translate3d(0px, 0px, 0px) scale(0.46875);" />

    Your CSS style that comes with your .rotate90left will be overwritten by the inlinestyle.

    One solution: Rotate the wrapper, not the image itself…

    • 0