PiroBox – Tıklandığında büyüyen fotoğraf

İ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.

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

Temel kullanım

• Head etiketleri  arasına eklenmesi  gereken bölümler.

Js ve still dosyaları : 

 JavaScript : 

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.