Flash gömülebilen Lightbox : ShadowBox
Yazar : E.Altuğ YILMAZ
Merhaba arkadaşlar ;
Bu hafta içerisinde Lightbox ile ilgili 2 eposta alınca şöyle bir derleyip toparlayıp bir yazı çıkarayım istedim. Öncelikle Lightbox nedir bilmiyorsanız tekrardan anlatmak yerine baya uzun zaman önce yazdığım bir yazımı okuyabilirsiniz.
http://ercanaltug.blogspot.com/2007/09/image-1.html
Lightbox güzel bir HTML üzerinde Javascript tabanlı görsel bir sunum sağlıyor bize.Ancak bu açılan pencere içerisinde image dışında nesneler oynatamıyoruz. Geliştirilmiş birsürü Lightbox örneği internette mevcut ancak içerisine flash swf dosyası,flv video ve hatta iframe (google video,youtube,form...) ekleyebildiğimiz bir lightbox türevi shadowbox'ı tavsiye ediyorum. Örnekleri gayet açıklayıcı.
http://www.mjijackson.com/shadowbox
Peki shadowbox gayet hoş ancak ya ben bunu htmlden değil flash içerisinden açmak istiyorum derseniz.İlk duyduğumda banada ters gelmişti ama flash içerisinden de Javascript fonksiyonu çağırmak mümkün sonuçta ve o fonksiyonu çağırarak bu da mümkün.Yani Flash içerisinden bir butona tıklandığında da Lightbox ve türevlerini çalıştırabiliyoruz. Örnek olması açısından bir fonksyion çağıran uygulamam :
JavaScript Kodu
————————————————————————–
< script type="text/javascript">
function show(image) {
var a = document.getElementById("image_href"+image+"");
var f = new Array()
f[1] = "images/1.jpg";
f[2] = "images/2.jpg";
var url = f[image];
a.setAttribute(’href’, url);
myLightbox.start(a);
}
< /script >
————————————————————————–
Flash Actionscript 2.0 Buton Kodu
————————————————————————–
on (press) {
getURL("javascript:show(1)");
}
______________________________
Flash Actionscript 3.0 Frame'e eklenecek kod :
(foto1_btn butonun Instance Name'i)
______________________________________________
foto1_btn.addEventListener(MouseEvent.CLICK,tiklandi1)
function tiklandi1(e:MouseEvent) {
var adres:URLRequest = new URLRequest("javascript:show(1)")
navigateToURL(adres)
}
————————————————————————–
HTML Kodu
————————————————————————–
< a id="image_href1" href="images/1.jpg">< /a>
< a id="image_href6" href="images/2.jpg">< /a>
————————————————————————–
Daha birçok Lightbox örneği var internette araştırma yaparken bir sayfada ayrıntılı örneklerle analizlerini veren bir sayfa gördüm paylaşmak istiyorum :
http://planetozh.com/projects/lightbox-clones/
Belki sizin lightboxınız shadowbox değil başkasıdır. Ayrıca bir türk tarafından geliştirilmiş olan TalCIBox ta göz atmaya değer.Projelerinizde geliştirerek kullanmanız ümidiyle...
26/11/08
Çok sağolun hocam :D deniyorum bunuda :D sonuç kesin çıksa size dönüş yapacağım ama hala uğraşıyorumm...:D
21/2/09
Merhaba,
Öncelikle verdiğiniz güzel bilgiler için teşekkürler. Flash içinde lightbox çalıştırmak uzun zamandır yapmaya çalıştığım birşey; fakat kaynak bulamamıştım. Gayet sade bir şekilde anlatmışsınız yukarıda; ancak benim javascript bilgimin zayıf olmasından ötürü sanırım; "JavaScript Kodu" kısmını nereye koyacağımı bilemedim. Tekrar açıklayabilir misiniz acaba? Bunun dışında, butona, frame'e ve html'ye gerekli kodları yazdım. Ancak çalıştırmaya beceremedim :)
21/2/09
Merhabalar
Javascript kodunu head taglerine ilk satırında
< script type="text/javascript" >
olacak şekilde yazıyorsunuz.
Kolay gelsin..
21/2/09
Tam da dediğiniz gibi ekledim; ancak yine başaramadım. Zannedersem .swf'yi eklerken bi hatalar yapıyorum; çünkü .gif olarak kaydedince çalışıyor kodlar.
Yine de teşekkür ederim ilgilendiğiniz için.
5/3/09
wordpress te genelde lightbox kullanımı hat safhada.ki tasarımsal bir siteyse kaçınılmaz.yaptığınız tasarımlarda ayrı ayrı sayfalar açılması yerine kullanılabilen yegane eklenti lightbox.tabi olayı biraz daha geniş düşünebilirsek flash olsun video olsun lightbox içine entegreli çalışabilmekte ve sitenin görselliği açısından da faydalı olmakta.bilgi adına teşekkürler hocam.
*Kürşat
21/1/10
http://www.shadowbox-js.com/forum.html#nabble-td1310806
burada ayrıntılı açıklanmış ve 1 örnekde mevcut
http://n2.nabble.com/file/n1317535/flash_shadowbox.rar
18/9/11
merhabalar bende lightbox kullanmayı düşünüyordum fakat javascriptte browser engeline takıldım
firefox ve i.e çalışıyor chromada çalışmıyor linkim
http://www.fsahinoglu.com/jq/ok.asp
çözümü varsa yardımcı olabilirmisiniz.