Merhaba,
Uzun bir süredir blog sayfamla ilgilenemiyorum. Geçen günlerde ceviz.net forumunun javascript bölümünde thickbox konusunda sorulan bir sorunun çözümüne destek oldum. Bu vesile ile çıkan çözümü de burada paylaşmak istedim.

Başlıktan anlaşılacağı üzere sorun; sonradan jquery ile sayfaya dâhil edilen (ve thickbox ile gösterilmesi gereken) içeriğin thickbox ile gösterilmemesi idi.
Thickbox gelen içerik için hiç çalışmıyordu.

Aynı sorun genel olarak jquery ile yapılmış tab menu kullananlarda da gözükebilir.

Söz konusu hatalı olan örneğimize bakalım.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<style type="text/css" media="all">
@import "http://jquery.com/demo/thickbox/thickbox-code/thickbox.css";
#cagirilan_icerik {
border:5px solid #CCCCCC;
}
img {
border:none;
}
</style>
</head>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://jquery.com/demo/thickbox/thickbox-code/thickbox-compressed.js"  type="text/javascript"></script>
<script language="JavaScript">
function icerigi_yukle(){
    $.ajax({
        type: 'POST',
        url: 'kontrol.php',
        data: $("input").serialize(),
        success: function (msg) {
            $('div#cagirilan_icerik').html(msg);
        }
    });
	}
</script>
<body>
<p>
<input id="dugme" value="içeriği çağır" type="button" onclick="icerigi_yukle();">
</p>
<div id="cagirilan_icerik">
İçerik Buraya Gelecek
</div>
</body>

</html>

kontrol.php dosyası 3 adet fotoğraf ekrana basıyor

<a href="../galeri/kurt.jpg" title="Kurt Fotoğrafı" class="thickbox"><img src="../galeri/th_kurt.jpg"></a>
<a href="../galeri/kedi.jpg" title="Kedi Fotoğrafı" class="thickbox"><img src="../galeri/th_kedi.jpg"></a>
<a href="../galeri/manzara.jpg" title="Manzara Fotoğrafı" class="thickbox"><img src="../galeri/th_manzara.jpg"></a>

Hatalı örneği buradan izleyebilirsiniz.

Görüldüğü gibi ekrana gelen fotoğraflar thickbox ile görüntülenemiyor ve yeni bir sayfa olarak çağırılıyor.

Bunun nedeni:
Jquery ile gerçekleşen dinamik çağırımın thickbox tarafından yorumlanmamasıdır.

Çünkü thickbox sayfa tamamen çağırıldıktan sonra tüm sayfayı tarayıp kendisi ile ilgili kısımları tespit ediyor ve çalışmaya hazır hale geliyor.
Haliyle, sonradan dinamik olarak sayfaya eklenmiş kısmı yorumlamıyor ve direkt <a> kısmındaki dosyayı yeni bir sayfa olarak ekrana getiriyor
Bu nedenle içerik div’e yüklendiğinde thickbox’u tekrar sayfayı baştan taratmak lazım.
Şu komutla yapabiliriz

tb_init('a.thickbox, area.thickbox, input.thickbox');

İlk etapta success’in döndüğü kısma eklemek sorununu çözecekmiş gibi görünse de ana sayfada kullandığımız (hali hazırda mevcut) thickbox’lari iki kere çalıştıracaktır

function icerigi_yukle(){
    $.ajax({
        type: 'POST',
        url: 'kontrol.php',
        data: $("input").serialize(),
        success: function (msg) {
            $('div#cagirilan_icerik').html(msg);
             tb_init('a.thickbox, area.thickbox, input.thickbox');
        }
    });
}

Çünkü daha önce sayfa açılışında çalışan thickbox ikinci kere çalıştığından mükerrer görüntüleme sağlayacak.

Bu nedenle iki ayrı fonksiyon kullanmak icap ediyor.
Birincisinde tüm thickbox ‘u etkisiz hale getireceğiz.
İkincisinde tekrar aktive edeceğiz.

function kaldir() {
        $('.thickbox').each(function(i) {
            $(this).unbind('click');
        });
    }

function kaldiryukle() {
        kaldir();
        tb_init('a.thickbox, area.thickbox, input.thickbox');
    }

Şimdi yukarıda tb_init yazan yere kaldiryukle fonksiyonunu eklediğimizde artık sağlıklı sonuç alabiliyoruz.

function icerigi_yukle(){
    $.ajax({
        type: 'POST',
        url: 'kontrol.php',
        data: $("input").serialize(),
        success: function (msg) {
            $('div#cagirilan_icerik').html(msg);
             kaldiryukle();

        }
    });

}

function kaldir() {
        $('.thickbox').each(function(i) {
            $(this).unbind('click');
        });
    }

function kaldiryukle() {
        kaldir();
        tb_init('a.thickbox, area.thickbox, input.thickbox');
    }

Çalışan örneğe buradan bakabilirsiniz.

Kolay gelsin.

Thickbox nedir diyenler için
http://jquery.com/demo/thickbox/
Jquery nedir diyenler için
http://jquery.com/

Be Sociable, Share!