Home JQuery JQuery Parallax Slider Yapımı

JQuery Parallax Slider Yapımı

367
13

Merhaba Arkadaşlar,
anlatımlarından başlamışken farklı yapıya sahip slider örneklerinide sizlere sunmak istiyorum. Bunlardan bir taneside  Parallax Slider. Çok farklı bir yapıya sahip bu slider sitenizde görselliğide artıracağına inanıyorum..  Kullanımı diğer sliderlar gibi çok basit aslında . İsterseniz hemen anlatımına geçeyim.

Aşağıdaki indirme linkine tıkladığınızda 3 adet klasör ve 1 adet index.html dosyasıyla karşılaşacaksınız. İmages klasörüne resimlerimizi koyduktan sonra değişiklik yapmak için index.html dosyasını açıyoruz ve aşağıdaki satırlardan düzenlemelerimizi yaptıktan sonra sliderımız kullanıma hazır hale gelecektir.

Örnek ; omer.jpg adında bir resmimiz olsun” Resimlerinize Türkçe karakterlerle isim vermemeye çalışmalısınız yoksa resminiz internet ortamında görüntülenmeyecektir” bu resmin boyutları slider a boyutlarına uygun olması için 760×280 çözünürlüğe çevirmelisiniz. Bunu yaptıktan sonra resmin bir küçük halini 83×55 boyutunda  kaydederek images klasörünün içindeki thumbs klasörünün içine atacağız. Diğer resimleride aynı şekilde düzenliyoruz ve klasörlerimizin içine atıyoruz. Sonrasında ise index.html dosyasını dreamweaver veya frontpage gibi editör programlarla açarak ve aşağıdaki satırları düzenliyoruz.

Yukarıdaki omer. jpeg dosyasına göre düzenlenmiş halidir.

Yorumlarınızı bekliyoruz.

KOLAY GELSİN

(367)

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

Yorum(13)

  1. Hocam öncelikle çok teşekkür ederim.Gerçekten yayımladığınız site çok harika.Burdan hergün yeni birşey öğreniyorum.Bir sorum olucak.
    Ben suan html bi site yapıyorum.Bu projenin içindeki images js ve css dosyalarını attım fakat ben bunu sitemde nasıl çalıştırabilirim yardımcı olurmusunuz ?
    sitemde link verip baska sayfaya yönlendirmek istemiyorum.Benim anasayfamda hemen menünün altına koymak istiyorum.
    Şimdiden teşekkür ederim.(Bu arada size sormadan önce araştırdım fakat açıklayıcı cevaplar bulamadım daha yeni olduğum için html de tam bi cevap istiyorum lütfen)

    1. ihsan arkadaşım verdiğim örneklerdeki sayfaların içeriğini kopyalayıp kendi istediğiniz sayfaya yerleştirebilirsiniz.ilk önce burda yayınlanan sayfaların < head> ve < /head> arasındaki scriptleri kendi sayfanıza kopyalayın sonrasında ise

      < /body> içeriğinide kendi sayfanızda oluşturmuş olduğunuz tablo veya< div>in içine yerleştirdiğinizde tamamen istediğiniz gibi olacaktır. tabiki tavsiyem css ve html dersleri almanız ve öğrenmeniz gerekmektedir.
  2. ihsan bey yazdığım yazıyı tekrar okuyun çünkü bazı yerleri çıkmamıştı düzelttim. söylediklerinizle ilgili emin olun bir video çekeceğim. facebook beğen sayfamıza üye olursanız ordan haberleri yayınlıyorum direk karşınıza çıkar. kolay gelsin

  3. sitenizi çok beğendim birde bu galerinin fla dosyası olsaydı sonuçta sadece flash ile hazırlanmış bir site yapacaksak bu galeriyi kullanamayacağız demek oluyor

    1. Bu flash yapılmış bir resim galerisi değil sadece javascript ve jquery ağırlıklı bir slider. Fla dosyası olmaz o yüzden. herşeyi kodlarla yaparsınız… Flash daha farklıdır…

  4. merhabalar oncelilikle paylasimlariniz icin tesekkur ederim. Ben bu eklentiyi sitemin tam ortasinda daha kucuk olarak eklemek istiyorum yardimci olursaniz sevinirim

  5. Hocam öncelikle çok teşekkür ederim.Gerçekten yayımladığınız site çok harika ve çok bilgilendirici. Hocam ben bu kodları asp.net’e nasıl yazarım.

    1. Muhammed arkadaşım kodları nasıl yazarım çok geniş bir konu. ASP biliyorsan yapman gereken yönetim panelinden bu sayfa için bir yönetim sayfası oluşturup. Resim upload bölümü oluşturup sonrasında o resim kodunu slider’ın resim kodlarının oraya yazdırman. Daha başka bir şey yapmıyorsun. Bu sayfayı olduğu gibi kullanabilirsin.

Cevaplayın ihsan Yanıtı iptal et

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.