Geek Answers Handbook

Jquery problems with image rotation and scaling

I am trying to add functionality to a web page that will allow the user to rotate and enlarge the image. I found many jquery plugins that allow you to scale. However, they also rotate. Therefore, I am trying to use the jquery plugin to scale / pan in combination with CSS to handle rotation, but so far without success. It doesn't seem to matter if I apply CSS before adding the jquery plugin or after it. Or combine them together (again, I tried both rotations before and after the scaling plugin for the chain, and nothing works).

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'm using is here:

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

+5
1

, SmoothZoom -webkit-transform , :

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

CSS, .rotate90left, inlinestyle.

: , ...

+1

More articles:


All Articles