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)
Yorum(23)
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.
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
Bunu bloggerde nasıl yapabiliriz ?
blogger a uyarlamak zor. Eğer ftp sana ait ise bunu ftpye atıp dışarı link vererek yani bu sayfaya link vererek gösterebilirsin.
ü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
Ali nerelerde yanlışlıklar yaptın. açıklarsan yardımcı olabilirim.
Hocam ben 80 tane fotograf atıcam ama birbirine girdi 43 tane attım bunu parcalama sansımız var mı alt alta gözükse fotolar
hocam denedim olmadı dreamweaver cs4 ü kullanıyorum bialakası olabilir mi acaba?
Ali arkadaşım neyde sorun yaşadın anlamadım. Biraz ayrıntılı anlatırsan sevinirim.
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
Grafiker kız benim sayfamda demo ya tıkladığınızda nette görüyorsanız. Sizin dosyalarınızda sorun vardır.
Hocam Küçük resimleri nasıl yapıcaz bi türlü yapamadım
🙁
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
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 :/
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.
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
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??
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 ?
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.
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 ?
aspx kodlamasını yanlış yapmış olabilirsin. Yeniden denemelisin.
peki hocam bu çalışmaya nasıl menü ekliyecez ortalı olmuyor
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.
Kenan arkadaşım index.html dosyasında bulunan src=”js/Note_this_400.font.js” satırının tamamını silmelisin. Kolay gelsin.