Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
 

Altra promessa mantenuta, ecco la versione 3 del mio slider dove la novità principale è che lo script è diventato un plugin di jQuery per funzioni.

Il fatto che sia diventato uno plugin ci consente di avere sulla stessa pagina più slider con impostazioni diverse.

Per chi è alle prime armi e come me ha la curiosità di capire come funzionano gli slider, cioè come impostare l'html, i css e lo script di jQuery necessario, vi consiglio vedere la versione 1 che contiene lo stretto necessario a far muovere le immagini. Ecco il link myslide Versione 1.

 

Caratteristiche della versione 3 :

  • Auto avanzamento da sinistra verso destra e da destra verso sinistra ogni 3000 millisecondi.
  • Quando il mouse entra nell'area della slide (.mouseenter) :
    • la slide viene messa in pausa
    • viene visualizzato un titolo
    • viene visualizzata una descrizione
    • vengono visualizzati i pulsanti di controllo
  • quando il mouse lascia l'area (.mouseleave):
    •  la slide riprende da dove si era fermata
    • venono nascosti i pulsanti
    • viene nascoto il titolo e la descrizione.
  • Controlli per avanzamento della successiva/precedente slide.
  • Controlli per avanzamento rapido all'ultima slide o alla prima
  • Pulsante per mettere in pausa/play
  • html necessario alla visualizzazione dei controlli (start-pause, arrows) è aggiunto automaticamente dal plugin
  • Le opzioni disponibili:
    • Possibilità di iniziare a scorrere da destra verso sinistra
    • Di quanti pixel è composto l'avanzamento, utile nel caso in cui sono visibili più slide contemporaneamente.
    • Auto Play on/off
    • Velocità di per l'effetto in ms
    • Tempo di pausa tra una slide e l'altra.
    • Possibilità di visualizzare sempre il titolo
    • Possibilità di visualizzare sempre la descrizione
    • Possibilità di visualizzare sempre le frecce

 

La slide è visibile qui : apri la demo myslidev3

La slide è scaricabilie a qui : download myslidev3

Troverete i file myslidev1.html, myslidev1.html e myslidev1.html, la cartella photos e la cartella images.

Il codice html, css e javascript è incluso tutto dentro la pagina html.

Come per la versione 1 e 2, dentro la pagina troverete alcuni commenti utili in inglese "spaghettiano".

Se vi servono ulteriori dettagli lasciate pure un commento.

Ecco alcunì commenti utili.

1) La prima cosa da fare è di adeguare il css : width, height ecc.

2) Creare l'html richiesto, vedi esempi.

3) Attivare lo slider come mostrato di seguito.

 

La slide si può attivare senza paramentri, utilizzando i default.

1
$("#myslide").myslide();

 

oppure passando alcuni dei paramentri previsti:

1
2
3
4
$("#myslide").myslide({
  'myslideShowArrows'	: true,	// Display or hide the arrows
  'myslideShowTitle' 	: true  // Display the title
});

 

 oppure passando tutti i parametri : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
$("#myslide2").myslide({
		'myGoto'             	: 'right',	// Start position left or right
		'nWayStep'         	: 250,		// width in Pixel size for Scrolling
		'myslideAutoPlay' 	: true,		// auto play
		'nSpeed' 		        : 1000,		// Speed, transaction time between slides
		'nTime' 	        	: 2000,		// Time as pause : setTimeout
		'myslideShowTitle' 	: true,		// Display or hide the title while slide moving
		'myslideShowText' 	: false,	// Display or hide the text while slide moving
		'myslideShowArrows'	: true		// Display or hide the arrows 
});

 

Ecco invece la dichiarazione del plugin e dei suoi paramentri che diventano le nostre opzioni : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
(function( $ ){

	$.fn.myslide = function( options ) {  
	
		// defaults, extending them with any options that were provided
		var options = $.extend( {
		'mySlide'	          	: this,						// Main div id => $("myslide")
		'mySlide4Items'	   	: this.children('div'),				// Items div => $("myslide").children() 
		'mySlideItems'	   	: this.children('div').children('div'),	// Items div => $("myslide").children().children() 
		'myGoto'        	        : 'left',						// Start position left or right
		'nWayStep'         	: 600,						// width in Pixel size for Scrolling
		'myslideAutoPlay' 	: true,						// auto play
		'nSpeed' 			: 1000,						// Speed, transaction time between slides
		'nTime' 			: 5000,						// Time as pause : setTimeout
		'myslideShowTitle' 	: false,						// Display or hide the title while slide moving
		'myslideShowText' 	: false,						// Display or hide the text while slide moving
		'myslideShowArrows'	: false						// Display or hide the arrows
		}, options);
		
		
		return this.each(function() { ...		// => NOTE: until here "this" is a jQuery object

 

Un'esperto javascript e di jQuery avrà sicuramente del materiale da poter commentare. Ma ricordare che questo non un tutorial ma soltanto una condivisione di esperienza personale.

Nel momento in cui scrivo ho già iniziato a lavorare sulla versione 4 di cui vi anticipo alcune caratteristiche:

  • Possibilità di muovere lo slide dall'altro verso il basso e viceversa
  • Compatibilità con i mobile touch, in particolare per poter passare da una slide all'altra è possibile utilizzare il dito.
  • Caricamento immagini da una cartella attraverso l'uso di un programma php


REFERENCES

DISQUS - Leave your comments here