jQuery Lightbox

Chiar dacă unora nu le place „fenomenul” Lightbox, sunt unii clienți care vor așa ceva cu orice preț. La o adică, ce contează un user nemulțumit dacă stăpânul este fericit? :D

Prin urmare, am purces la căutarea unui script suficient de light pentru a se încărca rapid (având în vedere că toți clienții mei nu au conexiuni rapide – deh, ăsta e dezavantajul de a nu lucra cu români…) dar cu suficiente opțiuni pentru a satisface și cele mai exigente cerințe. De cele mai multe ori, „cele mai exigente cerințe” înseamnă image sets, deci nu am avut nevoie de mare șmecherie.

Slimbox 2

Și am dat peste Slimbox. Ultima actualizare e de prin 2010, dar nu-i problemă, pentru că funcționează excelent cu ultima versiune de jQuery.

Să optimizăm!

Așa cum am precizat, avem nevoie de viteză. Pagina trebuie să se încarce rapid, iar artificiile mai puțin importante pot aștepta.

Prin urmare, toată povestea asta este executată dacă există link-uri spre fișiere imagine, dacă sistemul de operare e suficient de inteligent să nu impună restricții de CSS (cum ar fi position:fixed) și doar după ce s-a terminat pagina de încărcat (DOM ready):

if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
	var links2img = $('a[href$=jpg], a[href$=gif], a[href$=png]');
	if(links2img.length>0){
		if(typeof $.slimbox == 'undefined'){
			$.getScript('js/slimbox2.js', function(){
				links2img.slimbox();
			});
		}else {
			links2img.slimbox();
		}
	}
}	

Pentru a evita probleme neplăcute (de exemplu încărcarea slimbox de mai multe ori), am inserat și condiția typeof $.slimbox .....

OK, și dacă folosesc alt script?

E o țară liberă, poți folosi orice script dorești. Fie că e Slimbox, Lighbox, *box, toată treaba de mai sus va funcționa. Sigur, va trebui să înlocuiești numele funcției slimbox(), dar în rest va funcționa fără probleme.

8 Comentarii to “jQuery Lightbox”

  1. În loc de “să optimizăm” mai bine: “să facem codul cât mai solid” deoarece

    $('a[href$=jpg], a[href$=gif], a[href$=png]')

    poate dura ceva pe o pagină cu multe elemente și asta poate întârzia destul executarea codului.

  2. Staicu Ionuț-Bogdan

    Marian, cazurile speciale au nevoie de soluții speciale. Dar codul de mai sus nu se simte foarte tare în profiler pe o pagina cu ~50 link-uri.

    Probabil la o pagină cu 500 link-uri treaba ar sta ușor diferit.

  3. Ai incercat colorBox ?

  4. de fancybox ce spui? nu e chiar light dar e rapid

  5. Staicu Ionuț-Bogdan

    Alex, Stef, așa cum am zis, soluția se poate aplica la orice script.

    Am precizat că vreau ceva light (în kb), deci fancybox cu 15kb doar pt js pică.
    Colorbox este și el mai mare, oferind mai multe decât am nevoie.

  6. @iamntz ai testat și în ie-uri ? acolo performanța js se duce pe apa lui bill gates de obicei :))

  7. Imi plac lightbox-urile, sunt ok (daca nu intri de pe mobil) insa sunt unii (the bosses) care iti spun sa faci lightbox in lightbox in lightbox (mi s-a intamplat, la propriu).
    Atunci sa vezi treaba … ~X(

  8. Staicu Ionuț-Bogdan

    @alessio: been there, done that. Am avut vreo 5 levels de parcurs. :D

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>