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.
Bu yorum 23 Ekim 2011 tarihinde 20:20 sularında yazılmıştır.
neredeyse aynısı olmuş 😀 teşekkürler
Bu yorum 24 Ekim 2011 tarihinde 21:53 sularında yazılmıştır.
Harika bir calisma olmus. Video seklinde hazirlanirsa daha basarili olacagini düsünüyorum.
Bu yorum 09 Mart 2012 tarihinde 19:15 sularında yazılmıştır.
Ya ben bunu yaptım ilk 4 resimden sonra düzen bozuluyor
Bu yorum 14 Mart 2012 tarihinde 14:33 sularında yazılmıştır.
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.
Bu yorum 10 Nisan 2012 tarihinde 16:39 sularında yazılmıştır.
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
Bu yorum 14 Nisan 2012 tarihinde 21:21 sularında yazılmıştır.
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.
Bu yorum 19 Nisan 2012 tarihinde 13:01 sularında yazılmıştır.
mrb bu resimlerin altına yorum alanı nasıl yapılır acaba facebook taki gibi o sekildede bi uygulama yapabilirmisiniz ..
Bu yorum 20 Nisan 2012 tarihinde 18:16 sularında yazılmıştır.
Veritabanına yorumları ve resimleri kaydetmeniz ve resmin id değerine göre (yani hangi resim tıklanırsa) listeleme yapmanız gerekli.
Bu yorum 25 Haziran 2012 tarihinde 10:19 sularında yazılmıştır.
süper olmuş elinize sağlık
Bu yorum 07 Ağustos 2012 tarihinde 21:05 sularında yazılmıştır.
merhaba kendi çabamla bir site yaptım ama bunu ekliyemiyorum siteme yardımçı olurmusunuz şimdiden teşekkürler
Bu yorum 24 Ocak 2013 tarihinde 12:32 sularında yazılmıştır.
İ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.
Bu yorum 06 Ekim 2013 tarihinde 13:52 sularında yazılmıştır.
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.
Bu yorum 20 Şubat 2015 tarihinde 07:45 sularında yazılmıştır.
Merhaba, bu linkteki çalışma size mi ait alıntı mı?
Bu yorum 20 Şubat 2015 tarihinde 16:55 sularında yazılmıştır.
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.