Sitene Mükemmel JQuery Slider Ekle ( Videolu anlatım)
Merhaba Arkadaşlar,
Diğer videolu dersimizde Jquery slider olan nivo slider’ı sitemize nasıl entegre ederbiliriz ile ilgiliydi.Onunla ilgili çok güzel videolu anlatım yaptım. Şimdi ise bir arkadaşımızın isteği üzerine daha farklı bir sliderın anlatımını yapacağım. Bu slider da çok fazla geçiş animasyonu var ve istediğinizi seçip uygulayabiliyorsunuz. Zaten bu videoyu yayınlamamın diğer sebebi de budur. İzleyeceğiniz videoda ki sliderın adı skitter slider. Dersimizde bu sliderı kendi web sitemize nasıl entegre edeceğiz ile ilgili çekilmiş ayrıntılı videodur. Tabi bazı arkadaşlarımızın yine eksiklikleri olabilir . Nedenide büyük bir ihtimalle CSS ve Html konularında eksik olmaları… Ama sitemizde bu
videolar sayesinde yine de kendilerini biraz geliştireceklerine inanıyorum.
Yorumlarınızı eksik etmeyin.
Hayırlı Seyirler.
Videoyu izleyemiyorsanız Youtube.com engellenmiştir.
Çözüm için DNS adreslerinizi aşağıdaki gibi değiştirin.
Tercih edilen DNS Sunucusu: 8.26.56.26
Diğer DNS Sunucusu : 8.20.247.20
.
SLİDER’ ı Web sitesinden İndirmek İçin TIKLAYIN.
BENİM ÇALIŞMAYI İNDİRMEK İÇİN TIKLAYIN
(234)
Yorum(80)
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 çok güzel slider çok beğendim sizide tebrik ederim dremewer cs3 den cs6 başarılı bir geçiş yaptınız 🙂
Hocam supersınız dedıgınızı yaptık ama bu calısmayı sayfanın ortasına veya asagıya almak ıstersen nerden yapmalıyız
hakancığım videoda anlattık 🙂 ikincisi benim çalışmamı indirirsen orda da görebilirsin.
tablo içine veya div içine alman lazım.
Hocam kolay gelsin.. nivo-slider3.1 yu .yaptım video nuza bakarak ama ben önceden yaptığım siteye uyguladım.. ordaki resim sabitti.. şimdi sizin yaptığınızı yaptım ama bir hata var.. resimler 4 tanesi alt alta görünüyor .. sizden ricam yardim lütfen…
cabır buyuk olasılıkla jquery kodlarını yanı head ler arasındakı kodları koymadın. Eger orda sorun yoksa. Body ıcındekı scripti yerleştirmedin. Bunlara dikkat ettiysen sorun olmamalı.
hocam doğru şimdi tamam çok teşekkür ederim..bir satır eksik kopyalamışım… birde hocam bu internet olmadan çalışmıyor? bu işi internet gereksimi olmayan yöntemi vermı acaba?
eğer sistemde localhost oluşturursan sorun olmaz.
Hocam benim demek istediğim.. bende sizin siteden ve bazı sitelerden indirdiğim hazır css templed var.Bazılarında internet olmasada ve localhost olmasada o resimler yinede otomatik değişiyor ama bu ben yaptığımda ya internet olmalı yada localhost .o yüzden sordum hocam..Saygılarımla..
yaparken baya uğraştım ama değdi 🙂 harika bir görünüme sahipmiş gerçekten
mehmet arkadaşım o konular çok ayrıntılı. ilerleyen zamanlarda o konulara da değineceğiz.
Emeginize saglık harika anlatım olmuş yeni sitemde bu slideri deneyecegim insallah
Bu slider sadece anasayfa için diye biliyorum.
dostum ben bunu sadece istediğim konularda kullanmak istiyorum.Böyle bir slider var mı?
Konu içi slider lazım ?
varmı böyle birşey?
evt arkadaşım sadece anasayfa için. Zaten manşetler genelde anasayfa için olur. bunu küçültürsen konu içine de koyabilirsin
Merhaba hocam,
ben amatör olarak Asp.net te site yapacam,bu slider örneginizi asp.net siteme ekleyebilirmiyim, eklenirse nasıl yapıldığını anlatırsanız çok sevinirin,
İyi çalışmalar…
Abdulkadir arkadaşım ,bu slider ı tabikide sisteminizde kullanabilirsiniz. Ama resmi dışarıdan girecekseniz yazılım kısmını yazmanız lazım diğer türlü sitede gösterdiğim gibi kullanabilirsiniz. Ama her defasında resimleri hosta girip kendiniz değiştirmelisiniz
Hocam çok teşekkür ederim . uzun zamandan beri aradığım bir slider örneğiydi. lakin bir sorum olacak ben çok profesyonel birisi değilim amatör olarak ilgileniyorum bu işle. araç resimleri burada 800×300 olarak görünüyor benim koyacagım resimlerde araba resimleri ama ben 800×300 olarak yaptıgım fotograflar oldukça geniş oluyor ve resim bozuluyor . bu konuda ne yapmam gerekir. yani uygun boyuta aldıgımda resmi oldugu gibi gösterebilmem için.. teşekkür ederim
mahmut arkadaşım style.css dosyasının içeriğini değiştirmen lazım. Css düzenlemen lazım kısacası.
.border-skitter { margin:0px auto; border:1px solid #000; width:800px; height:300px; background:#333; margin-bottom:40px; -moz-box-shadow:rgba(0,0,0,0.5) 0 0 10px; }
yukarıdaki satırını düzeltmelisin. Ona göre bazı değişiklikler olabilir ama sadece sana tiyo bu. 🙂 Ona göre düzenlemeleri yap
Sanırım Nasıl yapacağımı buldum. Belki başka arkadaşlarında işine yarar umuduyla paylaşmak istedim.
“Skitter.Styles.css” dosyasında 3ncü satır aşağıdaki gibi düzenlenirse slider büyük olduğu takdirde resimleri ortalama yapılabiliyor.
.box_skitter img { margin-top: 100px;margin-left:100px; max-width:none; } /* Tip for stildv */
Ömer hocam bir soum daha olacaktı. ben sizin çalışmanızı indirdim fakat orjinal sitesinden indirdiğim örnekte mediumbox olarak işaretlenen altında yuvarlaklar olanını seçtim. yalnız ben bu örneği explorer9’ta uyguladığımda herhangi bir sıkıntı yok. explorer 8 lerde o yuvarlaklar kare olarak görünüyor bu konuda bir şey yapabilirmiyiz?
internet explorer’in 8.0 sürümü desteklemediğinden oluyordur.
Arkadaşlar Merhaba, ben web sitemin Background’unda bir flash swf oynatmak istiyorum 1000px 1000px boyutlarında ne yaptıysam olmadı bu konu hakkında bir bilgisi olan var mı? :(((
Ömer Bey tekrar merhaba,birçok ayarı değiştirerek istediğim hale getirdim şimdi 2 küçük sorunum kaldı 🙂
1. si: numaraların olduğu bölümü slayt artımında ya da eksiltilmesinde manuel olarak elle ortalamak yerine slayt sayısına göre otomatik ortalı gelecek şekilde ayarlayabiliyor muyuz? ve olabiliyorsa nasıl?
2.si : eklediğim resimlerin üzerine otomatik olarak gelecek bir logo eklemek istiyorum yani logo sabit olarak her slayt ta gözükecek ama slayt görseli onun altına gelecek, bu yapılabilir mi? Alternatif olarak slayt görsellerine logoyu ekleyip öyle ekliyorum imagelar arasına ama istediğim bu değil elbette. Acaba yardımcı olabilir misiniz?
Teşekkür ederim.
Güneş hanım facebook grubumuzdan size cevap ilettim. Kolay gelsin
Arkadaşlar merhaba Ömer Bey’e de facebook grubundan sordum ama kendisi zaten oldukça yoğun o geri dönene kadar belki bu platformda bana yardımcı olacak birileri vardır diye düşündüm.
Sorunum şu, bu Skitter sliderda slaytlar arasındaki geçiş sürelerini değiştirmek istiyorum. Ama hangi dosyadan nasıl yapacağımı bulamadım.
Acab abenim gibi bu sorunu yaşamış ve çözmüş, ya da yaşamamış ama bilgisi olan var mıdır bana yardım edecek? 🙂
@Güneş Üçer sorunun çözümü şu şekilde…
$(‘.box_skitter_large’).skitter({interval: 3000});
bu kodu ana sayfanın kod kısmındaki // Highlight ın üstündeki parantezde optıons olan kodun yerine yapıştıryorsun satırın tamamını sileceksiniz.
interval 3000 değilde atıyorum 8000 olarak deneyin sürenin uzadığını göreceksiniz…
İyi çalışmalar
Amaç OKAY; çok teşekkür ederim, ben kimseden çözüm gelmeyince daha iptidai bir yöntem buldum efektlerin özelliklerinin bulunduğu dosyadan tek tek zamanlamalarıyla oynadım:)
Bir daha değiştirmek istersem bu kolay yöntemi deneyeceğim. Zaman ve emek ayırıp ilgilendiğin için teşekkürler, eminim aynı sorunu yaşayan bir çok arkadaşın işine yaracaktır.
Amaç çok teşekkür ederiz. Bulup bizimle paylaştığın için. Birçok kişinin sorununu çözmüş oldun. tekrar sağol.
hocam php admin panelinden resim ekleme ve resim değiştirme veritabanından link vererek haber çekerek nasıl oluşturabiliriz
Onur arkadaşım söylediğin şeyi anlatmak burda çok güç onun için fazla zamanımız olmuyor. En fazla böyle yardımcı olabiliyoruz.
Hocam localhost da firefox ve interney explorer da çalışıyor ama google chrome da çalışmıyor. Google chrome da nasıl çalıştıracağız, çok acil yardım
şenol arkadaşıö tüm browserlarda çalışıyor denenmiştir. localhostta çalışmaması hosta attığınızda çalışmayacağı anlamına gelmiyor. kolay gelsin
Hocam, uygulamayı yapmış olduğum sitemin index sayfasının menu çubuğunun altında 998 pixellik bir tablo açtım içine include ettim, index sayfasını açtığımda anasayfamı sola yaslıyor komple, ama bir türlü ortalayamadım. bu uygulamaya ait kodlar benim anasayfamdaki tüm include sayfalarınıda etkiliyor, hangi dosyanın hangi kodunu değiştirsem acaba anasayfam komple ortalı olur. çok teşekkürler ilginiz için. acil lütfen
şenol arkadaım genel divini margin:auto; padding:auto yaparsan sayfan ortalanır.
Meraba güzel çalışma olmuş tebrik ederim. Bi ricam olucaktı JQuery hakkında detaylı bilgiye ihtiyacım var , yani yaklaşık 30 sayfa falan bana yardımcı olabilir misiniz ? Netteki kaynaklar yeterli değil ..
Teşekkürler 🙂
hocam ben klasöru indirdim gerekli temizleme işlemlerini yaptım çalışıyo ama anasayfama ekleyince resimleri parçalanmış resim olarak gösteriyo ve altalta diziyo bu head ve bodyleri kontrol ettim ama bir sorun bulamadım ne yapmam gerekir yardımcı olursanız sevinirim
hayriye hanım videodakileri tam anlamıyla uygularsanız hiçbir sorun kalmıyor. siz büyük bir ihtimal dosyaların tanımlanmasını index.html dosyasında yazmadınız. benim yaptığım çalışmayı indirin ordan kontrol edin. yapılmışı var yani 🙂
teşekkür ederim hocam hatamı buldum bende birden fazla images dosyası oldugu için tabi haliyle göstermiyomuş digerine images1 deyince sorun çözüldü bide hocam gelen yorumlarıda okudum ama bu sliderin boyutunu nasıl küçültecez yukarıda buna benzer bir sorun var ama ordaki cevapları denememe ragmen bir sonuca ulaşamadım 🙁
Hocam bunu eklentisiz olarak wordpress’e ekleme işinin zorluk derecesi ne kadardır? Yeni başladığım temamda kullanmak istiyorum ama entegre işinde gözüm kesmedi.
mehmet arkadaşım wordpress için plugin’i var zaten. Linkten indirip kurabilirsin. Kolay gelsin
http://wordpress.org/extend/plugins/wp-skitter-slideshow/screenshots/
merhaba hocam, ben bu slider ı şöyle kullanıyorum,
sitemdeki menülerden birine tıkladığım jquery load ile içerik yüklüyorum , ve onun içinde gözükmesini istiyorum ama bir türlü yapamadım, siyah bi kutu geliyor, slider ın içeriği gelmiyor, neden kaynaklanabilir ?
emre arkadaşım tam olarak ne demek istediğini anlamadım. Nasıl bu slider ı başka şekilde kullandın , ne yapmak istediğini de yazdıklarından anlamadım. Kusura bakma.
ömer abi ben bu nu worldpress ıcın koymaya calsıtım amma senın o head ve head arasınındakı kodu wp ındex php de yok head head arası yok tek head var bırde html gibi body body arası yok napmam gerekır wp eklentılerı ıyı degıl bu sılederı duzenledım koyma ımkanım yokmu bunu worldprese
ömer arkadaşım bunu site için anlatmıştım. Zaten wordpress plugin olarak yükleyebilirsin. http://wordpress.org/extend/plugins/wp-skitter-slideshow/
linki yukarıda plugin olarak yüklersen çalışır.
tmm abı yukledım plugın oalrakda ama panelden acıyoruk eklentıyı ama sıtede gorunmuyor web sıtesının herhangı bır yerıne kod falan ayzmam gerekıyormu yoksa sadece plugını etkinleştirip ayarları yapmam gerekırmı
ömer arkadaşım wordpress sayfasında installation sekmesinde nereye ne ekleyeceğin yazıyor. ordan bakabilirsin.
tesekkur ederım abı cok yardımcı oldun yenı egıtım vıdeolarını beklıyorum
slm hocam öncelikle ilginiz için teşekkürler.videoları ve yorumları dikkatlice okudum.lakin bir yerde sıkıntı yaşadım ben php kullanarak site yapmaya çalışıyorum.bu slideri kendi siteme attım görüntüde bi sıkıntı yok resimleri kendi istediğim resimlerle değiştirmeme rağmen halen eski resimler görünüyor.birde ilginç olarak tasarım ekranında ben istediklerim görünüyor çalıştırdığımda orjinalde olanlar ne yapmam gerekiyor.teşekkürler
mehmet arkadaşım resim klasörlerinin içine resimlerini koyduktan sonra php dosyandada resimlerin yolunu değiştirdikten sonra birde xml dosyası var onu bulup tekrardan koyduğun resimlerin yollarını yazman gereklidir.
İyi günler slider da yer alan resimlerin numaralarının görünmemesi mümkün mü?Bunun için ne yapmamız gerekiyor?
Hocam Elinize sağlık Bu sliderin Üzerindeki Numaraları nasıl kaldırabiliriz acaba?
tuğrul ve fatma ayşe css klasörünün içinde skitter.styles.css dosyası var onun içinde
.box_skitter .info_slide {position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:bold 11px arial;padding:5px 0 5px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;opacity:0.75;}
opacity: 0.75 olan değeri 0 yaparsanız görünmez. Kolay gelsin.
Tşkler hocam oldu
Hocam mozillada çıkmıyor numaralar ama internet explorerda çıkıyor nedendir acaba
Tuğrul hepsinde çalışıyor. sorun senin bilgisayarda:)
gecenin yarısı yine ben ömer bey…
bu slideri sorunsuz bir şekilde kuramadım .
Dreamweawer da aynı uygulamalardan geciriyorum fakat
benim sitenin arka planını değiştiriyor ( arka planda resim var bembeyaz oluyor, üst menülerim sola kayıyor vs. karışıklıklar oluyor.)benim site normalde ortalanmış ve tablolardan oluşturulmuş? çözümü nedir bu sorunun ? teşekkürler.
slider geçiş hızını nasıl ayarlarız
Ezel arkadaşım yorumları okursanız slider geçiş hızının nasıl değiştiğini öğrenebilirsiniz.
Abi harikasın sen ya çok uğraştım ama şuan harika bi tasarımım oldu, sıkı bir takipçi kazandın diyebilirim. Kolay gele…
hocam ellerine saglık. ama bunu wordpress e nasıl atacagız ?
ibrahim Bey, google da skitter slider wordpress olarak aratırsanız plugin olarak bulabilirsiniz. Sonrasında wordpress Eklentilerden bunu yükleyebilirsiniz. Kolay gelsin.
Hocam Çalışma Çok Güzel.Ben Burdaki Resim Sayısını 5’e Düşürmek İstiyorum,Nasıl Yapabilirim.
Tamam Çözdüm 😀
BU BİLGİLER İÇİN GERÇEKTEN ÇOK TEEKKÜR EDERİZ EMEGİNİZE AĞZINIZA SAĞLIK
hocam dediniz gibi yapıyorum onizlemede gözüküyor ama siteye yuklediğimde hiçbirsey gozukmuyor
Ayberk sitene baktım, yorum yaparken yazmış olduğun siteyse… çokkkkkk karışık bir siten var. Kodlama baştan savma, yani siteni nasıl düzenleyeceksin o konuda hiç bilmiyorum. Kolay gelsin.
Hocam deneyimlerinizi ve paylaşımdaki sabrınız için öncelikle şahsınıza teşekkür ederim
“Sitene Mükemmel JQuery Slider Ekle” dersinizi xxx adresinden indirdiğim duyarlı bir siteye uyguladım sonuç harika sanırım yakın bir zamanda sitemi aktif hale getirir sizinde önerilerinizi alma şansım olur.
Size danışmak istediğim konu ; Html5 siteyi ön izlemede Normal ekran, ipad ve cep telefonu modunda izlerken sitenin tüm görsel ve yazıları orijinal bir şekijde izlenilen ekrana göre küçülüyor ve doğru bir şekilde görünüyor, ancak sizin dersinizden aldığım slider ölçüsünü otamatik olarak ekrana göre küçültemiyorum. Müsait olduğunuzda bilgi paylaşırsanız çok memnun olurum.
Tekrar Teşekkür Ederim.
Umdi arkadaşım, Responsive siteler yani her çözünürlüğe göre sitelerde çalışmalar çok farklı oluyor. Yani iyi bir css bilgisine sahip olmalısınız. Bu yüzden slider’ı tüm çözünürlüklere göre ayarlamanız daha da zordur. çünkü sliderlar genelde mobil telefonlarda gözükmezler, iptal olurlar. Genelde tasarımcılar böyle çalışırlar. Kısacası demem o ki sliderlerı kes kopyala yapıştır mantığıyla mobil, tablet uyarlaması yapılamazlar. Bunun için iyi bir css bilgisine sahip olmalısın. Çünkü her slider’ın çalışma mantığı farklıdır.
Hocam çok teşekkür ederim.
Merhaba Hocam ;
Ben sizin derslerden bakıp tablolarla oluşturduğum web siteme bu slider’ı eklemek istiyorum fakat işin içine div girdiğinden yapamadım 🙁
şebnem hanım sitemizde istediğiniz herşeyi bulabilirsiniz aslında. Dreamweaver cs6 derslerimizde div konusu anlatılmıştır. Bu konuda kendiniz geliştirmek istiyorsanız dreamweaver cs6 kitabımı almanızda fayda var. Yeni başlayanlar için herşeyi anlattım. Kolay gelsin.
hocam ben yaptım gayette başarılı oldu sizin görmenizi isterim fakat nereye yollayacağımı bilemedim
kitap değilde direk sizden ders alamıyormuyuz?
ayrıca ben cidden webmaster olmak istiyorum html5 siteler kurmak istiyorum mesela morhippo.com gibi siteler kurmam için hangi dersleri almam gerekiyor işe buradan gördüklerimle bir web sitesi tasarlayarak başladım fakat bahsettiğim site gibi siteler kurmak için başka dersler de almam gerekiyor sanırım.sizinle nasıl konuşabilirim?
Şebnem e-mailime gönderebilirsin.yukarıda yasal kurallar menüsünde email adresim yazıyor. ordan mesaj atabilirsin yaptığını. Bu arada o tarz siteler için php ve asp dersleri almalısın.
Selam çalışma için teşekkürler. asp.net te sayfama yükledim site.master a fakat (0x800a1391 – JavaScript çalışma zamanı hatası: ‘$’ tanımsız) hatası alıyorum yardımcı olursanız sevinirim…
Volkan arkadaşım, html olarak denemeni tavsiye ederim. Sonrasında çalışıyorsa zaten asp.net de de çalışacaktır. Bir yerlerde hata yapıyorsun.
Teşekkür ederim….
Hocam çok detaylı bir açıklama olmuş, uzun zamandır araştırmasını yaptığım bu konu ile artık tarafınızdan bilgi sahibi oldum diyebilirim. Konu hakkında verdiğiniz değerli paylaşımınız benim gibi diğer ihtiyaç sahiplerinin de işine çok yarayacaktır umuyorum, teşekkürler..
Hocam ben dediğiniz her şeyi yapıyorum ama olmuyor siteye farklı yazılar geliyor yardımcı olursanız sevinirim…
Furkan arkadaşım hangi konuda farklı yazılar geliyor. benim Bireysel olarak herkesin işini yapmam mümkün değil. Gelen yazılar hakkında bilgi verirsen yardımcı olmaya çalışırım. Kolay gelsin
Merhaba
Bi turlu yapamadım sızın yapmıs oldugunuz slıder i indirdim ozip ıcındekı butun klasorlerı mı ftp den atıp sonra vıdeodakı gereken ayarı yapacagız yoksa sadece index olusturup ındex kodlarını sayfamızın ındex ıne mı kopyalayacagız .
Onur bey, videoda indirdiğiniz dosyaları bilgisayarda düzenledikten sonra. İndirdiğiniz dosyalarıda ftp ye de atmalısınız tabikide.