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

Я пытаюсь добавить функциональность веб-страницы, которая позволит пользователю поворачивать и увеличивать изображение. Я нашел много плагинов jquery, которые позволяют масштабировать. Тем не менее, они также вращаются. Поэтому я пытаюсь использовать плагин jquery для масштабирования/панорамирования в сочетании с CSS для обработки вращения, но пока безуспешно. Кажется, не имеет значения, применяю ли я CSS перед добавлением плагина jquery или после него. Или связать их вместе (опять же, попробовал оба вращения до и после плагина масштабирования для цепочки, и ничего не работает).Проблемы с 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'); 

});

масштабирования/панорамирования плагин я использую отсюда:

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

источник

2012-01-13 Scot

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

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

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

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

источник

2012-01-13 16:57:46 michelgotta

вы имеете в виду, делая что-то вроде положить Div тег вокруг изображения, а также с помощью '.rotate90Left' CSS класс по этому поводу? – Scot

Это один из способов сделать это исправленным. Оберните div вокруг него и поверните его. Поэтому он должен повернуть содержимое. Или вам нужно настроить плагин jQuery ... – michelgotta

Хорошо ... так близко ... Я удалил добавление класса к изображению напрямую и использовал div, например: '$ ('# rotateMe'). AddClass (' rotate90Left ') '. Это работало по большей части. единственное, что кнопки, которые являются частью плагина, также вращаются. Я думаю, что, если понадобится, я смогу обойти это, но если у вас есть какие-то мысли о том, как заставить кнопки оставаться в одном месте, я буду все уши. Благодаря тонну! – Scot

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

ответ

Смежные вопросы