Konuyu Oyla:
  • Derecelendirme: 2.77/5 - 13 oy
  • 1
  • 2
  • 3
  • 4
  • 5
Bedava Foto Galeri Scripti - HTML Jss
Yorum: #1
YAZILIPLAN.jpg

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.

Kod:
<!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ı ekten indirebilirsiniz. Böylece bir yazımızın daha sonuna geldik. Yararlı olması dileğiyle.

ALINTI

Etiketler: Facebook, Facebook Fotoğraf Gösterimi, Facebook Resim Gösterimi, Fancybox, JQuery, JQuery Fotoğraf Galerisi, JQuery Resim Galerisi, JQuery Slider


Ek Dosyalar
.zip   Foto-Galeri-Scripti-popup_face.zip (Dosya Boyutu: 236.85 KB / İndirme Sayısı: 986)
Cevapla


Bu Konudaki Yorumlar
Bedava Foto Galeri Scripti - HTML Jss - Yazar: KaRNeC - 01-09-2012, Saat:09:25

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Ücretsiz Full Ziyaretçi Defteri Scripti ındir 2018 KaRNeC 0 118 20-08-2018, Saat:07:30
Son Yorum: KaRNeC
  Ücretsiz haber sitesi scripti- Gelişmiş Haber Scripti Artık Tamamen Ücretsiz ! KaRNeC 0 115 20-08-2018, Saat:07:18
Son Yorum: KaRNeC
  Kişisel Site Scripti Bedava indir 2018 KaRNeC 0 343 09-04-2018, Saat:12:03
Son Yorum: KaRNeC
  Ücretsiz Twitter takipçi ve beğeni scripti indir 2018 KaRNeC 0 347 07-04-2018, Saat:11:34
Son Yorum: KaRNeC

Hızlı Menü:


Konuyu Okuyanlar: 15 Ziyaretçi