Bedava Foto Galeri Scripti - HTML Jss

KaRNeC

Yönetim Ekibi
Yönetici


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 dosyalar

kampanyalar | replika saat | replika saat | ajans pr | ixfy.net | sözlük | sektörel haberler | Türkiye'nin en güncel ekonomi ve finans sitesi altin.us ile güncel altın fiyatlarını, dolar kuru ve euro kurunu takip edebileceğiniz gibi yatırım tavsiyeleri ile bankaların güncel kredi ve mevduat faiz oranlarını takip edebileceğiniz sitemizde altın fiyatları ya da dolar kuru takip sayfalarını takibe alabilirsiniz.

Instagram mavi tik almak artık daha kolay. Instagram / Facebook Account Verification, Instagram hesap onayı için sizin adınıza çalışmalarınızı yapıyoruz. Siz de güvenli bir şekilde instagram hesap onaylayan ajans arayışı içindeyseniz bizimle iletişim kurabilirsiniz. Mavitik.net sayfasından detaylı bilgileri edinebilirsiniz. 

Üst