jQuery ile Resim Üzerine Gelindiğinde Otomatik Zoom yapma 0

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 🙂

https://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

50 Ücretsiz Kurt Resimleri – Gri, Beyaz ve Bozkurt Fotoğrafları 0

Köpekgiller en yaygın ve iri türü olan Kurtlar gri, beyaz ve bozkurtlar olarak farklı türleri bulunmaktadırlar. Gri kurt dünya genelinde en çok bilinen kurt türüdür. Atalarımızında benimsediği kurtlar Amerikada da sıklıkla görülmektedirler.

Geceleri ulumasıyla bilinen kurt genellikle ormanlık alanlarda yaşarlar. Sürü halinde ve yalnız olarakta yaşayan kurtlar vardır. Her haliyle korkutucu olan kurtların en büyük rakibi kangal köpeğidir. Neyse sözü fazla uzatmadan sizlere en korkutucu ve ürkütücü Kurt resimlerini paylaşıyorum.

50 Ücretsiz Kurt Resimleri – Gri, Beyaz ve Bozkurt Fotoğrafları

HD çözünürlükteki Kurt resimlerini indirmek tamamen ücretsizdir. İnternetten sizler için araştırıp bulduğum 50 tane fotoğrafı sizlerle paylaşıyorum. Paylaşımımda Gri kurt, beyaz kurt ve bozkurt resimleri bulunmaktadır. Genellik Full HD çözünürlükteki kurt resimlerine yakından bakabilirsiniz.

İLGİNİZİ ÇEKEBİLİR: Sürüngen Hayvanların HD Resimleri

İLGİNİZİ ÇEKEBİLİR: Dünyanın En Büyük Kedi Resimleri

25 Robot HD Duvar Kağıtları 0

Robot sevenler için birbirinden farklı Robot resimlerini paylaşıyorum. 25 tane yüksek çözünürlükteki Robot Duvar Kağıtları masaüstü, dizüstü ve akıllı cihazlarınız için en iyi arkaplan resimleridir.

Farklı karakterlerde olan Robot HD Resimlerini indirmek tamamen ücretsizdir. Sağ tıklayıp farklı kaydederek arşivinize ekleyebilirsiniz.

İLGİNİZİ ÇEKEBİLİR: Büyüleyici 30 Gece Manzarası

İLGİNİZİ ÇEKEBİLİR: 35 Adet 3D Android Telefon Duvar Kağıtları

Most Popular Topics

Editor Picks