Şişen Resim Galerisi Yapımı
Merhaba arkadaşlar bu yazımızda farklı bir resim galerisi(üzerine gelince şişen”büyüyen”) yapacağız . Sitenizde belki bu tarz bir resim galerisine ihtiyaç duyabilirsiniz. Bizde bu amaçla sizlere bu çalışmaları sunuyoruz. İnşallah yeterince yardımcı oluyoruzdur.
Bu resim galerisi internet explorerda kare şeklinde, diğer browserlarda ise yuvarlak şekilde gözüküyor. 🙂 Ama sonuçta çalışan bir resim galerisi. Çalışma prensibi ise mouse üzerine geldiğinde büyüme efekti gibi resmi ön plana çıkartması ve istersenizde tıklandığında başka bir sayfaya yönlendirebiliyorsunuz. Her resmin altında kendisine ait title başlığı var, yani resimlerin altına yazı yazabiliyorsunuz. Kısacası güzel bir resim galerisi çalışması.
Size verereceğim rar dosyasında 7 adet dosya var bunlarda neler yapmanız gerekli onları anlatayım. İmages Klasöründe galerinin arka planında kullanılan resim bulunmaktadır” bu kısmı istediğiniz gibi değiştirebilirsiniz“. CSS klasöründe ise sayfalarda kullanılan css lerin değişikliklerini yapıyorsunuz” mesela yazı tipini değiştirebilirsiniz”. ASSETS klasörü sizin için en önemli olan klasör, bu klasörün içindeki resimleri galerinizde kullanacağınız resimlerle değiştiriyorsunuz. Sonrasında ise index.html ,index2.html , index3.html dosyalarından hangisini beğendiyseniz onu dreamweaver programında açarak düzenlemelere başlıyorsunuz. Ben bir kaç düzenleme hakkında sizi bilgilendirmek istiyorum.
Aşağıda gördüğünüz assets klasörünün içindeki resim dosyaları burdaki resimleri koyacağınız resimler ve uzantılarıyla birlikte değiştiriyorsunuz. Örnek : mesela omer.jpg dosyanız var aşağıdaki dosyayı şöyle düzenlemeniz gerekiyor.
<a href=”#”><img src=”assets/omer.jpg” alt=”” /></a> bu şekilde.
ŞUNU UNUTMAYIN; Resimlere Tıklandığında Herhangi bir Sayfaya gitmiyor. Sadece O resmi seçmiş oluyorsunuz.
<div>
<div>
<a href=”#”><img src=”assets/img1.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img2.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img3.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img4.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img5.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img6.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img7.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img8.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img9.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img10.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img11.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img12.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img13.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img14.jpg” alt=”” /></a>
<a href=”#”><img src=”assets/img15.jpg” alt=”” /></a>
</div>
SORULARINIZ OLURSA LÜTFEN YORUM KISMINDAN SORUNUZ.
Anlatım: Ömer BOZALAN
Kolay gelsin
(153)
Yorum(24)
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 arkadasım su an tatılde oldugumdan ancak tel ıle baglanabılıyorum. facebook grubumuza uye olup ordan dosyalarını gonder bakayım. Kolay gelsın
Kolay bir uygulama oldu.
Çok güzel açıklamışsınız, teşekkürler.
Ben teşekkür ederim. sitemize üye olduğunuz ve yorumlarınızı bizlere ilettiğiniz ilettiğiniz için
linkler çalışmıyorr yardım edin lütfen
🙁
Mehmet Celil bey Linklerin hepsi çalışıyor. Kendi sunucumdan link veriyorum.
üst yoruma bakın lütfen yaptım olmadı orjinal dosyanızdan sadece link verdim tıklandığında gitmiyor resim büyüyüp kalıyor emeğinize sayğım sonsuz ama yardıma ihtiyacım var :/
Bu resimlerdeki üzerine gelince yuvarlak bir şekilde şişmesi “<img src=”assets" kodundaki ( assets) mi sağlıyor
Harika bir düşünce ve tasarım kutlarım ancak bu söz konusu rar dosyası nerede
teşekkürler
Coşkun Bey, Çalışmayı indirmek için Tıklayın yazısına tıklarsanız bilgisayarınıza indirilecektir. 🙂
bunu nasıl kullanabilrim hangi program ile
Mehmet zaten kullanılmışını veriyoruz.İndiriyorsun, kendine göre düzenliyorsun.
resimlere link veriyorum ama çalışmıyor.
verdiğim linklere gitmiyor. yardımcı olur musunuz?
ömer bey yardım edebilir misiniz? sorun nedir? neden linklere gitmiyor acaba bunu da açıklarsanız memnun olurum.
Kerim arkadaşım söylediğiniz üzere birçok işlem gerçekleştirerek link verme işlemi denenmiştir. Lakin hiçbir sonuç alınamamıştır. Resme tıklanmasının neden resmi seçili hale getirebilmek içindir. Diğer türlü link verilememektedir. Anlatımdaki link verme işlemini de sizin sayenizde değiştirdik. Teşekkürler. İyi çalışmalar.
ilginiz için teşekkürler ömer hocam
ömer bey benim sitemde script kodu var ikinci script kodu ekledigimde hata veriyo onu nasıl yapabilirim ?
bünyamin arkadaşım script kodu hatasının çözümü sitemizde vardır. JQuery ve Lightbox aratırsan bulabilirsin. kolay gelsin.
Mehrhaba ocam ilk once ellerinize salik cox guzel olmus ama ocam video caliwmiyor olurmu linki yenileyesin
Ferid arkadaşım bu anlatımın videosu yoktur.
hocam yapadım video yada açıklama yapabilirmisinz
Mustafa arkadaşım malesef her şeye video yapamıyoruz. Ama yukarıda her şeyi anlattım. Biraz HTML bilgin olsa yaparsın gibime geliyor.
ömer bey, bu bir klasöre yüklü sabit resimler için tasarlanmış bir örnek sanırım. bunu klasör gösterek yada resim uploadkısmıda kullanılarak yükleyeceğimiz resimlereğer bu sayı 5 te olabilir 100 de bunları gösteren bir code örneğiniz varmı yada bu yapıyor ise neler değiştirilmeli
merhabalar Ömer Bey Öncelikle ç<lışm<l<rınız için teşekkür ederim.Sorum şu:Şişen küçük resmin üzerine tıklanınca orjinal büyük resmi açma işlemini nasıl yapabiliriz ?Yani bir bakıma tumb durumundan büyük orjinalini gösterme işlemi
Merhaba Mesut Bey, Burada fancybox galeri yapımını anlattım . Linkten istediğiniz resim galerisini yapabilirsiniz. https://www.omerbozalan.com/siteye-profesyonel-galeri-ekleme-fancybox-galeri.html