Home JQuery Jquery Polaroid Fotoğraf Gallerisi Örneği
Jquery Polaroid Fotoğraf Gallerisi Örneği

Jquery Polaroid Fotoğraf Gallerisi Örneği

58
23

Merhaba arkadaşlar, Jquery galeri çeşitlerimizi sizler için artırıyoruz. Hangisini beğenirseniz sitenizde o galeri uygulayabilirsiniz.  Bu çalışmada internetten bulduğum güzel jquery galerilerden birisidir. Biraz daha görsellik katılmış bir galeri türüne örnektir. Aşağıdaki işlemleri yaparak kendi galeriniz olarak kullanabilirsiniz. Kolay gelsin.

Aşağıdaki indirme linkine tıkladığınızda 6 adet dosya bilgisayara inmiş olacak. Bunlardan images klasörü ve index.html dosyası sizler için önemlidir. İmages klasörünün içinde album1 ve album2 klasörü var başka bir klasör koymak istiyorsanız yeni bir klasör oluşturmak zorundasınız. Sonra bu oluşturduğunuz dosyayı da index.html dosyasında tanımlamalısınız. Örnek olarak aşağıdaki anlatımı uygulayın.

1. İmages klasörünün içinde album2 klasörü oluşturun ve içine resimlerini yükleyin.

2. index.html dosyasını bir web editör programıyla açın ve aşağıdaki satırı bulun

</div>
<div class="descr">
Sadece Ben
</div>
</div>

3. Aşağıdaki kodları yukarıdaki kodun altına yapıştırın.

<div class="album3">
<div class="content">
<img src="images/album2/thumbs/1.jpg" alt="images/album3/1.jpg" />
<span>Resim açıklaması</span>
</div>
<div class="content">
<img src="images/album3/thumbs/2.jpg" alt="images/album3/2.jpg" />
<span>Resim açıklaması</span>
</div>
<div class="content">
<img src="images/album3/thumbs/3.jpg" alt="images/album3/3.jpg" />
<span>Resim açıklaması</span>
</div>
<div class="content">
<img src="images/album3/thumbs/4.jpg" alt="images/album3/4.jpg" />
<span>Resim açıklaması</span>
</div>
<div class="descr">
Album adı Yazılacak
</div>
</div>

4. sonra album3 içindeki resimlerin adlarını yukarıdaki  kırmızı yazılmış yerlerdekiyle değiştiriyorsunuz.

5. Tumbs klasörünün içine resimlerin küçültümüş hallerini de koyduğunuzda da işlem bitecektir. 

Yapamadığınız bir durumda benimle bu başlık altından iletişime geçiniz.

 

 

(58)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmenliğini bitirerek tamamladım. Ayrıca C Sınıfı İş Sağlığı ve Güvenliği Uzmanıyım. 2014 Nisan ayında Adobe Dreamweaver CS6 Kitabımı yayınlayarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(23)

  1. Hocam keşke video olarak yapsaydınız sizin kadar proföstönel olmadımız için ne ne oldugunu tam bilmiyoruz : ) ama çok güzel bi çalışma eliniz dert görmesin

  2. üstad bu sliderin yapılış videıosunu çekersen çok sevinirim , ne yaptıysam ne denedıysem hep hüsranla sonuçlandı , yardımcı olursanız sevinirim çok istiyorum bu slideri sayfama yüklemek 🙂 teşekkür ederim şimdiden

  3. Gerçekten çok güzel bir uygulama dedim oluşturdum localde pcde sorunsuz çalışıyor fakat nete yüklüyorum sadece arka plan çıkıyor:((( Yardım

  4. Thumbs klasörlerinin içine resimlerin küçültülmüş halini koyacaksın. resimleri küçültmek için resim boyutlandıran programlar var . Onları deneyebilirsin.z

  5. istersen kızda :/

    Html driverdeki hazır şeyleri bize gösteriyon
    Yapmıyonmu daha ilgiç şeyler :/ ya

    egitime acız dede 🙂

    Abi hazır site veriyonya bari veri tabanınıda yap öle ver bilmik biz cahiliz sen yardım et :/

    1. murat arkadaşım internet ortamı olmasa hiçbirşey öğrenemeyeceksin farkındasın değil mi? Olaya birde o açıdan bak. Şimdi bu paylaşımları insanlar yabancı sitelerden bulmak için baya zaman harcamaları gerekiyor. Bizimde hedefimiz bu paylaşımları bulmak sizlerle paylaşmak ve nasıl düzenleneceğini anlatmak. Kızmaya gerek yok, sen sadece birazcık düşünsen bizlerin ne yapmak istediğini daha iyi kavrayacaksın. birde siteyi iyi gez eğitimle ilgili bir ton video bulunmaktadır.

  6. anlıyorum abim 🙂
    Videoları takip ediyoruz ben ve arkadaşlarım sitenizide çok seviyoruz.

    senden istedigim 🙂
    Paylaştıgın hazır sitelere bir de veri tabanı baglantısı atmam 🙂

    Madem böyle şeyler yapıyon buda kardeşinin bir ricası olsun sadece

  7. Merhaba bana staj defterim için yardım eder misiniz ? ben bu dosyayı indirdim. Dreamweaverda açtım. Şimdi kodları kısaca anlatıp defterime eklemem gerekiyor. Mesela bu kodlarla arka planımı ayarladım. Bununla albümü oluşturdum gibi. Yardım eder misiniz lütfen??

  8. hocam bunu web siteme nasıl gömerim. sitemden buna link veriyorum ama tamamen faklı bi sayfaya yönledirmiş oluyorum. nasıl kendi tasarımı bana ait olan galeri.html klasöründe yayınlarım ?

  9. Oğuz kendin bir sayfa oluşturduktan sonra bu çalışmanın index.html dosyası içindeki tüm kodları kopyalayıp kendi sayfana yapıştırıyorsun. O kadar.

  10. Hocam aspx sayfasına taşıdım kodları ama.Chrome da thumbs resimler görünürken büyük resimler görün müyor.
    sadece span yazısı cıkıyor sorun ne olabilir acaba ?

  11. Hocam bu galeride yazı tipini nasıl değiştirebiliriz. Bir türlü değiştiremedim. Örneğin büyük resimlerin altında çıkan açıklama yazısının yazı tipini değiştirmek istiyorum yardımcı olursanız sevinirim.

Yorum bırakın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.