Home CSS3 / HTML5 Css3 Resim Galerisi Yapımı
Css3 Resim Galerisi Yapımı

Css3 Resim Galerisi Yapımı

1.17K
30

Merhaba arkadaşlar bu zamana kadar hep jquery galeri ve html galerilerden bahsettik . Şimdi sizelere css3 ile yapılmış güzel bir resim galerisinden bahsedeceğim. Hemde çok basit …

Aşağıdaki dosyayı indiriyorsunuz ve içindeki index.html dosyasını düzenliyorsunuz. İndirdiğiniz dosyada 2 adet klasör ve index.html dosyası bulunmakta resimleri images klasörüne atıp sonrasında ise index.html dosyasından resimleri karşılık gelen yerleri dolduruyorsunuz.  Aşağıda örnek olarak index.html dosyasının içeriği bulunuyor. Mesela elimizde dag.jpg resmi olsun , o resmi images klasörüne atıyorsunuz ve aşağıdaki düzenlemeyi şu şekilde yapıyorsunuz.

<a tabindex=”1″><img src=”images/dag.jpg“></a>

resim adediniz 12 den fazla ise yeni bir tabindex açarak numarasını 13- 14 gibi sırası gelen numarayı veriyorsunuz.Yani aşağıdaki gibi;

<a tabindex=”13“><img src=”images/1.jpg”></a>

<a tabindex=”14“><img src=”images/1.jpg”></a>

 

 

Örnek index.html dosyası aşağıdaki gibidir.

<div>
<a tabindex=”1″><img src=”images/1.jpg”></a>
<a tabindex=”2″><img src=”images/2.jpg”></a>
<a tabindex=”3″><img src=”images/3.jpg”></a>
<a tabindex=”4″><img src=”images/4.jpg”></a>
<a tabindex=”5″><img src=”images/5.jpg”></a>
<a tabindex=”6″><img src=”images/6.jpg”></a>
<a tabindex=”7″><img src=”images/7.jpg”></a>
<a tabindex=”8″><img src=”images/8.jpg”></a>
<a tabindex=”9″><img src=”images/9.jpg”></a>
<a tabindex=”10″><img src=”images/10.jpg”></a>
<a tabindex=”11″><img src=”images/11.jpg”></a>
<a tabindex=”12″><img src=”images/12.jpg”></a>
</div>

NOT: Bu uygulamalar internet explorerda düzgün çalışmayabilir.

Anlatım : Ömer BOZALAN

 

 

(1173)

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(30)

    1. Önemli değil . Elimden geldiğince webtasarımla uğraşan arkadaşlara yardımcı olmaya çalışıyorum. Daha güzel şeyler gelecek emin olun.:)

      1. ama öyle yaptığımda indexde bulunan diğer görselleri bozuyor font renkleri bacgraund rengini değiştiriyor diğer css ile çakışmamı yapıyo onun içinmi bilemedim onla alakalı bi düzeltme yapabiliyormuyz.

        1. verdiğim çalışmanın css dosyasına girip ordaki arka planı değiştirmeniz gerekir.
          eğer sayfada bozulmalara neden oluyorsa dışarıdan css dosyasını import ederek yapmanız gereklidir.

  1. Galeri sayfası bilgisayarımda düzgün çalışıyor, Site de resimler açılmıyor. Yardımcı olur musunuz?

    1. Nefise hanım resimlerin yazıları türkçe karakter içermemeli . Mesela ömer.jpg değil omer.jpg olmalı ç,ö,ü,ş,ğ,ı gibi ve bunların büyük harfleri resim isimlerinde kullanılmaz.

          1. Sizin hazırladığınız başka bir galeriyi kullandım ve oldu. Çok teşekkür ederim. İçerikler, anlatım harika. Çok yararlandım. Keşfettiğime de sevindim. 🙂

  2. Merhaba. Öncelikle yaptığınız paylaşım çok işime yaradı ancak resimlerin yamuk olarak değilde düz olarak nasıl düzeltebilirim yardımcı olabilir misiniz?

    1. Enes arkadaşım bu css3 galeri farklı bir efekte sahip olmasından dolayı böyle seçilmiş örnek olarak verilmiştir.:) yani Düz versek eğik nasıl yaparız, eğik versek düz nasıl yaparız gibi sorular hiçbir zaman bitmez:)Zaten düz yapılmış galeriler var olduğu için bizde eğik şeklini veriyoruz. Düz şeklini öğrenmek istiyorsanız sitemizin arama kutucuğuna fancybox yazarsanız sizi istediğiniz galeri yapımına gönderecektir . kolay gelsin.

  3. hocam çok sağolsun tüm tasarımları buradan hallediyorum sizin sayenizde güzel bir sitem olacak bi yayınlamak kaldı 🙂

    1. Serdar arkadaşım bu başlı başına bir web sayfası bence direk galeri.html sayfası olarak oluştur. Sonra ana sayfandan bu sayfaya link ver. Bence senin için daha basit bir işlem olacaktır.

  4. Öncelikle bu güzel ve sade anlatım için teşekkürler..
    Hocam resimlerin boyutları için css main dosyasını actim ama border,yazı fontları vs bunların boyutlarını bulabildim..
    Kendi resimlerimin çözünürlük ve boyutları bayağı büyük..Boyutları hangi satır ya da sütundan değiştirebiliyoruz Ricam etsem?

    Bu arada template imin içine resimleri sorunsuz ettim ve çok şık durdu bu galeri paylaşım için çok ama çok teşekkürler..

      1. Hocam hızlı Cevap için çok teşekkürler..

        Benim resimlerim 1280 * 768 gibi bir çözünürlüğe sahipler…

        Bu galerideki resimler 400 * 300 ki benim için çok kötü bir boyut bu..

        Site görsel olarak resimlere fazlasıyla kıymet verdiği için resimlerimin boyutunu düşürmem pek işime gelmiyor..Başka bir çözüm yöntemi yok mudur?

        400* 300 yerine en azından 1024 * 768 yapabilseydik keske 🙁

    1. Hocam Allah Razı olsun..Çok Teşekkür ederim %400 yapınca iki değişkeni de istediğim boyuta geldi şuan..Çok ama çok sağolun..

      1. Hocam 1 sorum daha olacaktı sizi sıkmaz ise..Bazı sitelerin yazı fontlarını (arkadaşların da başına gelebilir Tema dan dolayı) internet explorer sorunlu gösteriyor.. Özel yazı fontlarından dolayı sanırım.Bunu aşabilmenin yöntemi nedir?

        Cevabınız için şimdiden Teşekkür ederim.

  5. Hocam merhabalar ben aynen bu şekilde bir galeri yapmak istiyorum ancak bu galeriyi “ürünlerimiz” başlığı altına kullanıcağımdan ötürü resimlerin altına’da ürün adı ve fiyatı girmek istiyorum bunu nasıl başarabilirim iyi çalışmalar.

  6. hocam galerinin sayısını nasıl çoğaltıcam web tasarımda yeniyimde pek bi bilgim yok 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.