Jquery ile dinamik resim boyutlandırmak ve rollover efekti ile resmin tam boyutunu otomatik açılan katmanda görmek

Başlığın biraz karmaşık oldu biliyorum :) fakat burada web masterın kullandığı bir olaydan söz ediyorum. örnekle anlatayım:

Sayfada bir kaç tane sayfa dışına taşan resimler var diyelim. Bu büyük boyutlu resimleri dinamik olarak boyutlandırmak ya da küçültmek istiyorsunuz ve bunu kullanıcı tarafında JavaScript ile yapmak istiyorsunuz. Ayrıca küçültülen resimlerin üzerine fare imleci olduğunda (rollover) tam boyutlu hali görünsün diyorsanız aşağıdaki Jquery kodumuz tam istediğimiz işi görecek. Jquery ile bu işi halletmek çok kolay.

Jquery kodumuz basit olarak iki temel olayı otomatik olarak yapacak:
  • Sayfadaki tüm resimleri tarayacak.
  • Maximum boyutu aşan resimler için tam boyutlu hali koyulacak ayrı bir katman yaratacak ve bu katmana fare imleci küçültülmüş resim üzerine geldiğinde görünecek (rollover) .


Daha iyi anlaşılması için aşadaki resimde Jquery dinamik resim boyutlandırma scriptin çalışır haldeki haline bakabilirsiniz:

Fare imleci buyuk boyutlu resim üzerinde iken tam boyutlu hali açılan katmanda gösteriliyor:

jquery ile dinamik resim boyutlandırma ve rollover


Fare imleci küçük boyutlu resim üzerinde iken katman açılmıyor yani tam istediğimiz gibi :

jquery ile dinamik resim boyutlandırma ve rollover 2
İşte tüm işi yapan Jquery kodumuz (Satır satır yorumlayarak ne yaptığımızı anlatmaya çalıştım) (Jquery ile dinamik resim boyutlandırmak) :
 // Tüm sayfa ve resimler yüklenince   fonksiyonlar tetiklenecek
 $(window).load(function() {

	// tüm img elamanlarını bulup özellik ve olaylar ekliyoruz. 
    $('img').each(function() {
		// Gösterilecek maximum resim genişliğini burada yazıyoruz
        var WidthMax = 350; 
        // Gösterilecek maximum resim yüksekliği burada yazıyoruz
		var HeightMax = 300;    
        // Resmin orijinal genişliğini al
		var width = $(this).width();
		// Resmin orijinal yüksekliğini al
        var height = $(this).height();
 
        // maximum genişlik veya yüksekliği aştığını kontrol et
        if((width > WidthMax) || (height > HeightMax)){

			// Resmin aşılan sınırına göre yüksekliği ya da genişliği değiştir.
			// Resmin oranı otomatik olarak korunacaktır.
			if (width > WidthMax)
				$(this).css("width", WidthMax); 
			else
				$(this).css("height", HeightMax);
              
		$(this).mouseover( function () {
			// Fare imleci resmin üzerine gelirse id özniteliği out olan bir katman oluşturup
			// body elamanıa ekleyecek kodu buraya yazıyoruz.
			
			// oriijinal boyutlara sahip resmi barındıracak katmanın eklenip eklenmediğini 
			// kontrol ediyoruz.
			if ( $('#out').length == 0 )
				{			
				// gösterilecek katmanı oluşturup direk body elemanına ekliyoruz.
				// oluşturulan katmanın içine tam boyutlu resmi ekiliyoruz.
				$('body').append("<div id=\"out\" > <img src=\""+$(this).attr("src")+"\" >  </div>");
				$('#out').css("position","absolute").css("border","3px solid gray");			
				}
			
			}
			
			).mouseout( function () {
				// fare resmin üzerinden kalkınca açılan katmanı yok et.
				$('#out').remove();					
			}
			
			).mousemove(function(e){
				// Fare imleci resmin üzerinde gezinirken açılan katmanın pozisyonunu
				// değiştirecek kodu buraya yazıyoruz.
			
				// farenin kordinatlarını al
				var x=e.pageX ;
				var y=e.pageY ;
				// açılan katmanın posizyonunu fare imlecinin pozisyonuna göre değiştir.
				$('#out').css("top", y+15);
				$('#out').css("left", x+15);
			}
					
			);
		
		}
 
    });

	
});

 


Kodumuz aslında göründüğünden daha anlaşılır. Kodu biraz daha modifiye edip animasyon ekleyebilirsiniz. Örneğin çalışır haline buradan bakabilir buradan örneğini indirebilirsiniz.
yazan Zülküf Küçüközer tarih   16th August 2009
primary key words   jquery | Resim | Dinamik | Boyutlandırma okunma  11432
secondary key words  Javascript
writing nefer writing 27th January 2012
Makale için teşekkürler, işime yaradı.