Web galeri Yapımı FancyBox
Web galeri yapımında kullanılan fancybox uygulamasını anlatacağım. Bu uygulama jquery kullanılarak hazırlanmış fotoğraf / resim gösterimi veya slaytı yapabildiğimiz oldukça güzel bir uygulama. Bu yüzden sizlerle paylaşma gereği duydum. Fancybox‘ın kendine ait birçok resim efekti de bulunmakta. Böyle görsel uygulamalara yer vererek sitemizin görselliğini artırabiliriz. Şimdi bu uygulamayı nasıl yapabileceğimize bakalım.
Öncelikle gerekli dosyaları indiriyoruz. (İNDİRMEK İÇİN TIKLAYIN)
Yapmanız gereken aşağıdaki script kodlarını Html sayfanızda “
” arasına yazmak
$(document).ready(function() {
$(“#test a”).fancybox({‘hideOnContentClick': true
});
$(“#test2 a”).fancybox({
‘overlayShow': true,
‘zoomSpeedIn': 0,
‘zoomSpeedOut': 0
});
$(“#test3 a”).fancybox({
‘overlayShow':true
});
});
sonrasında ise
ve arasına ise html kodlarımızı koymak. Aşağıdaki yapmış olduğum örnekte ve indirdiğiniz dosyada da görebilirsiniz. id ve test numaraları o resim bölümüne ait efekt listeleridir. test , test2 ve test3 efektlerdir. O aralıkta tanımladığınız resimler o efekte tabidir. İndirdiğinizde göreceksiniz ki rar dosyası 3 klasörden oluşuyor bu klasörlerden file klasörü facybox'ın kullandığı script kodlarının olduğu kısım, o klasör ile hiç uğraşmıyorsunuz sadece Tumbs klasörüne resmin küçük halini ,İmages klasörüne ise resmin büyük halini koyuyorsunuz.Sonrasında ise html koduna test efektini seçerek aşağıdaki gibi tanımlıyorsunuz.
KOLAY GELSİN
Ömer BOZALAN.
(468)
Yorum(7)
Cevaplayın Mustafa Aslan Yanıtı iptal et
Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.
gokhan beleş yok klevyenin üstüne cık 😛 ,nette sürf yap..
s.a hocam sitem için hazırladığım şablon da çalışıyor fakat şablondan oluşturduğum yeni sayfalarda ”10 satırında sözdizimi hatası var.Bu hata düzeltilinceye kadar kod ipuçları çalışmayabilir” uyarısı alıyorum ve ön izlemede küçük resimler gözüküyor ancak büyük resimler hata veriyor
10.satır;
!window.jQuery && document.write(”);
S.a hocam ben program yazma site yapmayı ögrenmek istiyorum acaba bu dersleri dinleyip ugraşsam nereye varırım neler yapabilirim çok mu uzun sürer bir site yapmam… bilgi şu anda 0 site yapmam için sadece sizin derslerini dinleyip ögrenebilirmiyim
Mustafa arkadaşım web tasarım hakkında ne kadar bilgin olduğunu bilmiyorum. O yüzden bir kursa gitmende yarar var. Belki html i videolardan öğrenebilirsin ama yazılım konusunu hiçbir şekilde internetten öğrenemezsin. Kolay gelsin.
Merhabalar hocam bana mailden ulaşabilirmisiniz çok önemli sizden rica ediyorum teşekkürler
Merhaba abi ben fancybox ta video oynatmak istiyorum.
youtubedan lınkını veriyorum tıklayınca video açılıyor ama küçük resim oluşturmuyor. ne yapmam lazım.
Recep, youtube linkini veriyorsan youtube oluşturması lazım. Küçük resim işini zaten youtube yapıyor. Diğer türlü kendin yapman lazım.