Aici.

Enjoy!

(function($){
	$.fn.ntzSlider = function(options){
		o = jQuery.extend({
			height: 135,
			incrementBy:5
 		}, options);

	return this.each(function(){
    	var t=$(this);
    	t.wrap('<div class="ntzSliderWrapper"/>');
    	t.wrap('<div class="ntzSliderWrapper2"/>');

    	var wrapper = t.closest('.ntzSliderWrapper'),
    			wrapper2 = t.closest('.ntzSliderWrapper2'),
    			elWidth = t.find('li:first').width(),
    			maxWidth = t.find('li').length * elWidth;

    	t.width(maxWidth);

    	wrapper.append('<a class="ntzSliderCtrl ntzSliderPrev"/> <a class="ntzSliderCtrl ntzSliderNext"/>');

    	wrapper.add(wrapper2).css({
    		height:o.height,
    		position:'relative'
    	});
    	wrapper2.css('overflow', 'hidden');

    	function showHideArrows() {
  			var curPos = parseInt(t.css('marginLeft'), 10) || 0;
    		if(curPos == 0) {
    			wrapper.find('.ntzSliderPrev').hide();
    		}else {
    			wrapper.find('.ntzSliderPrev').show();
    		}

    		if(-curPos >= (maxWidth - wrapper2.width())){
    			wrapper.find('.ntzSliderNext').hide();
    		}else {
    			wrapper.find('.ntzSliderNext').show();
    		}
    	};//showHideArrows
    	showHideArrows();
    	wrapper.find('.ntzSliderCtrl').click(function(){
    		if(t.is(':animated')){return false;}
    		showHideArrows();
    		var curPos = parseInt(t.css('marginLeft'), 10) || 0;
    		if($(this).hasClass('ntzSliderPrev') && curPos < 0){
    			t.animate({
    				marginLeft:'+='+(o.incrementBy*elWidth)
    			}, function(){
    				showHideArrows();
    			});
    		}
    		if($(this).hasClass('ntzSliderNext') && (-curPos < (maxWidth - wrapper2.width()))){
    			t.animate({
    				marginLeft:'-='+(o.incrementBy*elWidth)
    			}, function(){
    				showHideArrows();
    			});
    		}
    		return false;
    	});
		});
	};
})(jQuery);

Puțin css:

.ntzSlider li {
	float:left;
	width:178px;
}

.ntzSliderWrapper .ntzSliderCtrl {
	position:absolute;
	left:-6px;
	top:50%;
	width:29px;
	height:43px;
	margin-top:-23px;
	background:url(../images/basaldella_prev.png) no-repeat left top;
	cursor:pointer;
}
.ntzSliderWrapper .ntzSliderNext {
	background-image:url(../images/basaldella_next.png);
	left:auto;
	right:-6px;
}

Și iese asta:

Notă: Am presupus că sliderul va avea width 100%

Puțină teorie

Majoritatea reclamelor sunt încărcate cu un cod foarte simplu:

<script src="delayed.js.php" type="text/javascript" charset="utf-8"></script>

delayed.js.php este url-ul spre ad server. Problema care apare se datorează modului în care se întâmplă încărcarea paginilor: pentru a respecta diverse dependențe (de ex. vrei să se încarce întâi jQuery, după aceaea fișierul tău cu script-uri, nu?), browserul blochează orice activitate în momentul când dă de un cod asemănător cu cel de mai sus. Altfel spus, orice este după un script src este executat DUPĂ ce se primește un răspuns de la server.

De cele mai multe ori e ok. Dar în cazul în care serverul nu răspunde, site-ul tău este blocat pentru 10-20-30 secunde. Adică până browserul își dă seama că serverul are buba și nu poate încărca nimic.

delayed.js.php este un script foarte simplu (atât de simplu încât ’script’ mi se pare ușor forțat) care simulează un delay prea mare. Iată codul din script:

<?php
	sleep(3);
	echo "alert('Fișierul extern s-a încărcat');";

Și rezultatul:

Așa, și?

Statisticile spun că dacă un site nu se încarcă în 5-10 secunde, ai șanse destul de mari să pierzi vizitatorul. Și cum nimeni nu vrea să piardă vizitatori…

Soluția

Soluția este încărcarea asincronă a scripturilor externe. Sunt mai multe metode de a face acest lucru, dar cel mai elegant mi se pare modul în care se încarcă Google Analytics. Adică încarcă scriptul când poate, fără să blocheze pagina. În cazul în care scriptul nu se încarcă… Asta e. Nu se întâmplă nimic, site-ul este afișat complet, userul nu așteaptă inutil.

Pasul 1

Să presupunem că avem codul următor, furnizat de agenția de publicitate:

<script type="text/javascript" language="javascript" src="http://www2.glam.com/app/site/affiliate/viewChannelModule.act?mName=viewAdJs&affiliateId=302620505&adSize=728x90"></script>

Pasul 2

Șterge codul de mai sus, dar salvează undeva valoarea atributului src ( http://www2.glam.com/app/site/affiliate/viewChannelModule.act?mName=viewAdJs&affiliateId=302620505&adSize=728x90 )

<script type="text/javascript" charset="utf-8">
/* <![CDATA[ */
	(function() {
		var myAd = document.createElement('script');
				myAd.type = 'text/javascript';
				myAd.async = true;
	  myAd.src = 'URL_AD_SERVER';
		(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(myAd);
	})();
/* ]]> */
</script>

Pasul 3

Se înlocuiește URL_AD_SERVER cu link-ul salvat, astfel încât vei avea:

myAd.src = 'http://www2.glam.com/app/site/affiliate/viewChannelModule.act?mName=viewAdJs&affiliateId=302620505&adSize=728x90';

Salvezi și.. cam asta e

Același fișier php, același delay, o abordare ușor diferită. Rezultatul?

Pagina se încarcă fără să aștepte fișierul extern. Mi se pare un pic mai bine. Ție nu? Partea bună este că merge cam pe toate browserele: IE6+, Safari, Opera, Chrome și desigur, Firefox.

Iată cum, cu un fragment de cod poți îmbunătăți masiv experiența utlizatorului și reduci „riscul” ca vizitatorul să folosească Adblock (sau ceva asemănător). Eu, de exemplu, folosesc Adblock doar pe site-urile cu reclame nesimțite (realitatea e cel mai bun exemplu) și pe site-urile cu timeout mare al scripturilor.

sourcemaking.com. Enjoy!

Și încep eu bucuros, nevoie mare să folosesc :first-child. Care nu este suportat de IE6 dar merge pe versiunile mai noi (7+). Am testat temător la început și… cam asta a fost. Pentru că eu merg pe regula (dacă se poate spune așa): dezvoltă în firefox, testează în safari/opera/chrome și repară în IE.

Prima bubă

Am văzut eu că merge :first-child și am presupus că ar fi normal să meargă și :last-child. Greșit! Nu numai că nu merge, dar :last-child nici nu face parte din specificația CSS 2.1! Face parte din CSS 3.0! Prin urmare, dă-i și rescrie codul. Moment în care am găsit…

A doua bubă

A doua bubă a fost un pic mai nasoală. Ca să înțelegi mai bine, îți arăt o bucată de cod:

<div class="wrapper">
	<h3>Titlu</h3>
	<div class="entry">
		conținut
	</div><!-- /.entry-->
	<div class="entry">
		conținut
	</div><!-- /.entry-->
	<div class="entry">
		conținut
	</div><!-- /.entry-->
</div><!-- /.wrapper-->

Iar eu trebuia să pun border-top la toate div.entry, mai puțin la primul:

.wrapper div.entry:first-child {
	border-top:none
}

Totul e ok, nu? NU! În niciun browser nu mergea și nu înțelegeam de ce. După ceva căutări am aflat că :first-child ține cont de TOATE elementele, nu de toate elementele căutate. Astfel, first-child în cazul meu era.. h3! Dă-i cu Dumnezei, biserici, sărbători și alte neamuri și pune toate div.entry într-un alt div și… cam asta fu.

Soluția elegantă

Dincolo de extra markup (folosit din motive de grabă – deadline-ul venea cu pași repezi și deja pierdusem prea mult timp cu rescrierea codului & căutarea problemei), ar mai exista două rezolvări:

1. Adjacent Sibling Selector. Îl puteam folosi la modul .wrapper h3+div.entry. Și partea bună este că ar fi mers fără prea mari probleme în toate browserele.
2. :first-of-type. Care nu prea merge decât în ultimele versiuni de Firefox/Safari/Chrome dar… Cam atât. Nu merge în niciun IE deci nu prea ar fi bun.

Deznodământul

Cum orice minune ține trei.. clienți, următorul client are un site la care vrea și compatibilitate IE6

Dacă nu te prinzi la ce s-ar putea folosi chestia asta, imaginează-ți că ai de afișat mai multe foldere cu poze (gen picasa). Și pentru a nu intra în fiecare folder, te plimbi cu mausul peste folder și vezi un quick preview al primelor X poze (unde X e zece în cazul de față).

A fost doar un experiment rapid ce a durat mult mai puțin decât scrierea acestui post

Prima problemă

Prima problemă a fost detectarea corectă a numărului de caractere dintr-un titlu. Cum un titlu putea avea — în el (care este afișat ca „—”) sau alte caractere HTML, un simplu strlen nu ar fi fost prea exact. Prin urmare, a trebuit să fac următoarea chestie:

$lungimeTitlu = strlen(preg_replace('/&[0-9a-z]{2,8};|&#[0-9]{1,7};|[0-9a-f]{1,6};/i', ' ', get_the_title()));

Cum regex nu sunt pasiunea mea cea mai mare, codul l-am furat de aici.

A doua problemă

A doua problemă a fost cu the_content_limit() (care este o versiune ușor modificată a acestui script). Long story short, această funcție îți permite ceea ce the_excerpt() din Wordpress ar fi trebuit să știe implicit: să limiteze numărul de caractere fără prea mari bătăi de cap.

Eh, dar există o bătaie de cap. Și încă una care m-a bătut rău de tot: unele posturi aveau și imagini atașate (attachments). Iar această funcție se cam bâlbâia în momentul în care făcea strip_tags: îmi insera în excerpt și textul de la imaginea din attachment. Mi-am dat seama de asta deoarece avea imaginea avea fix același text care era și în titlu. Și după vreo zece minute de wtf și scărpinat în cap mi-am dat seama care era problema.

Prin urmare, am pornit RegexBuddy (btw, e super tare aplicația!) și am început să mă joc cu singurul selector pe care îl știu : (.*?) . Până am reușit să fac match la div-ul buclucaș. După un preg_replace aplicat strategic, totul a mers ca pe roate.

function the_content_limit($max_char, $more_link_text = ' …', $stripteaser = 0, $more_file = '') {

	$pattern = '!<div(.*?)class="wp-caption(.*?)"(.*?)</div>!';
	$content = get_the_content($more_link_text, $stripteaser, $more_file);
	$content = apply_filters('the_content', $content);
	$content = str_replace(']]>', ']]&gt;', $content);
	$content = preg_replace($pattern,'', $content);
	$content = strip_tags($content);

	if (strlen($_GET['p']) > 0) {
		echo "<p>" . $content ."</p>";
	} else if ((strlen($content)>$max_char) && ($espacio = strpos($content, " ", $max_char ))) {
		$content = substr($content, 0, $espacio);
		$content = $content;
		echo "<p>" . $content . $more_link_text ."</p>";
	} else {
		echo "<p>" . $content ."</p>";
	}
}

Eh, și una din problemele apărute la ultima versiune este eroarea ruby: no such file to load — ubygems (LoadError). Când apare? Când încerci să folosești bundles ceva mai complicate (cum ar fi „insert close tag” sau „Insert open/close tag”), îți trântește minunăția de eroare. Și evident, te enervezi. Și cauți o rezolvare…

Rezolvare

Întâi de toate, fă update la Cygwin (ultima versiune este 1.7.x)

Apoi apasă Win+R și scrie:

C:\cygwin\Cygwin.bat

Descarci și dezarhivezi ultima versiune de ruby gems după care te duci în directorul unde ai dezarhivat și scrii:

ruby setup.rb install

Se intalează gem și… cam asta e. Dă un restart la E (dacă e deschis) și ar trebui să meargă.

Editare FOARTE târzie

Dacă problema persistă, apasă win+pause -> advanced system settings -> Environment Variables -> New system variable -> și adaugă variabila CYGWIN și valoarea nodosfilewarning.

În fine, treaba e bună, implementarea la fel.

Problema

Problema mea este că filmele de pe youtube – fie cele „băgate” cu oEmebed, fie cele „băgate” cu codul de pe youtube – deschid o pagină nouă când faci click pe ele. O a doua problemă (de această dată doar la filmele introduse prin metoda clasică – copy/paste) este că filmele au anumite dimensiuni standard, iar o redimensionare (ex. cât tot blogul) înseamnă calcule. Și cum nimănui nu-i plac calculele (sau cel puțin mie nu-mi plac!), iată o soluție

O a doua problemă o reprezintă filmele self-hosted. Adică ai un fișier .flv și vrei să-l pui pe blog. Cum faci?

Soluția

Soluția la aceste probleme am găsit-o (de voie, de nevoie) la ultima temă de Wordpress codată și se numește JW Player. Cum se implementează?

1. Se descarcă ultima versiune a player-ului și se urcă pe ftp în directorul wp-contents/themes/tema-curenta (schimbi tema-curentă cu numele corespunzător), astfel încât să ai următoarea structură: wp-content/themes/tema-curenta/jwplayer.
2. Editezi functions.php (dacă nu există, îl creezi) și, undeva la sfârșit, adaugi:

   <?php
   function customVideo($atts, $content = null){
   	$tema = get_bloginfo("template_url");
   	$videoW = 640;
   	$videoH = $videoW/1.26;
   	$ret = 	'<object class="myVideoPlayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="'.$videoW.'" height="'.$videoH.'">
   					<param name="movie" value="'.$tema.'/jwplayer/player-viral.swf" />
   					<param name="allowfullscreen" value="true" />
   					<param name="allowscriptaccess" value="always" />
   					<param name="flashvars" value="file='.trim($content).'" />
   					<embed
   						type="application/x-shockwave-flash"
   						name="player2"
   						src="'.$tema.'/jwplayer/player-viral.swf"
   						width="'.$videoW.'"
   						height="'.$videoH.'"
   						allowscriptaccess="always"
   						allowfullscreen="true"
   						flashvars="file='.trim($content).'"
   					/>
   				</object>';
   		return $ret;
   }
   
   add_shortcode('video', 'customVideo');
   

3. Schimbi $videoW cu lățimea dorită.
4. În postul în care vrei să adaugi un film, pur și simplu scrii asta: [video]youtube url[/video] sau [video]link-ul spre fișierul .flv[/video] Și cam atât.

DEMO – Elton John & Axl Rose — Bohemian Rhapsody

Un fel de disclaimer

Codul injectat în pagină după șmecheria asta NU va mai fi valid. Singurul „fix” pentru această problemă este un js de vreo 6kb (swfobject, inclus în arhiva jwplayer). Dacă vor exista doritori, voi adăuga și un articol ce acoperă și respectiva soluție.

Treaba stă în felul următor: am făcut upgrade la Foobar (de la 0.9x la 1.x). Rezultatul? Toate setările s-au dus. Hotkeys, playlist-uri, tot. A apărut o versiune nouă de Foobar, să-i zicem 1.x+1. Ce s-a întâmplat după instalare? Desigur, s-au pierdut setările…

Apoi vine și rândul Adobe. Am avut CS. Am făcut upgrade la CS2. Apoi la CS3. Apoi la CS4. Absolut nicio versiune nu te întreabă dacă vrei să importe setările.

Mie, unul, îmi vine greu să cred că nimeni de la Adobe nu s-a lovit de problema asta…

Și stau și mă gândesc: cât de greu este să faci un „importator” (?!) pentru setări? Ok, setările au alt format acum, dar TU ești cel ce a făcut formatul precedent! Înțeleg că nu ești în stare să păstrezi același format ( json anyone? ), dar măcar fă dracului un import funcțional.

Fix în aceeași categorie intră programele de back-up. Eu folosesc Acronis True Image și își face treaba excelent. Singura problemă este că… Habar n-am cum să salvez setările!!! Dacă sunt nevoit să reinstalez Windows, trebuie să trec iar prin setările Acronis…