画像の回転とズームに関するjqueryの問題

画像を回転したり拡大したりする機能をWebページに追加しようとしています。私は、ズームを可能にする多くのjqueryプラグインを見つけました。しかしそれも回転をしません。だから私は回転を処理するためにCSSと一緒にズーム/パンニングのjqueryプラグインを使用しようとしていますが、これまでに失敗しました。 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を使用して、画像上にインラインスタイルとしてデータを置く、ありますこのように：

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

あなた.rotate90leftが付属していますあなたのCSSスタイルはinlinestyleによって上書きされます。

一つの解決策：

出典

2012-01-13 16:57:46 michelgotta

あなたは画像の周囲にdivタグを入れ、その上の '.rotate90Left' CSSクラスを使用してのようなものをやって意味ですかラッパーではなく、画像自体を回転させて...？ – Scot

これを解決するには1つの方法があります。 divを折り返して回転させます。したがって、コンテンツを回転させる必要があります。または、あなたはjQueryプラグインを調整する必要があります... – michelgotta

Ok ... close ...私は画像に直接クラスを追加することを取り除いてdivを使いました： '$（ '＃rotateMe'）。addClass（ ' rotate90Left '） '。これは大半の部分で機能しました。唯一のことは、プラグインの一部であるボタンも回転していることです。必要に応じて回避することができるかもしれないと思うが、ボタンを同じ場所に置く方法について考えているなら、私はすべての耳になるだろう。ありがとう、トン！ – Scot

画像の回転とズームに関するjqueryの問題

答えて

関連する問題