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

• my slide versione 1
• my slide versione 2
• jQuery (home page)
• jQuery (come creare un plugin)
• jQuery (.animate)
• w3c tutorial (css)
• w3c tutorial (jQuery)
• Notepad++