Bugün sizlere göstericeğim jQuery Plug’ini başlıktada söylediğim gibi resim üzerine geldiğinizde otomatik mouse ile gittiğiniz alana zoom yapıyor ve yeni bir pencerede onu gösteriyor. Kullanımı kolay bir eklenti tavsiye ederim 🙂

Mlens jQuery Plugin

Çalışır haldeki demosuna alttaki demo linkine tıklayarak ulaşabilirsiniz. jQuery 1.8.2 ile denenmiş kullanırken dikkat edin çakışma problemi yaşayabilirsiniz.

Mlens jQuery Demo

jQuery kütüphanemiz ve Mlens’i web sitemize ekliyoruz.

<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mlens-1.0.min.js"></script>

HTML Kullanımı

HTML’da resimi nasıl kullanacağınıza geldi sıra. Aşağıdaki gibi kullanmanız gerekiyor.

<img id="root_buyut" src="images/GreenMonster_640px.jpg" alt="green monster graffiti by Kotzian" data-big="images/GreenMonster_1280px.jpg" />

CSS (İsteğe Bağlı)

CSS Kodlarınıza aşağıdaki kodlarıda ekleyin.

#root_buyut {
	position: relative;
	width: 640px;
	height: auto;
	margin: 0 auto;
	border: 12px solid #fff;
	border-radius: 10px;
	box-shadow: 1px 1px 5px rgba(50,50,50 0.5);
	float: left;
}

jQuery Fonksiyonu

jQuery Çalıştırma Fonksiyonuda aşağıdaki gibi;

<script type="text/javascript">
$(document).ready(function()
{
	$("#root_buyut").mlens(
	{
		imgSrc: $("#root_buyut").attr("data-big"),	// path of the hi-res version of the image
		lensShape: "circle",				// shape of the lens (circle or square)
		lensSize: 180,					// size of the lens (in px)
		borderSize: 4,					// size of the lens border (in px)
		borderColor: "#fff",				// color of the lens border (#hex)
		borderRadius: 0					// border radius (optional, only if the shape is square)
	});
});
</script>

Sıra geldi Download etme kısmına onlarda aşağıdaki gibi;

Mlens sıkıştırılmış hali (tavsiye ederim): Download

Mlens sıkıştırılmamış hali : Download

Gzip olarak indirmek için: Download