圖像旋轉和縮放jQuery的問題

我想添加功能的網頁，將允許用戶旋轉和放大圖像。我發現了許多允許縮放的jquery插件。儘管如此，也沒有任何旋轉。所以我試圖使用jQuery插件與CSS一起縮放/平移處理旋轉，但迄今爲止失敗。在添加jQuery插件之前或之後應用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'); 

});

我使用縮放/平移插件就是從這裏開始：

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

來源

2012-01-13 Scot

的問題是，SmoothZoom使用-webkit-transform放大到畫面，並把數據作爲一個內嵌式的圖像，像這樣：

隨附 .rotate90left將由inlinestyle覆蓋

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

你的CSS樣式。

一個解決方案：旋轉包裝，而不是圖像本身...

來源

2012-01-13 16:57:46 michelgotta

你的意思做的事情就像把一個div標籤的圖像周圍的，並且使用了'.rotate90Left' CSS類？ – Scot 2012-01-13 17:10:45

這是一個方法來解決這個問題。包裹它並旋轉它。所以它應該旋轉內容。或者你必須調整jQuery插件... – michelgotta 2012-01-13 17:14:22

好吧......太近了......我直接刪除了向圖片添加類，並使用了一個div，如下所示：'$（'＃rotateMe'）。addClass（' rotate90Left'）'。這大部分工作。唯一的是插件的一部分按鈕也旋轉。如果需要，我想我可以解決這個問題，但如果你對如何讓按鈕保持在同一個地方有任何想法，我會全神貫注。萬分感謝！ – Scot 2012-01-13 17:39:18

圖像旋轉和縮放jQuery的問題

回答

相關問題