6222 defa görüntülendi.

Bedava Foto Galeri Scripti - HTML Jss

KaRNeC
Site Kurucusu
*******


Mesajlar: 19,178 Katılma Tarihi: 26-02-2011 Rep Puanı: 123 Durum: Çevirimdışı

Mesaj: #1
Bedava Foto Galeri Scripti - HTML Jss

İmage

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


Ekli Dosya(lar)
.zip  Foto-Galeri-Scripti-popup_face.zip (Boyut: 236.85 KB / İndirme: 949)
01-09-2012 09:25
Web Bul Rep Ver Alıntı
« Önceki | Sonraki »


Bu Konudaki Mesajlar
Bedava Foto Galeri Scripti - HTML Jss - KaRNeC - 01-09-2012 09:25

Benzeyen Konular
Konu: Yazar Cevaplar: Gösterim: Son Mesaj
Lightbulb Ücretsiz Dizin Scripti - Ücretsiz Toplist Scripti - Seo Uyumlu websitekaydet 0 52 18-09-2016 02:23
Son Mesaj: websitekaydet
Exclamation Renk Kurumsal v5.0 Firma Scripti (En çok kullanılan ücretsiz script) KaRNeC 0 537 25-05-2015 09:30
Son Mesaj: KaRNeC
  Ücretsiz Firma Scripti KaRNeC 0 878 13-04-2014 09:46
Son Mesaj: KaRNeC
  Ücretsiz Bedava Sevgililer Scripti KaRNeC 0 907 13-04-2014 09:41
Son Mesaj: KaRNeC

Konuyu görüntüleyenler: 1 Misafir

Forum Atla:

tanıtım haberi- son haberler- haber- kahramanmaraş haberleri- wikigazete.com- webcimo- Hava Durumu- sanierungsunternehmen -

Öğretmen Sitesi

Öğretmen Siteleri



Öğretmen Sitesi | İletişim | Yukarıya dön | İçeriğe Dön | Mobile Version | RSS

Türkçe Çeviri: MyBBTürkiye
Üretici: MyBB, © 2002-2016 MyBB Group.

MyBB & SEO İnSiDe

ÖğretmenSitesi.İnfo Google Gizlilik Politikasına riayet etmektedir