JQuery проблемы с поворотом изображения и масштабирования - PullRequest
Новая
       38

JQuery проблемы с поворотом изображения и масштабирования

5 голосов
/ 13 января 2012

Я пытаюсь добавить функциональность на веб-страницу, которая позволит пользователю поворачивать и увеличивать изображения. Я нашел много плагинов jquery, которые позволяют масштабировать. Ни один, который также делает вращение все же. Поэтому я пытаюсь использовать плагин jquery для масштабирования / панорамирования в сочетании с CSS для обработки поворота, но пока безуспешно. Кажется, не имеет значения, применяю ли я CSS перед добавлением плагина jquery или после. Или объединить их в цепочку (снова попробовал вращаться до и после плагина масштабирования для создания цепочки, и, похоже, ничего не работает).

для справки, мой код ниже:

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

});

Плагин Zoom / Pan, который я использую, отсюда:

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

1 Ответ

1 голос
/ 13 января 2012

Проблема в том, что SmoothZoom использует -webkit-transform для увеличения изображения и помещает данные в виде встроенного изображения, например: 

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

Ваш стиль CSS, который поставляется с вашим .rotate90left, будет перезаписан встроенным стилем.

Одно из решений: вращайте обертку, а не само изображение ...

...