JQuery Scroll Web Menü Galeri Yapımı
Arkadaşlar sizlerle Jquery tarzı Scroll bir menüyü galeriye çevirmeyi anlatacağım. Jquery scroll 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>
(78)
Yorum(10)
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 cok beendim walla derste werdiğinizde daha mı güzel ne 😀
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:)
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
bülent bey sayfamızda yer alan linkteki anlatılanları denediniz mi?
http://www.omerbozalan.com/jquery-ve-lightbox-cakismasi-cozumu.html
lütfen yukarıdaki işlemleri yapınız. olmazsa başka dosyayı email yoluyla gönderebilirseniz bakabiliriz.
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
peki neden dışarıdan çağırmak istiyorsun. Çalışıyorsa sorun yok değil mi:)
dediğin gibi aslında
**/
@import url(‘global.css’);
@import url(‘common.css’);
ancak bu şekilde yapabilirsin. kolay gelsin.
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
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.
Levent bey fancybox galeriyi kullanabilirsiniz. Sitemizde 2 farklı anlatımı bulunmaktadır. videolu ve yazılı olarak anlatımları incelemeniz tavsiye ederim.