Menu
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
458
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...
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
