Jquery slider mantıgı nedir?

[Pluton]

Selamlar ben jquery ile kendim slider yapmak istiyorum hazırları kullanmak istemiyorum. Şimdi sormak istediğim bunun mantıgı nedir?

	<ul>

	<li id="Corporate"><a href="#Corporate">Express</a></li>

	<li id="Harmony"><a href="#Harmony">Harmony</a></li>

	<li id="LawNOrder"><a href="#LawNOrder">LawNOrder</a></li>

	<li id="MeshFull"><a href="#MeshFull">MeshFull</a></li>

	</ul>

	

Mesela benim bu şekilde bir önizleme sistemim var. Küçük küçük resimler çıkıyor. Css dosyasıda bu;

	#header #header_center #slider ul #Corporate a { background:url('../previews/CorporateSmall.png'); }

	#header #header_center #slider ul #Harmony a { background:url('../previews/HarmonySmall.png'); }

	#header #header_center #slider ul #LawNOrder a { background:url('../previews/LawNOrderSmall.png'); }

	#header #header_center #slider ul #MeshFull a { background:url('../previews/MeshFullSmall.png'); }

	

Şimbi bunun 3 otomatik ilk 3 'ünü gösterip diğerlerini sayfalama mantıgı gibi saklıcam. Ama nasıl bir yöntem izlenir bilemedim. Jquery pluginlere falan baktımda bissürü şey yapmışlar hangisi hangisidir çözemedim

[di]

Olay su; ordaki UL'yi bir DIV icine yerlestirip, DIV'in boyutlarini sabitleyip, icindeki UL'nin boyutunu yeterince uzun tutacaksin.

Ayni UL icin LI'lere float:left deyip, surekli olarak UL'nin margin-left'ini sifir ile eksi maksimum deger arasinda degistireceksin.

Tabi bunu yapabilmen icin o UL'nin position'inin absolute olmasi gerekiyor.

[Pluton]

Ha evet oldu ama şunu sorucam. Ben mesela ul'e 8k hatta 150k width değeri verdiğimde oluyor ancak wdth değeri yazmadıgımda div'in boyutunu alıyor. Bunun bir çaresi var mıdır yoksa mike mike uzunluk belirtmek zornda mıyım? Birde position: relative kullandım

[di]

Onu soyle yapabiliyorsun;

UL'nin icindeki LI sayisini ve ilk LI'nin icindeki IMG elementinin width degerini jQuery ile alip, sayi ile degeri carpip UL'nin olmai gereken degerini belirleyip jQuery ile set edebiliyorsun ama chrome'da sorun cikarabiliyor. IMG'nin width degerini duzgun/dogru alamiyor ara sira, haliyle duzgun bir hesaplama yapamiyorsun.

Onun yerine ne yaparim dersen yine jQuery ile LI sayisini alirsin, width kismini da hardcode olarak girersin javascript kodlari arasina, ikisini carpip kullanirsin yine.

[Pluton]

Uzunluk v.s olayını, alayını şöyle çözdüm yardımı olur belki birilerine;

	var lic = $('#slider ul li').size();

	var pages = Math.ceil(lic/3);

	var sort_pages = null;

	var tot_width = (lic+1)*240;

		

	$('#slider ul').css('width',tot_width);

		

	for(i=1; i<=pages; i++)

	{

	$('#slider_pages').append('<a href="" title="'+i+'">'+i+'</a> ');

	}

	

[Ractamainus]

abi plugin'e bakıp, ne yaptığını çözemiyorsan tavsiyem, hazır plugin kullan..

zira ne yaptığına hakim değilsen, problemli bir şey ortaya çıkarma ihtimalin yüksek. buna değmez.

bu konuda gayet lightweight pluginler de var ayrıca, kullanmaktan çekinme kanımca.

[di]

Aslini istersen cok fazla iyi alternatif yok jQuery ile kodlanmis ve cogu da gayet kotu hem kodlama hem de kullanilis acisindan.

O yuzden oturup kendi yapmasi daha guzel olmus.

[Pluton]

Aynen di'ye katılıyorum. CSS olarak mantıgı bilmiyordum ama di anlattıkdan sonra hemen hemen anlamıştım brde overflow:hidden ile iyice oturdu. Ayrıca baktım onlara birsürü kod kullanmışlar. Benim işime yarayanda var yaramayanda onun için animate() ile çok kolay bir şekilde çözdüm. Hatta full koduda vereyim bari birilerinin işine yarar;

Burda kaç tane element oldugunu buluyor, UL boyutunu ona göre yükseltiyor ve sayfalamayı otomatik olarak yapıyor.

	$(document).ready(function() {

		

		var lic = $('#slider ul li').size();

		var pages = Math.ceil(lic/3);

		var sort_pages = null;

		var tot_width = ((lic+5)*240);

		

		$('#slider ul').css('width',tot_width);

		$('#slider_pages').css('padding-left',(420-(pages*11))+'px');

			

		for(i=0; i<=(pages-1); i++)

		{

			if(i==0)

			$('#slider_pages').append('<a href="#" id="page'+i+'" onclick="slider_page('+i+')" class="active sliders_link" title="'+(i+1)+'. Sayfa">'+(i+1)+'</a> ');

			else

			$('#slider_pages').append('<a href="#" id="page'+i+'" onclick="slider_page('+i+')" class="sliders_link" title="'+(i+1)+'. Sayfa">'+(i+1)+'</a> ');

			

		}

	

	});

	

Burada sayfa değiştirirken slide animasyonu ile sayfaları gezebiliyor.

	function slider_page(page_num) {

		

		$('.sliders_link').removeClass('active');

		$('#page'+page_num).addClass('active');

			

		var formul = page_num*840;

		$('#slider ul').animate({'left':'-'+formul+'px'}, "slow");

	

	}

	

Buda css;

	#header #header_center #slider { height:270px; overflow:hidden; width:800px; z-index:9999px; position:relative; }

	#header #header_center #slider ul { list-style-type:none; position:relative; left:0px; }

	#header #header_center #slider ul li { float:left; margin-left:40px; }

	#header #header_center #slider ul li a { display:block; text-indent:-99999px; width:240px; height:268px; }

	#header #header_center #slider_pages { margin-top:32px; *border:1px solid #f9f9f9; }

	#header #header_center #slider_pages a { width:11px; min-height:10px; background:transparent url('../images/slider_pages.jpg') no-repeat -18px 0px; *margin-right:3px; text-indent:-99999px; color:#00C; display:inline-block; *display:block; *float:left; }

	#header #header_center #slider_pages a:hover,#header #header_center #slider_pages a.active { background-position:-29px 0px; }

	

Tabi css'de benim sayfama göre şekilledirme var ama orta düzey bir kullanıcı anlar zaten ne olduğunu.

Ha hatalarım olmuş olabilir yada şöyle kullansan daha iyiymiş dedikleriniz olabilir. Ama en kral slide plugininden daha hızlı çalışır. Onlar otomatikleştircez diye birsürü şey katmışlar işin içine

[4Ever]

animate kullanırken birde easing kullanırsan daha şekil olur : )

[Pluton]

adam gibi easing için plugin istiyor ya

[4Ever]

easing kütüphanesini indir ekle. her yerde işine yarar sonucta

[toggie]

su javascript'i biri ogretsin bana.
parası neyse vericem.

[4Ever]

toggie said:

su javascript'i biri ogretsin bana.
parası neyse vericem.

Öğrenebilecek en kolay dil :)

[di]

toggie said:

su javascript'i biri ogretsin bana.
parası neyse vericem.

Kac para vericen ? sadads

[Pluton]

javascripti birde jquery ile kullanılıyorsa dünyanın en basit dili gerçekten

[toggie]

abi herkes oyle diyo da ben aptal mıyım neden cozemedim kendi basıma bir turlu. baslayacagım yeri bilemedim herelde. her seferinde aynı seyi soyleyip kacıyosunuz, yol gosterin lan erkekseniz sdf.

tim ayıp ediyosun bak. benim param senin paran.

[Pluton]

Yardım istedin de yok mu dedik aaaa, sor abi özelden ordan burdan, istersen mailimi veriyim ordan paso mailleşelim.

[toggie]

abi mesela ben de boyle kendi slider'ımı yapmak istiyorum.
hazır scriptleri entegre etme konusunda cok iyiyim, editliyorum falan ama sıfırdan yazamam hicbisey.

en bastan baslamam lazım yani. kitap olur, link olur. nasıl ogrenebileceksem iste. oyle yapamadıgım bisey var da onu nasıl becerebilirim gibisinden bir soru yok kafamda.

[Pluton]

Abi sliderın mantıgı basit zaten css bilgin üst seviyede anladıgım gördüğüm ve senden sorup öğrendiğim kadarıyla =)

Sliderda da yaptıgım şey şu, (di'de söyledi zaten yukarda) ul'u uzatıyorum kaç tane li elementi varsa, overflow:hidden; ile sağ tarafını gizliyorum. Jquery'nin animate fonksiyonunu kullanarak 3 li 'nin toplam boyutunu alıp, left:-(toplam boyut)px; dediğim zaman kendisi sola çekiyor zaten onu. Bir nevi css ile oynuyorum jquery kullanarak

Jquery.com 'a gir orda docs var. Baştan başla zaten javascript öğrenmene gerek yok direk burası yardımcı olur.

[Ractamainus]

javascript kolay bir dil değil.

[toggie]

kolay/zor goreceli.
diger dillerle karsılastırılınca pek zor da sayılmaz.

[Ractamainus]

javascript'in genel kullanımı, DOM manipulating'den ileri gitmediği için kolay gibi görünebilir.. oysa bu buzdağının görünen yüzü.

ciddi web uygulamaları yapmaya kalktığınızda, memory management, farklı browser'larda farklı standartlarla interpret edilmesi gibi bir sürü problemle karşı karşıyasınız.

insanlar genelde js ile uğraşırken, yarattığı objenin ne olduğundan, nereye gittiğinden bile haberi olmuyor. yüklü bir sayfa olmayınca da yaratabileceği performans sorunlarını farkedemiyorlar.

yani python'la da sadece bir objeye erişip, herhangi bir attribute'unu değiştirmek olsaydı işin, "çok kolay dil python" derdin.. ama içine girdikçe, bir programlama dilinin altında başka şeylerin yattığını da görüyorsun..

ve bu faktörlere göre diyorum ki, js kolay değil.

[Pluton]

js okadar kolay değil ama yukarlarda da dediğim gibi, jquery kullanıyorsan iş çok kolaylaşıyor. Ha çok büyük projelerde belki yetersiz kalabilir orası bilmem

[Somon]

pingu sana bu konuda yardımcı olur ona bi öm at

[Ractamainus]

Pluton said:

js okadar kolay değil ama yukarlarda da dediğim gibi, jquery kullanıyorsan iş çok kolaylaşıyor. Ha çok büyük projelerde belki yetersiz kalabilir orası bilmem

jquery'nin kolaylaştırdığı şey de özellikle dom manipulating. sizzle lib sağolsun..

hani dili hiçe sayıp, o dil üzerine kurulmuş library'nin herşeyi çözdüğünü iddia edemeyiz zaten.

neyse off-topic olmasın iyice.. sadece yanlış bir algıyı düzeltmek istedim.