5

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

Scot
  • 572
  • 1
  • 7
  • 27

1 Answers1

1

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...

michelgotta
  • 976
  • 8
  • 11
  • do you mean doing something like putting a div tag around the image, and using the `.rotate90Left` CSS class on that? – Scot Jan 13 '12 at 17:10
  • Thats one way to get this fixed. Wrap a div around it and rotate it. So it should rotate the content to. Or you have to tweak the jQuery Plugin... – michelgotta Jan 13 '12 at 17:14
  • Ok... so close... i removed adding the class to the image directly and used a div, like so: `$('#rotateMe').addClass('rotate90Left')`. This worked for the most part. the only thing is that the buttons that are part of the plugin also rotated. I think I might be able to work around that if need be, but if you have any thoughts of how to get the buttons to stay in the same place, I'd be all ears. Thanks a ton! – Scot Jan 13 '12 at 17:39