Slide show

Il video indica i passaggi per scaricare ed estrarre il codice necessario per fare funzionare uno slide show tilizzando il plugin per jquery mbSlider. Una volta scaricato l'archivio zip e copiata la cartella mbslider.1.0.0 nella cartella del vostro sito vanno inseriti nella pagina web i collegamenti necessari. Il foglio di stile (jquery.mbSlider.min.css) va collocato nella <head>.

<head>
<meta charset="utf-8">
<title>Esercizi Seconda Parte</title>
<link href="../css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="../css/custom.css" rel="stylesheet" type="text/css">
<link href="../css/custom-fonts.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.css" />
<link rel="stylesheet" href="../mbslider.1.0.0/jquery.mbSlider.min.css" />
</head>

L'indirizzo assegnato all'attributo href dell'elemento <link> dipende da dove è stata copiata la cartella mbslider.1.0.0. Vi consiglio di utilizzare la funzione sfoglia... di Dreamweaver per non sbagliare.

Il codice javascript (jquery.mbSlider.min.js) va invece inserito nel <body> DOPO il caricamento di jQuery.

<script
  src="http://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script> 
<script>
	if (!window.jQuery ) {
		document.write('<script src="../js/jquery-3.2.0.min.js"><\/script>');
	}
</script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.1.20/jquery.fancybox.min.js"></script> 
<script src="../js/bootstrap.min.js"></script>
<script src="../mbslider.1.0.0/jquery.mbSlider.min.js"></script>

L'indirizzo assegnato all'attributo src dell'elemento <script> dipende da dove avete copiato la cartella mbslider.1.0.0. Vi consiglio di utilizzare la funzione sfoglia... di dreamweave per non sbagliare.

Il codice HTML che il plugin trasforma in uno slide show è piuttosto semplice: Il plug-in va applicato ad un elemento <div> parent che contiene una seria di elementi <div> children. Ecco il codice utilizzato nell'esempio:

<div class="home-slider">
	<div class="jumbotron fullscreen-cover">
		<div class="bottom-title bg-gray animated fadeInDown fadeOutUp">
			<div class="container">
				<h1>Sistemi Interattivi</h1>
				<p>Questo è un sottotitolo</p>
			</div>
		</div>
	</div>	
	<div class="jumbotron fullscreen-cover" style="background-image: url(https://unsplash.it/1280/720/?image=521)">
		<div class="bottom-title bg-gray animated rotateIn fadeOutDown">
			<div class="container">
				<h1>Sitemi Interattivi</h1>
				<p>Lunedì 3 luglio 2017 ore 9</p>
			</div>
		</div>
	</div>	
	<div class="jumbotron fullscreen-cover" style="background-image: url(https://unsplash.it/1280/720/?image=477)">
		<div class="bottom-title bg-gray animated lightSpeedIn fadeOutLeft">
			<div class="container">
				<h1>Sitemi Interattivi</h1>
				<p>Esame della Sessione Estiva</p>
			</div>
		</div>
	</div>	
</div>

L'elemento <div> con classe home-slide sarà lo slide show, i tre elementi <div> che discendono direttamente (children) da questo elemento saranno le tre slide.

Per completare l'operazione e rendere funzionante lo slide show bisogna applicare il plugin all'elemento che continene le slide:

<script>
	$(document).ready(function () {
		$('.home-slider').mbSlider();
	})
</script>

Se, come nell'esempio, a mbSlider() non vengono passati parametri lo slide show seguirà le impostazioni di default. In alternativa posso passare come parametro un oggetto le cui proprietà serviranno a modificare eil funzionamento di default di mbSlider. Se invede scrivo:

<script>
	$(document).ready(function () {
		$('.home-slider').mbSlider({
			auto: true,
			controls: false,
			pause: 3000,
			pager: false
		});
	})
</script>

Otterrò un slide show che passa automaticamente da una diapositiva all'altra ogni 3 secondi e  senza controlli di navigazione.

Trovate l'elenco completo delle opzioni qui: http://mbslider.magiccms.org/it/pages/riferimento/.

Il plugin mbSlider viene distribuito con una libreria css che consente di animare i singoli elementi HTML che compongo ogni diapositiva. Nell'esempio vengono animati i tittoli. Per capire meglio come funziona dovete leggere con attenzioni le istruzione che trovate qui

http://mbslider.magiccms.org/it/pages/riferimento/#animazioni-personalizzate 
http://mbslider.magiccms.org/it/pages/riferimento/#aggiunta-di-animazioni.

e i numerosi esempi che trovate sul sito.

Gallerie

Per utilizzare il plugin fancybox bisogna caricare il fioglio di stile (jquery.fancybox.min.css) e il relativo file javascript (jquery.fancybox.min.js) o da CDN (come nell'esempio) o scaricando i file nella cartella del sito e collegandoli da lì. Il plugin viene attivato semplicemente aggiungendo l'attributo data-facybox all'elemento a collegato alla risorsa da visualizzare nella fancybox. Fancybox riconosce automaticamante i tipi di risorse più comuni e li tratta in modo da visualizzarli corretamente. I tipi di risorse riconosciuti sono:

  • Link ad immagini
  • Link a video pubblicati su youtube.com
  • Link a mappe di Google map

ATTENZIONE 

I link a risorse video pubblicate su youtube.com e i link a mappe personalizzate construite con l'apposita interfaccia su Google Map funzionano correttamente con fancybox solo se la pagina è servita da un server web. Se utilizzo l'opzione Aori nel bowser... presente nel menù di Dreamweaver o provo ad aprire il file HTML duirettamnte con il browser sul computer locale, avrò un errore. Lo stesso file pubblicato su altervista.org funzionerà correttamente.

Regole per utilizzare correttamente i video pubblicati su you tube

  1. Fancybox riconosce il collegamento ad un video you tube e lo elabora per renderlo compatibile con la visualizzazione in una fancybox. Per visualizzare un video youtube in una fancybox si può, quindi, utilizzare il normale link al video che normalmente ha questa forma: https://www.youtube.com/watch?v={id_video} dove {id_video} è il codice identificativo del video da visualizzare.
  2. Se vi vuole invece incorporare un video in una pagina web è necessario utilizzare l'url che you tube riserva all'embedding (https://www.youtube.com/embed/{id_video}). Si consiglia, comunque, di aprire la pagina del video da incorporare, di cliccare con il tasto destro il video player e quindi scegliere Copia codice per l'incorporamento , incollarlo nella pagina web e modificarlo secondo le proprie esigenze.
  3. Se si vogliono usare come miniature della galleria video le miniature originali generate da youtube, come ho fatto nell'esempio, posso usare come immagine di sfondo https://i.ytimg.com/vi/{id_video}/hqdefault.jpg dove {id_video} è il codice identificativo del video di cui voglio visualizzare la miniatura.