Facebook Tarzı Resim Galerisi

 bcakir
 17 Ekim 2011

Merhaba arkadaşlar bu aralar sürekli olarak slider ile ilgili yazılar yazıyorum, bu yazımda da JQuery ile facebook resimlerinin gösterilmesine benzeyen slider yapmayı göstereceğim. Daha önceden yaptığımız JQuery popup video uygulamamızda kullandığımız fancybox adında JQuery ile yazılmış kütüphaneyi kullanacağız. Bu sayede de çok kolayca uygulamayı geliştirebileceğiz. Popup açılan tarzda bir slider yaparak yazılarıma devam ediyorum. Uygulamamızın çalışabilmesi için yine bazı dosyalara ihtiyacımız var. Bundan dolayı da yazımızın sonunda uygulamamızın bütün betik ve resimlerini içerek çalışır halini yine sizlere vereceğim. Şimdi uygulamamızı yapmaya başlayabiliriz.

<!DOCTYPE html>
<html>
<head>
<title>Facebook Tarzı Resim Galerisi</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style/style.css" />
<script type="text/javascript">
$(document).ready(function() {
    $("a[rel=resim]").fancybox({
        'transitionIn'	: 'none',
        'transitionOut'	: 'none',
        'titlePosition' : 'over',
        'titleFormat'	: function(title, currentArray, currentIndex, currentOpts) {
            return '<span id="fancybox-title-over">Resim: ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? '   ' + title : '') + '</span>';
        }
    });
});
</script>
</head>
<body>
<div id="content">
	<p>
		<h2>Resim Galerisi</h2>
		<a rel="resim" href="images/1a.jpg" title="Resim ismi"><img alt="" src="images/1b.jpg" /></a>
		<a rel="resim" href="images/2a.jpg" title="Resim ismi"><img alt="" src="images/2b.jpg" /></a>
		<a rel="resim" href="images/3a.jpg" title="Resim ismi"><img alt="" src="images/3b.jpg" /></a>
		<a rel="resim" href="images/4a.jpg" title="Resim ismi"><img class="last" alt="" src="images/4b.jpg" /></a>
	</p>
</div>
</body>
</html>

Resim galerimizi JQuery ve hazır yazılmış fancybox eklentisi ile kolayca geliştirdik ve resimlerimizi popup açılan pencere içerisinde gösterdik. Resimleri değiştirerek uygulamayı kolayca kendinize uyarlayabilirsiniz. Böylece bir slider uygulaması da bitmiş oldu. Bütün içeriğin olduğu çalışan dosyayı buradan indirebilirsiniz. Böylece bir yazımızın daha sonuna geldik. Yararlı olması dileğiyle.

 8.758 Okunma

Bu yazıya 14 yorum yapılmış.

  1. neredeyse aynısı olmuş 😀 teşekkürler

  2. Harika bir calisma olmus. Video seklinde hazirlanirsa daha basarili olacagini düsünüyorum.

  3. Ya ben bunu yaptım ilk 4 resimden sonra düzen bozuluyor

    • Fotoğraf sayısını değiştirecekseniz; uygulamada küçük değişiklik yapmanız gerekli. Daha fazla fotoğraf eklediğinizde; class=”last” kısmını en son fotoğrafınızda bırakın.

  4. Dediiğin gibi yaptım fakat eklediğim resimler çıkmadı ilk 4 tanesinde sıkıntı yok ama diğer 16 tanesinde problem çıkardı sıkıntı nerdendir acaba

    • Fotoğraf sayısını artırmak için uygulamada küçük değişiklik yapmanız yeterli. Daha fazla fotoğraf eklediğinizde; class=”last” kısmını en son fotoğrafınızda bırakın, sorunsuz çalışır.

  5. mrb bu resimlerin altına yorum alanı nasıl yapılır acaba facebook taki gibi o sekildede bi uygulama yapabilirmisiniz ..

    • Veritabanına yorumları ve resimleri kaydetmeniz ve resmin id değerine göre (yani hangi resim tıklanırsa) listeleme yapmanız gerekli.

  6. süper olmuş elinize sağlık

  7. merhaba kendi çabamla bir site yaptım ama bunu ekliyemiyorum siteme yardımçı olurmusunuz şimdiden teşekkürler

  8. İyi çalışmalar;

    Facebookta olduğu gibi resimlere yorum yapma olayını nasıl yapabiliriz? Bunun üzerinde çalışıyorum. Yani bana lazım olan şey bu yeni açılan fancybox içinde php işlemleri yapmak.

  9. Bu galeriyi Blogger’a uyarlayabilir miyim? Uyarlayabilirsem nasıl yapabilirim? Biraz denedim ama demo daki gibi olmuyor. Bununla ilgili cevabınız varsa yazarsanız sevinirim.

  10. Merhaba, bu linkteki çalışma size mi ait alıntı mı?

    • Merhaba, kimsenin emek vererek yazmış olduğu yazıyı almak gibi bir düşüncem olamaz. Yazıları incelerseniz siz de kimin böyle bir şey yapmış olduğunu hemen anlayacaksınız. Bu sitede yer alan yazılar, insanlara kaynak olsun diye öğrenirken yazmış olduğum bilgilerdir.

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla Facebook, JQuery
Kapat