Css3 Resim Galerisi Yapımı
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)
Yorum(30)
Yorum bırakın Yanıtı iptal et
Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.
Ömer Hocam çalışmalar süper tşkler bizde nasiplendik saolasınız:))
Ö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.:)
peki bu resim galerisini hazırladığım bir index içine nasıl atabilirim.
kodları kendi index dosyana olduğu gibi yapıştıracaksın.
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.
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.
sorunu çözdüm çok teşekkür ederim ömer bey
Galeri sayfası bilgisayarımda düzgün çalışıyor, Site de resimler açılmıyor. Yardımcı olur musunuz?
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.
Resimlerin isimleri 1,2,3 şeklinde..
Nefise hanım facebook grubumuzu beğenirseniz ordan iletişime geçebiliriz.
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. 🙂
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?
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.
hocam çok sağolsun tüm tasarımları buradan hallediyorum sizin sayenizde güzel bir sitem olacak bi yayınlamak kaldı 🙂
uygar önemli değil . sitelerinin adreslerini facebooktan gönderirsen inceleme fırsatı bulabilirim.
bunları dreamvearda web siteme nasıl ekleyeceğim kısaca anlatarmısınız
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.
Ö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..
Emre resimlerinizin boyutlarını images klasöründe yer alan resim boyutlarına indiriyorsunuz.
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 🙁
css içinden .gallery a:focus img yazılı satırı bulup
height ve width yüzdelerini de artırabilirisin.
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..
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.
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.
hocam galerinin sayısını nasıl çoğaltıcam web tasarımda yeniyimde pek bi bilgim yok yardımcı olursanız sevinirim
arkadaşım makalede zaten anlatım yaptım. Okudun mu, makaleyi?
Yanyana 4 resim değil de 6 resim koymak istiyoruz.Bunu nasıl yaparız ?
Abicim elinde emlak site template i varmı acaba
Muzaffer bey malesef elimde emlak sitesi tarzı bir site bulunmamaktadır. Kusra bakmayın.