Home Dreamweaver Dersler Web galeri Yapımı FancyBox

Web galeri Yapımı FancyBox

468
7

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 “<head> </head>”  arasına yazmak

 

<link href=”files/fancy.css” rel=”stylesheet” type=”text/css” media=”screen” />
<script type=”text/javascript” src=”files/jquery-1.2.3.pack.js”></script>
<script type=”text/javascript” src=”files/jquery.fancybox-1.0.0.js”></script>
<script type=”text/javascript” src=”files/jquery.pngFix.pack.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(“#test a”).fancybox({‘hideOnContentClick’: true
});
$(“#test2 a”).fancybox({
‘overlayShow’: true,
‘zoomSpeedIn’: 0,
‘zoomSpeedOut’: 0
});
$(“#test3 a”).fancybox({
‘overlayShow’:true
});
});
</script>

sonrasında ise <body> ve </body> 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.

<p id=”test”>
<a href=”images/kelebek.jpg”><img src=”images/thumbs/kelebek.jpg” alt=””/></a>
</p>

<p id=”test3″>
<a rel=”test3″ href=”images/semih.jpg”><img src=”images/thumbs/semih.jpg” alt=””/></a>
<a rel=”test3″ href=”images/hoca_efendi.jpg”><img src=”images/thumbs/hoca_efendi.jpg” alt=””/></a>
<a rel=”test3″ href=”images/fatih.jpg”><img src=”images/thumbs/fatih.jpg” alt=””/></a>
</p>

<p id=”test2″>
<a rel=”test2″ href=”images/cicek1.jpg”><img src=”images/thumbs/cicek1.jpg” alt=””/></a>
<a rel=”test2″ href=”images/cicek2.jpg”><img src=”images/thumbs/cicek2.jpg” alt=””/></a>
<a rel=”test2″ href=”images/cicek3.jpg”><img src=”images/thumbs/cicek3.jpg” alt=””/></a>
</p>

 VİDEOLU ANLATIM İÇİN TIKLAYIN

KOLAY GELSİN
Ömer BOZALAN.

(468)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmenliğini bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlayarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(7)

  1. 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(”);

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

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

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

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

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.