MENU

jQuery ile Resim Üzerine Gelindiğinde Otomatik Zoom yapma

Anasayfa » jQuery » jQuery ile Resim Üzerine Gelindiğinde Otomatik Zoom yapma
jQuery ile Resim Üzerine Gelindiğinde Otomatik Zoom yapma

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 :)

http://3.bp.blogspot.com/-QV1wrOVvpCY/UNs4kHMtnvI/AAAAAAAANWo/IiymIaf_QUE/s1600/magnifying+glass+by+musings.jpg

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

Rooteto Teknoloji Blogu

Rooteto WordPress, Sosyal Medya, Teknoloji, HD Resimler ve Video paylaşımında bulunan bağımsız olarak çalışan online haber teknoloji sitesidir.

Yaklaşık 1 Milyondan fazla tekil aylık ziyaretci ile Rooteto'yu büyük yapan teknoloji topluluklarıdır. 2009 yılında kurulan Rooteto'nun genel merkez ofisi İzmir / Bornova'dadır.