Wibiya Toolbar'ın yol açtığı Thickbox/Lightbox sorununu düzeltmek

Son zamanlarda oldukça ilgimi çeken bir eklenti oldu Wibiya Toolbar. Aşağıda kendi sayfam için hazırlamış olduğum toolbar için bir ekran görüntüsü verdim. Bu toolbar ile ziyaretçilerinizi karşılayan mesajlar oluşturabiliyor, son eklenen yazıların önizlemesini gösterebiliyor, RSS linkinizi paylaşabiliyor, Facebook ve Twitter gibi sosyal paylaşım sitelerini sayfanıza entegre edebiliyor, farklı dillerde tercüme yapılmasını sağlayan Google aracını sayfanıza ekleyebiliyor, sayfanız için rastgele yazılar görüntüleyebiliyor, web sayfanız ve web üzerinde Google arama motorunu kullanrak aramalar yaptırabiliyorsunuz. Toolbar tamaman ajax teknolojisi üzerine kurulu ve çok hoş bir görünüme sahip. Wibiya web sayfasından üyelik için davetiye istedikten sonra gelen token üzerinden üyelik işlemlerinizi tamamlıyorsunuz ve toolbar'ı hemencecik oluşturmaya başlayabiliyorsunuz. Toolbar için farklı temalar da mevcut, Böylece dizaynınıza en yakın ve en uygun renkler ile bu toolbar'ı oluşturabilirsiniz.

Üyelik işlemleriniz tamamlandıktan hemen sonra Wibiya size aşağıdaki bir JavaScript çağırma kodu verecektir sayfanıza eklemeniz için. Bu scripti sayfanızın </body> tagından hemen önce yerleştirebilirsiniz.

<script src='http://toolbar.wibiya.com/toolbarLoader.php?toolbarId=XXXXX' type='text/javascript'></script>

Buraya kadar bir sorun yok fakat sayfanızda benim gibi Thickbox/Lightbox uygulamalarından herhangi birisini kullanıyorsanız Wibiya sizin için biraz sıkıntı yaratacaktır. Çünkü Wibiya scripti sayfanıza eklendiği zaman Thickbox/Lightbox için hazırlanan div katmanlarının sıralamasında bazı problemler oluşuyor. Yani önizleme için Thickbox/Lightbox eklentilerinin oluşturduğu pencereler arka katmanda kalarak izlenebilirliğini kaybediyor. Bu sorunu ortadan kaldırmak için Thickbox/Lightbox uygulamaları için kullanılan window katmanının sırasının değiştirmesi yeterli olacaktır. Örneğin Thickbox uygulamasının kullandığı stil şablonu olan thickbox.css dosyası içerisinde #TB_window stili için aşağıdaki kırmızı renkle verilen değişiklikler yapılarak bu sorun giderilebilir. Daha önce 102 olan z-index'i 100000 gibi abuk ve yapılmayacak kadar yüksek bir değere setleyerek bu işten yırtabilirsiniz :) Başka hiçbir yere de zararı olmayacak ufak bir manipülasyon yalnızca. En azından ben sorunumu en kısa yoldan bu şekilde düzeltebildim :) Eğer alternatif yöntemler var ise paylaşmanız çok iyi olacaktır...

#TB_window 
{
	. . . .
	position: fixed;
	background: #ffffff;
	z-index:100000 !important;
	. . . .
}