jQuery ile Resim Önizlemesi

jQuery ile yapılmış birçok galeri ve resim özellikleri kodlamalarının yanında sanırım bu biraz ufak tefek ve gösterişsiz kalacak.Ama resimlerin üzerine gelindiğinde ortaya çıkan bir popup ve bunu kullanmak isteyen bazı arkadaşlar olabilir. Keza benim böyle bir ihtiyacım oldu ve oturdum bu kodlarla ilgilendim. Buraya yazma nedenim de isteyen faydalanabilsin diyedir. Zamanında tooltip ile ilgili bir jQuery plugini vardır elimde. Şimdi ise ufak bir galeri scripti var :D Neyse. Bu script size galeri olarak ya da sayfalarınızda kullandığınız thumbnail (ufak resim) resimlerinizin üzerine gelindiğinde büyük hallerinin ortaya çıkmasını ve görünebilir hale gelmesini sağlıyor. Dediğim gibi ufak bir galeri oluşturabilirsiniz bu kodlarla.

Bir diğer özelliği de büyük kodlamalardaki gibi açılan popup alanının fare imlecine olan uzaklığı. Yani siz resmin üzerine gelidğinizde popup direk resmi kapatmıyor, fare imlecinin yanında açılarak her iki resminde görünmesini sağlıyor.Kodlara geçelim isterseniz.

Öncelikle javascript kodlarımızı görelim;

Kodlar;

//Resim üzerine gelince açılan popup
//Kodu düzenleyip geliştiren : Serkan Algur
//Web Sitesi: http://wpadami.com
//Genel amaçla kullanınız. Geliştirmek size kalmış.

this.resimonizleme = function(){
    /* Düzenleme */

        xOffset = 10;
        yOffset = 30;
        // Bu iki ayar görüntülenecek popup alanının  fare imlecine olan uzaklığını değiştirir.
        // İstediğiniz Şekle Getirmek için oynamalar yapaiblirsiniz.

    /* Düzenleme Sonu */
    $("a[rel*=popupacil]").hover(function(e){
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br />" + this.t : "";
        $("body").append("<p id='onizleme'><img src='"+ this.href +"' alt='Önizleme Resmi' />"+ c +"</p>");
        $("#onizleme")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px")
            .fadeIn();
    },
    function(){
        this.title = this.t;
        $("#onizleme").remove();
    });
    $("[rel*=popupacil]").mousemove(function(e){
        $("#onizleme")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });
};

// Kodları başlangıçta çağıralım
$(document).ready(function(){
    resimonizleme();
});

Yukarıdaki kodlarda görebileceğiniz gibi bir ayar alanı var. Buradan x ve y ofsetlerini ayarlayarak açılacak popup alanının fare imlecine uzaklığını ayarlayabiliyorsunuz. Bunu seçmek size kalmış. Ve diğer ayarlar da görebileceğiniz gibi resmin yolunu belirten a alanına bir rel kod atadım. Bunun adını da popupacil olarak belirledim. buraları dilediğiniz gibi değiştirebilir, benim rel olarak atadığım alanları class olarak da düzenleyebilirsiniz. Bu değişiklği yaptığınızda aşağıdaki HTML kodlarında da gerekli değişiklikleri yapın. Bir de fadeIn değer olarak sabit bir değer bıraktım . Bunun iki opsiyonu var slow ve fast. slow opsiyonu 600ms, fast opsiyonu 200ms, benim bıraktığım gibi kalırsa varsayılan gecikme değeri olarak 400ms belirlenir. Bunu değiştirmek için tırnak işaretlerini kullanarak fadeIn(“slow”) ya da fadeIn(“fast”) olarak belirtebilirsiniz.

Sonra da html dosyamızı oluşturalım ve kodlarımızı çağıralım.

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery ile resim önizlemesi</title>
<meta name="description" content="jQuery ile resim önizlemesi"/>
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script>
<script src="onizleme.js" type="text/javascript"></script>

Önce kodlarımızı çağıralım. jQuery kaynağı olarak kendi sitesini kullandım. Siz dilediğiniz bir adresi veya kendi sitenizdeki jQuery dosyasını çağırabilirsniz.

Sonra da araya stil kodlarımızı serpiştirelim. Burada #onizleme alanı bizim popup alanımız için ayarlanmıştır. Siz renkleri ve diğer değişkenleri istediğiniz gibi ayarlayın.

<style>
body{margin:0 auto;padding:0 auto;background:#fff;font:80% Arial, Helvetica, sans-serif;color:#555;line-height:180%;}
h1{font-size:180%;font-weight:normal;color:#333;}
h2{clear:both;font-size:160%;font-weight:normal;color:#666;margin:0;padding:.5em 0;}
a{text-decoration:none;color:#f30;}
p{clear:both;margin:0;padding:.5em 0;}
img{border:none;}
ul,li{margin:0;padding:0;}
li{list-style:none;float:left;display:inline;margin-right:10px;}
#ortala {width:960px;margin:0 auto;padding:0 auto;display:block;}
#onizleme{position:absolute;border:2px solid #333;background:#ccc;padding:5px;display:none;color:#333;-moz-border-radius:5px;border-radius:5px;}
.altlink{clear:both;margin-top:250px;}
</style>
</head>

Stil kodları da bittiğine göre resimlerimizi ekleyelim. Burada unutmamanız gereken link alanındaki rel kodlamasıdır. Bütün resimlerin linklerini atarken rel=”popupacil” kodunu eklemeyi unutmayın.

<body>
<div id="ortala">
    <h1>jQuery ile Resim Önizlemesi</h1>

    <h2>Resim Galerisi (alt başlık olmadan)</h2>

    <ul>
        <li><a href="1.jpg" rel="popupacil"><img src="1s.jpg" alt="önizleme" /></a></li>
        <li><a href="2.jpg" rel="popupacil"><img src="2s.jpg" alt="önizleme" /></a></li>
        <li><a href="3.jpg" rel="popupacil"><img src="3s.jpg" alt="önizleme" /></a></li>
        <li><a href="4.jpg" rel="popupacil"><img src="4s.jpg" alt="önizleme" /></a></li>
    </ul>

    <h2>Resim Galerisi (alt başlıklar ile)</h2>

    <ul>
        <li><a href="1.jpg" rel="popupacil" title="Güzel bir resim"><img src="1s.jpg" alt="önizleme" /></a></li>
        <li><a href="2.jpg" rel="popupacil" title="Daha Güzel bir resim"><img src="2s.jpg" alt="önizleme" /></a></li>
        <li><a href="3.jpg" rel="popupacil" title="Alt başlıklar görünüyor"><img src="3s.jpg" alt="önizleme" /></a></li>
        <li><a href="4.jpg" rel="popupacil" title="Demek ki sorun yok"><img src="4s.jpg" alt="önizleme" /></a></li>
    </ul>
    <div class="altlink"><a href="http://wpadami.com" title="KaiseRCrazY.CoM, Serkan Algur">Anasayfa</a></div>
</div>

</body>
</html>

Bütün işlem bundan ibaret. Canlı örnek için buraya tıklayın. İndirmek için aşağıda kaynak kodlarını ve resimleri size aktarıyorum.

Hadi Selametle.

 

3 thoughts on “jQuery ile Resim Önizlemesi”

    1. sudeys a href olarak belirttiğin link resmin büyük hali olmazsa sanırım söylediğin sorunu yaşarsın. bir de benim yaptığım gibi resmi link olarak eklemeyi dene. Benim buradaki amacım galeri tarzında resmi gösteren bir önizleme yaptırmak. senin verdiğin link hatalı

  1. Öncelikle Kod için teşekkür ederim,

    js içerisinde ki

    $("body").append(""+ c +"");

    satırında width ve heigh değerlerinide ekleyerek resmin istediğim boyutta açılmasını sağladım, çok işime yaradı tekrar teşekkür ederim…

Comments are closed.