Web Günlüğü

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

• 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) .

 // 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);
			}
					
			);
		
		}
 
    });

	
});