Kişiselleştirilebilir LightBox üretimi, Cenk SARI Blog

Twitter

Etiketler - Etiket Bulutu

Son Yazılar

Son Yorumlananlar

Takip edin

Temalar

Kişiselleştirilebilir LightBox üretimi

Tarih 21 Ocak 2010 Perşembe, 15:30 | Etiket(ler) jQuery, JavaScript, Css

LightBox pencereleri çoğumuzun hazır olarak alıp kullandığı klasik popup veya uyarı pencerelerinin sıkıcılığı ve tasarımını özelleştirememe problemlerini çözen client side uygulamalardır. Basit bir tanımla anlatmaya çalıştığım lightbox pencereleri hazır olarak geldiğinden birçoğu kişiselleştirmeye pek uygun yapıda değillerdir. İşte böyle bir durumda kendi pencelerimizi üretmek isteyebiliriz. Bu ihtiyaçtan yola çıkarak kendi lightbox pencerelerimizi nasıl üretebiliriz sorusuna çözüm arayacağız. Kendi geliştirdiğim lightbox penceresi çok sade ve kişiselleştirilebilirliğe olanak sağlıyor. jQuery i indirip projemize dahil ettikten sonra, hemen işe koyulalım ve yazmaya başlayalım:

Önce penceremizin şemasını html olarak çıkartalım :

<head></head> taglarinin arasına jQuery i ekleyelim.

<script type="text/javascript" src="jquery-1.4.min.js"></script>

<body></body> taglarının içine :

<div id="karart"></div>
<div id="pencere">
    <div id="pencerebaslik">
        <div id="pencerebasliksol"></div>
        <div id="pencerebasliksag"><a href="javascript:pencereKapat();">[kapat]</a></div>
    </div>
	<div id="pencereicerik"></div>
</div>

karart isimli div penceremizin modal olarak açılmasını sağlayacak kararan arkaplan, pencere isimli div ise penceremizi kapsayacak genel taşıyıcımız. Bizi ilgilendiren ve dışarıdan parametre alacak pencerebasliksol ve pencereicerik isimli divler. pencerebasliksol isimli div e title ımızı, pencereicerik isimli div e iceriğimizi yazdıracağız. Css imizi yazarak lightboxımızı oluşturmaya devam ediyoruz.

#karart {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #000;
    opacity: .75;
    filter: alpha(opacity=75);
    -moz-opacity: 0.75;
    z-index: 1; }
#pencere {
    font-family: Arial;
    font-size: 12px;
    position: absolute;
    border: 2px solid #ccc;
    display: none;
    background: #fff;
    z-index: 2; }
#pencerebaslik {
    background: #e3e3e3;
    padding: 5px;
    border-bottom: 1px solid #ccc;
    height: 18px; }
#pencerebasliksol {
    float: left;
    font-weight: bold; }
#pencerebasliksag {
    float: right; }
#pencereicerik {
    padding: 5px; }
#pencere a {
    margin-left: 10px;
    color: #333; }

Css imiz genel şablumuzun bütün elementlerini yakalayacak şekilde olacak. Siz kendi tasarımınızın renklerine göre değiştirebilirsiniz. Hemen penceremizi çağıracak ve kapatacak javascript fonksiyonlarımızı yazıp tamamlayalım. Aslında işin can alıcı kısmı aşağıdaki kodlarda.

<script type="text/javascript">
var pencereAcikmi = false;
function pencereGoster(genislik,uzunluk,baslik,icerik) {
    var apSec = $("#pencere");
    if(pencereAcikmi == false) {
        $("#karart").css("display","block");
        var winH = $(window).height();
        var winW = $(window).width();
        $("#penceresol").html(baslik);
        apSec.css("width",genislik);
        apSec.css("height",uzunluk);
        apSec.css('top',  winH/2-apSec.height()/2);
        apSec.css('left', winW/2-apSec.width()/2);
        $("#pencereicerik").html(icerik);
        pencereAcikmi = true;
    }
    else {
        pencereAcikmi = false;
    }
    apSec.css("display","block");
}
$(window).resize(function () {
    var winH = $(window).height();
    var winW = $(window).width();
    if(pencereAcikmi == true) {
        $("#pencere").css('top', winH/2-$("#pencere").height()/2);
        $("#pencere").css('left', winW/2-$("#pencere").width()/2);
    }
});
function pencereKapat() {
    if(pencereAcikmi == true) {
        pencereAcikmi = false;
        $("#pencere").css("display","none");
    }
    $("#karart").css("display","none");
}
$(document).keyup(function(event){
    if (event.keyCode == 27) {
        if(pencereAcikmi == true) {
            pencereKapat();
        }
    }
});
</script>

pencereGoster() fonksiyonumuz 4 parametre alıyor genislik, uzunluk, baslik ve icerik. Adlarından anlaşılacağı şekilde pencereyi çağırırken genislik, uzunluk, baslik ve içerik parametreleri gönderiyoruz. Pencere açma fonksiyonumuzu şu şekilde çağırabiliriz.

<a href="javascript:pencereGoster(350,100,'Penceremizin başlığı','Penceremizin içeriği buraya gelecek');">Pencere aç</a>

pencereKapat() fonksiyonu penceremizin açık olup olmadığını kontrol edip pencereyi kapatıyor. (window).resize fonksiyonumuz browser penceresini herhangi bir şekilde küçültüp, büttüğümüzde veya boyutlarını değiştirdiğimizde penceremizi browser penceresinde ortalıyor. (document).keyup fonksiyonumuz ise escape tuşunu yakalayıp bu tuşa basıldığında pencereyi kapatan fonksiyonumuzu tetikliyor ve penceremizi kapatıyor. Projenin bitmiş halinde şu şekilde bir görüntü alıyoruz.

Siz kendi tasarımınıza göre özelleştirip daha güzel bir görüntüye dönüştürebilirsiniz fakat bu haliyle de gayet kullanışlı ve güzel görünüyor. Bir sonraki yazımda bu pencerelerin içinden ajax ile başka bir sayfayı nasıl çağırırız konusunu inceleyeceğim. Görüşmek üzere.

Projenin bitmiş ve çalışan halini buradan indirebilirsiniz.

Yorumlar

Tarih 05 Şubat 2012 Pazar, 18:52 | Yazan Tkalkavam

Emeğinize sağlık çok güzel bir çalışma olmuş.

Tarih 13 Ağustos 2011 Cumartesi, 19:14 | Yazan Aziz

öncelikle elinize sağlık. güzel çalışma olmuş. uzun süredir bunu arıyodum :) yalnız uygulamayı çalıştırdım ama içeriği nasıl değiştirebiliriz yani ben açılan pencereye textbozlar koyup kullanıcıdan değer alıcam. yardımcı olursanız sevinirim. şimdiden teşekkürler...

Tarih 05 Haziran 2011 Pazar, 15:44 | Yazan İsmail Demirkan

<a href="javascript:pencereGoster(350,100,'Penceremizin başlığı','Penceremizin içeriği buraya gelecek');">Pencere aç</a> Yükseklik kısmının otomatik olmasını istiyorum nasıl yapabilirim ?

Tarih 10 Şubat 2011 Perşembe, 01:40 | Yazan Cenk SARI

jQuery document ready olayını kullanabilirsin. <head></head> tagları arasına şunu yaz :

<script type="text/javascript">
$(document).ready(function() {
javascript:pencereGoster(350,100,'Penceremizin başlığı','Penceremizin içeriği buraya gelecek');
});
</script>

şeklinde

Tarih 09 Şubat 2011 Çarşamba, 22:25 | Yazan ceyhun

bn bu uygulamada sayfa yuklnır yuklenmez ekrann kararmasını ıstıyorum bı butona basınca degl. nasl yaparım smdıden tsk.

Tarih 03 Aralık 2010 Cuma, 19:16 | Yazan Cenk SARI

Uzunca bir konu ama http://jqueryfordesigners.com/image-loading/ bu adresteki gibi yapabilirsin.

Tarih 03 Aralık 2010 Cuma, 17:42 | Yazan Ümit Karayel

Paylaşım ve anlatım için teşeşkkürler sormak istediğim şey eger pencerede metin değilde fotoraf kullanmak istersek ne yapacağız çünki tüm denemelerimde "komut dizilimi hatası" aldım.
İlgi ve paylaşım için tekrar teşekkürler

Tarih 13 Ekim 2010 Çarşamba, 18:12 | Yazan Cenk SARI

$(document).ready(function() {
$("#karart").bind('click',function() {
pencereKapat();
});
});

fonksiyonunu kulanabilirsin.

Tarih 13 Ekim 2010 Çarşamba, 18:00 | Yazan Hasan Gocmen

Merhaba tam aradığım tarzda bi çalışma öncelikle teşekkür ederim. Peki acılan penceredeki kapat tuşunun dışında kararan alanın herangi bir yerine tıkladığımızda da kapatma işlemi yapmasını nasıl sağlarız ?