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