Peach slider

Am avut nevoie de un slider drăguț, care să nu fie la fel ca restul de 129832987 slidere existente online. Prin urmare, m-am gândit să reproduc în js un efect folosit mai mult în flash. Prin urmare… A ieșit Peach Slider.

De ce Peach Slider? În principiu pentru că… Aveam trei piersici pe birou. Iar altceva nu prea mi-a venit în cap :D

Așadar… Impresii? Sugestii? :)

Update

28 Comentarii to “Peach slider”

  1. Mie îmi place, simplu și fără prea multă complicătură. O documentație cât de simplă, ceva? Citind prin cod îmi dau seama ce ar trebui să modific, dar totuși nu ar strica.

  2. Staicu Ionuț-Bogdan

    Păi ce documentație? Păstrezi html-ul meu și gata! :D

    Tocmai de aceea l-am făcut ATÂT de simplu: să evit orice bătaie de cap ;)

  3. Bun, și acum vin ca un n00b ce mă aflu și întreb. Cum setez timpul dintre imagini, cum fac ca prima imagine să înceapă afișarea după n secunde?

  4. Ha, ce misto e! Bravo, ma, inca un cod util. Manca-te-ar tata de programator. :)

    Dar mi se pare mie sau nu functioneaza link-urile, decat cele catre yahoo si despina?

  5. Staicu Ionuț-Bogdan

    Cum setez timpul dintre imagini, cum fac ca prima imagine să înceapă afișarea după n secunde?

    Nu poți! Less is more :twisted:

    Acum serios: dacă vrei să mărești timpul pentru fiecare slide, schimbi valoarea 5000 din codul:

    	window.setInterval(function(){
    // cod
    	}, 5000);
  6. @Eugen: întrebarea ta, nu a fost de noob. Să o vezi pe a mea :)). Deci: script-ul ăsta, pot să îl folosesc și în locul unui header?

  7. Staicu Ionuț-Bogdan

    script-ul ăsta, pot să îl folosesc și în locul unui header?

    Dacă am înțeles întrebarea bine, da. Îl poți folosi și în locul unui header :)

  8. @iamntz: ok, și cum fac asta? Scuze că întreb, dar sunt începător :|

  9. Staicu Ionuț-Bogdan

    @iamntz: ok, și cum fac asta? Scuze că întreb, dar sunt începător :|

    Copy -> paste! :D

  10. e reusit, cand am vazut poza in feed aveam alta pararere, dar dupa ce am vazut demo pot sa zic ca e ok

  11. Staicu Ionuț-Bogdan

    Alex, mulțumesc pentru comentariu. Mă bucur că îți place ;)

    Dacă există un feedback ceva mai puternic, voi adăuga și feature-uri suplimentare, cum ar fi butoane de prev/next, paginație sau descriere pentru imagini.

  12. foarte util , multumim

  13. Staicu Ionuț-Bogdan

    foarte util , multumim

    Mulțumesc și eu pentru comentariu!

  14. Sexy. Doar atat pot spune.

  15. Staicu Ionuț-Bogdan

    Sexy. Doar atat pot spune.

    Bun și așa :P

  16. Salut. Super interesanta ideea, iar rezultatul este pe masura. Nu am avut timp sa ma uit in cod dar…nu crezi ca ar fi interesant sa-i permiti userului sa poata seta efectul si pe verticala? Cred ca daca esti harnic si mai muncesti poti sa scoti un plugin foarte interesant, de ce nu cu suport si pt wordpress. Ah? Felicitari

  17. Staicu Ionuț-Bogdan

    @Stefan: ca mai toate treburile scrise pe blog, am avut nevoie de un asemenea script. Poate într-un viitor voi adăuga features d’astea de fițe :D

  18. Misto,
    mai e si nivo slider cu acelasi efect

  19. Staicu Ionuț-Bogdan

    mai e si nivo slider cu acelasi efect

    Hmm… Acum l-am văzut prima dată. Dar al meu e mai mic (în kb) :>

  20. Pe langa celelalte, are ceva stil,si are avantajul ca se incarca repede, util, multumesc :) . O mica sugestie: niste mici sageti cu functia de next si back ar fi ideale .

  21. Foarte reusit acest script. Insa niste butoane next, prev ar fi imperios necesare daca vrei sa folosesti scriptul pentru o galerie foto de exemplu. Daca vrei sa-l pui ca header cum spunea cineva aici intr-un comentariu, atunci e foarte ok asa. Ar mai fi o chestie extreb de buna sa faci in asa fel incat el cand adaugi o imagine sa o redimensioneze singur … dar asta e deja treaba complicata si nu cred ca ar fi cineva dispus sa faca asa ceva si sa-l dea free.
    In rest … sa auzim de bine! Si felicitari!

  22. Am incercat sa implementez butoane pentru fiecare slide (urmeaza next previous etc), si am reusit.

    A aparut totusi o problema, care exista si in peachsliderul original. Dupa ce se face tranzitia la slideul 2,3 ..etc pana la ultimul si apoi se revine la primul slide, nu mai exista tranzitie “peach”, ci se afiseaza direct imaginea.

    But, am fixat asta cu urmatoarele modificari in cod:

    ** in fisierul de javascript, modificati functia showPeach cu asta:

    	function showPeach(param) {
    		param.addClass('slideActive').show().find('span')
    		.each(function(i){
    			var current=$(this);
    			window.setTimeout(function(){
    				current.fadeIn(550, function(){
    					if(current.index()===9){
    						//alert('boo');
    						param.addClass('isLastSlide')
    						.removeClass('slideActive')
    						.siblings().hide()
    						.removeClass('isLastSlide')
    						.find('span').hide();
    					}
    				});
    			}, i*100);
    		});
    	};//showPeach
    

    ** in fisierul de css, adaugati asta:

    .slideActive {
    	z-index: 14 !important
    }
    
    .isLastSlide {
    	z-index: 13 !important
    }
    

    Mie mi-a fost de mare folos faza, sper sa va ajute si pe voi ;)

  23. Pilat Horia-Stefan

    Felicitari. E foarte util si cred ca functioneaza pe orice OS. Merge si pe iPad, deci este inlocuitorul ideal pentru un header flash(aparent mult mai usor de facut)
    Cum se descurca cu memoria video/RAM? Incarca memoriile la fiecare afisare si nu se mai sterg din memorie pana iti umple tot ce poate din memorii? Am dat peste multe astfel de script-uri care imi omorau browser-ul mai devreme sau mai tarziu.

  24. Staicu Ionuț-Bogdan

    Cum se descurca cu memoria video/RAM? Incarca memoriile la fiecare afisare si nu se mai sterg din memorie pana iti umple tot ce poate din memorii?

    Huh? Nu prea am înțeles întrebarea.

  25. I was wondering. When the script gets to the last slide it stops. Is there a way to get it to go to the first slide again and start over from the beginning?

  26. Yup, I also managed to get my peachslider working with buttons besides that.

  27. FYI – For some reason when I uploaded it to the test server ir worked fine but localy on my machine it didnt work. Wierd.

  28. Staicu Ionuț-Bogdan

    Hey guys, thanks for using my script!
    @Chad: the slider automatically jump to first slide. Check out the demo page.
    I have no idea why didn’t worked on local. Are you sure you ran it on a server? Because if you just double click it, there might be a chance to get the script blocked (security settings).

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>

windows apple dropbox facebook twitter