problemas de jquery con rotación de imagen y zoom

Estoy tratando de agregar funcionalidad a una página web que le permita al usuario rotar y acercar imágenes. He encontrado muchos complementos jquery que permiten hacer zoom. Ninguno que también haga rotación. Así que estoy tratando de usar un plugin jquery para hacer zoom/paneo junto con CSS para manejar la rotación, pero hasta ahora sin éxito. No parece importar si aplico el CSS antes de agregar el plugin jquery o después. O encadenándolos juntos (nuevamente, intenté rotar antes y después del complemento de zoom para el encadenamiento, y nada parece funcionar).problemas de jquery con rotación de imagen y zoom

de remisión, mi código es el siguiente:

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'); 

});

el plugin de zoom/pan que estoy usando es de aquí:

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

Fuente

2012-01-13 Scot

El problema es, SmoothZoom utiliza -webkit-transform para hacer zoom en la imagen y pone los datos como un estilo de línea en la imagen, de esta manera:

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

su estilo CSS que viene con su .rotate90left se sobrescribirán por la inlinestyle.

Una solución: Girar la envoltura, no la imagen misma ...

Fuente

2012-01-13 16:57:46 michelgotta

Qué quiere decir hacer algo como poner una etiqueta div alrededor de la imagen, y el uso de la clase '.rotate90Left' CSS al respecto? – Scot

Esa es una forma de arreglar esto. Envuelva un div alrededor y gírelo. Entonces debería rotar el contenido a. O tienes que ajustar el plugin jQuery ... – michelgotta

Ok ... tan cerca ... eliminé agregando la clase a la imagen directamente y usé un div, así: '$ ('# rotateMe'). AddClass (' rotate90Left ') '. Esto funcionó en su mayor parte. lo único es que los botones que forman parte del complemento también rotaron. Creo que podría ser capaz de solucionarlo si fuera necesario, pero si tienes alguna idea de cómo conseguir que los botones permanezcan en el mismo lugar, sería todo oídos. ¡Gracias una tonelada! – Scot

problemas de jquery con rotación de imagen y zoom

Respuesta

Cuestiones relacionadas