Home JQuery JQuery Slider Tarzı Galeri Yapımı
JQuery Slider Tarzı Galeri Yapımı

JQuery Slider Tarzı Galeri Yapımı

348
27

Merhaba Arkadaşlar ,

Bu dersimizde   ile yapılmış bir slider galeri çalışmasını sunacağım. Bunu bir web site olarakta kullanabilirsiniz. Yapmanız gereken yazdıklarımı uygulamanız.

Size verdiğim RAR dosyasını her zamanki gibi açıyorsunuz . İçine 3 adet klasör 1 adet ise index.html dosyası bulunmaktadır. css klasörüyle fazla işiniz olmayacak ; eğer sitede kullanacağınız yazı tipi gibi şeyleri değiştirmek istiyorsanız biraz css bilginiz olması yeterli. js klasöründe ise jquery ile ilgili dosyalar bulunmaktadır; amacı ise Jquery kodlarının düzgün bir şekilde çalışmasını sağlamak. Bizim için en önemli iki dosya ise birincisi İmages klasörü , diğeri ise index.html dosyalarıdır. Çünkü içeriği ancak bu dosyaları düzenleyerek değiştirebiliriz.

İmages klasörünün içinde iki klasör daha bulunmaktadır( albüm1 ve albüm2) Bu klasörlerin içinde de yine küçük resimlerin bulunacağı Thumbs klasörü var. Resimlerin küçük hallerini thumbs klasörlerinin içine büyük olan resmi ise Albüm1 i kullanıyorsanız o klasörün içine atacaksınız. Bu şekilde resimlerini düzenliyorsunuz. Sonrasında ise index.html dosyasını dreamweaver programında açarak adı geçen resimlerin isimlerini değiştiriyorsunuz veya başlangıçtaki KOCAELİ-GÜMÜŞHANE gibi başlıkları düzenleyebilirsiniz.

Sorunlarınız olursa yorum bölümünden yazınız.

KOLAY GELSİN.

Anlatım: Ömer BOZALAN

DemoButton

hemen-indir-butonu

(348)

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(27)

  1. Emeğinize sağlık Ömer Hocam,yararlı bir paylaşım olmuş.Bana kursdan bir arkadaşımızın kuzeninden aldığımız sliderı hatırlattı.Hatırlıyormusunuz hani altta küçük resimler üstte büyük resim şeklindeydi,Çoğu yerde kullanıyorum hala.Bu paylaşımınızda aynı şekilde çok işime yarayacak. Teşekkür ederim.

    1. Therefor he just shows it as an example in order to let create ourself something. The point is to understand the way to do it and not to explore the celebrities or models.

  2. deniz çağlar bildiğim kadarıyla bu tür çalışmaları wp ye entergre etmek oldukça zordur. ama link verip başka bir adrestede yayılayabilrsin. yani harici link vererek.

  3. deniz ömer hoca daha iyi bilir ama elimde kaynak olursa burda paylaşırım. Ama googleda şöyle arayabilirsin. WordPress butona harici link verme diye aratırsan sonuçlardan kesin bişeyler bulursun sanıyorum. bakalım ömer hoca ne diyecek:)

  4. deniz arkadaşım sorunun cevabını adem vermiş ama nasıl yapıldığını anlatmamış ben şimdi anlatayım. beğendiğin bu Jquery galeriyi harici bir sayfa olarak yapıp php olarak kaydedeceksin. Sonrasında ise Wp de temanın içine atacaksın.
    örnek ;

    < ?php /* Template Name: temanın adı */ get_header(); ?>

    Sayfa İçeriğimiz Burada

    < ?php get_sidebar(); ?>
    < ?php get_footer(); ?>

    sayfa içieriği kısmını düzenledikten sonra mesela ornek.php adında kaydedip, wp-content / themes / kullandığınız tema klasörü içine atacaksın.sonrasında ise admin şifrenle wp temana girip ordan sayfa yeni ekle diyip sağ taraftaki sablon kısmından ornek.php sayfanı bulup seçiyorsun. bu kadar basit 🙂 istediğin gibi oluyor.
    KOLAY GELSİN.

  5. Merhabalar hocam, sitenizi gezdim bir çok konu hakkında bilgi paylaşımı yapmaktasınız, bu çok güzel birşey, yaptığınız bu olayı öncelikle takdir ediyor ve sizden bir konu hakkında ufak bir yardım istiyorum…

    Ben hazır indirmiş olduğum slider’ları yaptığım css çalışmalarıma entegre etmek istiyorum, fakat sizin deniz arkadaşımıza yapmış olduğunuz tanım wordpress üzerinden entegre işlemi, fakat ben wordpress’i hiç kullanmıyorum, ben nasıl kendi yaptığım css tasarımıma slider veya herhangi bir jquery tasarımı entegre edebilirim, deniyorum hata alıyorum, tek entegre edebildiğim şey “lightbox” oldu. Lütfen yardımcı olabilir misiniz?..

    1. burda yayınladığım dosyaların hepsi wordpress için değil kendi başına kullanılan dosyalardır. index.html dosyalarını düzenlemeniz tamamen size kalmış bir olay. baştan sonra web sayfa tasarımını içeren bir video çekmiştim onu izlerseniz bu uygulamaları yapacağınız tasarıma uygulayabilirsiniz. aşağıdaki linke girerseniz zannımca istediğinizi alacaksınız. Yeni yeni videolarda sitemizde olacaktır.
      Link :http://www.omerbozalan.com/dreamweaver-photoshop-site-yapimi.html

  6. Merhaba öncelikle paylaşımlarınız için teşekkürler.
    Ben .NET kullanarak site yapıyorum fakat birçok sliderı entegre edebilmeme rağmen bu sliderı projeme entegre edemiyorum çünkü üzerinde hiçbir oynama yaptırmıyor.
    Misal Ömer bozalan yazan kısımlarda görünmüyor resimler falan görünüyor ama.
    Benim yapmak istediğim ben bu resimleri database den atmak hadi onu bir şekilde yaparım fakat resme tıklandığında sayfaya ID sini response etme imkanım varmı acaba.

    1. Recep arkadaşım resimlere tıkladığında zaten ıd lerini göremiyorsun. onları id leriyle çekmen biraz zor. Ben bilmiyorum açıkcası. Ama olmazda diyemiyorum.

  7. bende asp.net projeme ekledim.Fakat chrome da resimleri tıkladığımda büyümesi gerekirken kayboluyor.İnternet explorer dada Ana sayfa linki ve üstteki yazı tipi desteklenmiyor sanırım onlar çıkmıyor.Chrome daki problem ne olabilir acaba?

    1. deniz. çalışmanı facebook grubumuzdan gönderirsen bakabilirim. normalde çalışması lazım. çünkü çalışmanın sade hali chromeda güzel şekilde çalışıyor.

  8. Hocam merhaba çalışma gerçekten çok güzel fakat bi sorum olucak mesela sayfaya girdiğimizde Kocaeli ne tıklayınca değilde direk sayfa açıldığında kocaeline tıkladığımız belgenin gelmesini nasıl sağlıcaz

    teşekkürler

  9. hocam belgeyi indirdim lakin tumblr ların üstüne tıklayınca büyük resimler açılması gerekirken resimler gözükmeyecek kadar ufak açılıyor.

    1. yasin gurer arkadaşım, bende çalışmayı tekrar kontrol ettim. İndirdim, denedim. Lakin senin dediğin gibi değil. Resimlere tıklayınca büyüyor. Yapabileceğim bişey yok bu durumda.

  10. Ömer Bey bu slider i chrome harici tüm tarayıcılarda çalışıyor.Chrome olarak actıgımda sizin vermiş oldugunuz örnekte açabiliyorum.kendi sunucuma attıgımda resim kücülüyor ve beyaz bir noktacık şeklinde gözüküyor.Yardımlarınızı rica ediyorum.

    1. Ahmet bey biraz önce denedim. Chrome da çalışıyor. Zaten Ben devamlı chrome kullanıyorum. Hiçbir sorun bulamadım. Resimleri değiştirmeden verdiğim çalışmayı sunucuya atıp denemenizi tavsiye ederim.

  11. Sizin sitede calisiyor bende girdim gördüm. Dogrudur bende calistirdim.Fakat kendi bilgisayarımda ve sunucumda calistiramadim. Nedenini bilemedm fikir almak istedim.

    1. Ahmet bey, burda yayınladığım önizleme linki çalışıyor mu peki? chrome da. Eğer çalışıyorsa sizin sunucunuzdan kaynaklanıyor. Sunucular Bazı scriptleri çalıştırmaya izin vermiyorlar. Bilgisayarda dediğiniz gibi oluyor lakin sunucuya attığınızda çalışıyor. Biraz önce denedim ve çalıştı. %100 sunucudan kaynaklanan bir engellemeyle karşı karşıyasınız. Kolay gelsin.

    1. Ahmet bey ben teşekkür ederim. Ama bu sunucu meselesi çok önemlidir. bazı işlerinizde bunda olduğu gibi sorunlar çıkabilir. Sunucunuzu değiştirin veya sunucunuza mail atın. Sunucu olarak tavsiyem turhost tur. Hiçbir sorun yaşamazsınız.

  12. Hocam teşekkür ederiz fakat bir sorum olucak . Siz 2 kategori olarak paylaşmısınız bu kategorileri 2 den fazla yapma imkanımız varmı ? var ise nasıl yapıyoruz. Kurcalayarak bulmak isterdim fakat bozucam diyede korkuyorum 🙂 yanıtınız için şimdiden teşekkür ederim 🙂

    1. Emre arkadaşım çalışmanın kaynağını görüntülediğinde zaten anlarsın. kategoriyi artırmak için ilk önce id=”fp_galleryList” bölümüne kategori eklemen lazım sonrasında da altında yer alan albüm alanını oluşturmalısınız. Tabi tekrar edenleri incele o şekilde eklemelisin. Kısacası az html ve css bilen bir kişi ekleyebilir.

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.