Resim döndürme ve yakınlaştırma ile ilgili jQuery sorunları

Kullanıcının görüntüleri döndürmesini ve yakınlaştırmasını sağlayan bir web sayfasına işlevsellik eklemeyi deniyorum. Yakınlaştırmaya izin veren birçok jQuery eklentisi buldum. Hiçbiri de dönüş yapmaz. Bu yüzden, döndürme işlemi için CSS ile birlikte yakınlaştırma/kaydırma için bir jquery eklentisi kullanmaya çalışıyorum, ancak şu ana kadar başarısız oldu. CSS'yi jquery eklentisini eklemeden önce mi yoksa sonra mı uygulamam önemli değil. Ya da onları birbirine zincirleme (yine, zincirleme için yakınlaştırma eklentisinden önce ve sonra dönmeyi denediniz ve hiçbir şey işe yaramadı). referans içinResim döndürme ve yakınlaştırma ile ilgili jQuery sorunları

, benim kod aşağıda:

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

});

i kullanıyorum zoom/pan eklentisi buradan geçerli:

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

kaynak

2012-01-13 Scot

sorundur, SmoothZoom resmin içine yakınlaştırmak için -webkit-transform kullanır ve görüntü üzerinde bir satır içi tarzı gibi verileri koyar, senin .rotate90left inlinestyle tarafından yazılır ile gelir

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

CSS'niz tarzı: Bu gibi.

Bir çözüm:

kaynak

2012-01-13 16:57:46 michelgotta

resmin etrafına bir div etiketi koyarak ve bu konuda '.rotate90Left' CSS sınıfı kullanmak gibi bir şey yapıyor demek oluyor sarmalayıcı değil görüntüyü kendisi ... döndürün? – Scot

Bunu düzeltmenin bir yolu budur. Etrafına bir div sarın ve döndürün. Yani içeriği döndürmeli. Ya da jQuery Plugin'i düzeltmeniz gerekiyor ... – michelgotta

Tamam ... çok yakın ... sınıfı doğrudan görüntüye eklemeyi kaldırdım ve bir div kullanıyorum, şöyle ki: '$ ('# rotateMe'). AddClass (' rotate90Left ')'. Bu çoğunlukla çalıştı. tek şey, eklentinin parçası olan düğmelerin de döndürülmesidir. Gerektiğinde çalışabilirim diye düşünüyorum, ama düğmelerin aynı yerde kalmasıyla ilgili düşünceleriniz varsa, tüm kulaklarım olur. Teşekkürler bir ton! – Scot

Resim döndürme ve yakınlaştırma ile ilgili jQuery sorunları

cevap

İlgili konular