İngilizcesinde Box eklentisi olarak geçiyor ama Türkçede ne tür bir başlık kullanabileceğim konusunda iyi bir sonuç bulamadım. Kutu, çerçeve, pencere derkene üçünden en iyisi penceredir diye pencere ismini verdim. Siz yinede box olarak bilin çünkü bu tarz örneklerin tamamı için kullanılan genel isim boxtur. Daha öncede buna benzer örnekler paylaşmıştık sizlere. LightBox, FancyBox, imgBox, PrettyPhoto uygulamalarının bir benzeri olan PiroBox uygulaması da diğerlerinden biraz daha farklı diyebiliriz.
Resim, video, swf, iframe, bir makale yada youtube gibi video sitelerinden video url adresini alıp sayfa içinde bir pencerede açılmasını sağlayabiliyorsunuz. Sayfa içinde açılan kutunun yükseklik ve genişlik ayarını siz belirlediğiniz için makalenin uzunluğuna bağlı olarak pencere içinde kaydırma çubukları devreye girebilir.
Resim Galeri Kullanımı
Resimler için galeri oluşturduğunuzda dilerseniz resmin iki ayrı boyutunu kullanabilirsiniz. Birincil olarak küçük resim ve ikincil olarak ta büyük resim kullandığınızda açılan penceredeki resim yani birincil resminizin büyüklüğüne göre çerçeve belli bir boyut kazanır. Sağ üst köşede ikincil resmi yani tam boy resmi görebilmek için bir icon belirir. İcona tıkladığınızda aynı çerçeve içinde büyük olan resim görünür. Bu aşamada büyük reesimden küçük resime geçiş fark edilmiyor. Çünkü resmimiz slayt bir şekilde büyüyor ve sürükle bırak yöntemi ile resmin incelemek istediğiniz bölümüne doğru sürükleyebiliyorsunuz. Ayrıca resimler arası geçiş işlemi için klavye yön tuşlarınıda kullanabilirsiniz.
Örnek kod
Galeri için rel=”gallery” ve class=”pirobox_gall” kullanıyoruz.
1 2 3 |
<a href="resim1-kucuk.jpg" rel="gallery" class="pirobox_gall" title=""> <img src="resim1-buyuk.jpg" /> </a> |
Eğer tek bir resim kullanmak istiyorsanız ve resimler arası ne mouse ile nede klavye ile geçiş olmasını istemiyorsanız rel=”single” class=”pirobox” kodunu kullanmanız gerekiyor. Rel ve class isimlerinin nerede olduğuna bakarsanız daha iyi anlamış olursunuz.
Video ve Swf Kullanımı
Bütün video siteleri ve swf dosyaları için çalışma ve kullanım şekli aynıdır video adresi ve ardından seçici olarak rel=”flash-full-full” class=”pirobox_gall1″ kullanılır. Tıklanda açılacak pencerenin boyutunu rel’deki tırnak işareti içindeki flash-boyut-boyut kodunu kullanıyoruz. flash-500-500 demek 500px genişlik ve 500px yükseklik demek oluyor. Bu özelliği tam ekran olarak ayarlayabilmek içinse reldeki tırnakların içine flash-full-full yazmanız gerekmektedir. Demo adresinde aynı videonun bir kaç farklı boyutunu ekledim.
Örnek
1 |
<h2><a href="video yada swf url" rel="flash-400-400" class="pirobox_gall1" title="Başlık ">? <span class="span_f_c">YouTube</span></a></h2> |
Temel kullanım
- Head etiketleri arasına eklenmesi gereken bölümler.
Js ve still dosyaları :
1 2 3 |
<link href="css_pirobox/style_5/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery_1.5-jquery_ui.min.js"></script> <script type="text/javascript" src="js/pirobox_extended_feb_2011.js"></script> |
JavaScript :
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> $(document).ready(function() { $.piroBox_ext({ piro_speed :700, bg_alpha : 0.5, piro_scroll : true, piro_drag :false, piro_nav_pos: 'bottom' }); }); </script> |
Body etiketleri arasına eklemeniz gereken bölümleri resim, swf ve video kullanımlarında gösterdik. Ama daha iyi anlayabilmeniz için bir tane daha ekleme ihtiyacı duyuyorum.
1 2 3 |
<a href="resim1-kucuk.jpg" rel="gallery" class="pirobox_gall" title="Resim Başlık"> <img src="resim1-buyuk.jpg" /> </a> |







1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
sizin verdiğiniz gibi deniyorum fakat resimler bir türlü sizin ki gibi büyümüyor birde downloads daki dosyanınızın içi boş her halde düzeltirseniz belki istediğimiz gibi bir sonuca ulaşırız
saygılarla
pirobox un içine download linki nasıl koyarız resim indir diye