Home JQuery JQuery Scroll Web Menü Galeri Yapımı
JQuery Scroll Web Menü Galeri Yapımı

JQuery Scroll Web Menü Galeri Yapımı

186
10

Arkadaşlar sizlerle  Jquery tarzı Scroll bir menüyü galeriye çevirmeyi anlatacağım. menüyü sitenizde istediğiniz gibi kullanabilirsiniz.  Diğer derslerde de olduğu gibi yine hazır olan rarlı dosyayı en aşağıda bulabilirsiniz.

Şimdi anlatıma geçeyim.

Rar’lı dosyayı çıkarttığınızda karşınıza 1 adet css dosyası, 1 adet images klasörü , 1 adet bg1.jpeg  resmi” bu resim arkaplan resmidir isterseniz herhangi bir resme bu ismi vererek kendi arkaplanınızı oluşturabilirsiniz“, model_big.png resmi ” bu resimde anasayfadaki yani index.html sayfasındaki resimdir bu resmide değiştirebilirsiniz yalnız ismi yine anı olmalıdır.” ,back.png resmi ” bu resim ise index.html sayfasındaki Geri dön yazısıdır. isterseniz bu yazıyıda değiştirebilirsiniz.“, en son olarakta index.html dosyasını bulacaksınız.Not defteri veya Dreamweaver programında açtığınızda aşağıdaki kodları göreceksiniz.

Aşağıdaki örnek index.html nin bir bölümüdür.  Sayfada gözüken butonun adı TIKLA-1 dir ordan buton adını değiştirebilirsiniz. <a href=”#”><img src=”images/1.jpg” alt=””/></a> kısmındaki # işaretinin olduğu yere ise resme tıklandığında nereye gideceğini yazıyorsunuz. Diğerlerinide aynı şekilde düzenlediğinizde karşınıza çok güzel bir galeri yada web sitesi çıkacaktır.

KOLAY GELSİN

  <a href="#">TIKLA-1</a>
<div>
<div>
<a href="#"><img src="images/1.jpg" alt=""/></a>
<a href="#"><img src="images/2.jpg" alt=""/></a>
<a href="#"><img src="images/3.jpg" alt=""/></a>
<a href="#"><img src="images/1.jpg" alt=""/></a>
<a href="#"><img src="images/2.jpg" alt=""/></a>
<a href="#"><img src="images/3.jpg" alt=""/></a>
<a href="#"><img src="images/1.jpg" alt=""/></a>
<a href="#"><img src="images/2.jpg" alt=""/></a>
</div>

DemoButton
hemen-indir-butonu

(186)

omerbozalan 1981 doğumluyum. Üniversite eğitimimi, Sakarya Ünv. Elektronik ve Bilgisayar Öğretmeni 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ınlarak tüm bildiklerimi sizlerle paylaşmak istedim. Kendimi Web Tasarım, Grafik Tasarım, Donanım konusunda hâlâ geliştirmekteyim.

Yorum(10)

    1. gülnur derste mecburen halk eğitim planına uymak zorundayız. ama ben size zaten derste elimden geldiğince fazlasını vermeye çalışıyorum. 🙂 siteyi takip edersin artık:)

  1. hocam saygılar
    kullandıgım jquery uygulaması bazı css kodlarla calısıyor.
    bu css kodlar jquery kullandıgım index sayfasında.ben bu css kodlar ayrı bir css dosyasına attıgımda malesaf calısmıyor.css kodların yolunu jquerye nasıl yonlendıre bılırım.

    kullandıgım halde olmuyor

    @import “stil.css”;
    bu tarz oluyor ama ben import kullanmak ıstemıyorum. baska bır yontemı varmı saygılar

  2. jquery cakısmasından ziyade jquery kodlarının arasındakı css kodları var.o kodlarda aynı indexte ise sorun yok fakat ben bu css kodları baska sayfadan cagırıyo ısem malesef olmuyor

  3. haklısınız eskı tarayıcılarda ımport ozellıgını desteklemedıgı ıcın cekınıyordum ama yapcak bırsey yok sag olun

  4. Hocam merhaba.Galeri olarak nasıl kullanabiliriz?Küçük resimlere tıklayınca bulunduğumuz sayfanın ortasında nasıl görülebilir?Resim yollarını yazdım,fakat resimler ayrı sayfada açılıyor.

    1. Levent bey fancybox galeriyi kullanabilirsiniz. Sitemizde 2 farklı anlatımı bulunmaktadır. videolu ve yazılı olarak anlatımları incelemeniz tavsiye ederim.

Senin Yorumların

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Sonucu Giriniz * Time limit is exhausted. Please reload CAPTCHA.