Risorse
index.html
<!DOCTYPE html>
<html lang="en">
<!--
*********************************************************************************
UNA GALLERIA CON FACYBOX
=======================================================================
Questa pagina utilizza immagini picsum.photos per creare una galleria di
immagini Fancybox.
Inserendo il numero n nel campo di testo verrà generata una galleria
di n immagini casuali prese da picsum.photos.
Non è stato utilizzato un foglio di stile personalizzato. Il layout
è stato disegnato utilizzando classi bootstrap.
*********************************************************************************
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Galleria Foto</title>
<link rel="stylesheet" href="bower_components/bootstrap-4.1.1-dist/css/bootstrap.css">
<link rel="stylesheet" href="bower_components/fancybox/dist/jquery.fancybox.min.css">
</head>
<body>
<!-- Testata della pagina -->
<div class="jumbotron jumbotron-fluid bg-dark text-light">
<div class="container">
<h1 class="display-3">Galleria di immagini</h1>
<p class="lead">Galleria costruita con fancybox</p>
</div>
</div>
<!-- FINE -->
<div class="container">
<h1 class="display-4">La mia galleria</h1>
<!-- Campo di immissione e pulsante -->
<div class="row">
<div class="col-sm">
<input class="form-control mb-3" id="user-input" placeholder="inserisci un numero">
</div>
<div class="col-sm-auto">
<button id="btn-esegui" class="btn btn-primary mb-3 w-100">Vai</button>
</div>
</div>
<!-- FINE -->
<!-- Contenitore galleria con id galleria -->
<div class="row" id="galleria">
<!-- Galleria esemplificativa che sarà sostituita da quella generata -->
<div class="col-sm-6 col-md-4 col-lg-3 mb-3">
<a href="https://picsum.photos/1280/720?image=100" data-fancybox="gal">
<img src="https://picsum.photos/400/250?image=100" class="img-fluid">
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-3">
<a href="https://picsum.photos/1280/720?image=160" data-fancybox="gal">
<img src="https://picsum.photos/400/250?image=160" class="img-fluid">
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-3">
<a href="https://picsum.photos/1280/720?image=180" data-fancybox="gal">
<img src="https://picsum.photos/400/250?image=180" class="img-fluid">
</a>
</div>
<div class="col-sm-6 col-md-4 col-lg-3 mb-3">
<a href="https://picsum.photos/1280/720?image=140" data-fancybox="gal">
<img src="https://picsum.photos/400/250?image=140" class="img-fluid">
</a>
</div>
<!-- FINE galleria esemplificativa-->
</div>
<!-- FINE contenitore -->
</div>
<script src="bower_components/jquery-3.3.1.min/index.js"></script>
<script src="bower_components/bootstrap-4.1.1-dist/js/bootstrap.bundle.min.js"></script>
<script src="bower_components/fancybox/dist/jquery.fancybox.min.js"></script>
<script>
// Handler per evento ready
$(function () {
// handler per click su pulsante 'Vai'
$('#btn-esegui').on('click', function () {
// Contenitore galleria
var $galleria = $('#galleria');
// numero inserito dall'utente
var num = parseInt($('#user-input').val());
// Se il numero è realmente un numero...
if (!isNaN(num)) {
// svuoto il contenitore
$galleria.empty();
// Ripeto per num volte il ciclo
for (var i = 0; i < num; i++) {
// Creao l'url dell'immagine casuale presa da picsum.photos
var url = 'https://picsum.photos/1280/720?lock=' + Math.round(Math.random() *
1000);
// Creo l'elemento immagine impostando l'attributo src uguale all'url creata
// e aggliungo l'attributo alt, un titolo e la classe bootstrap img-fluid
var $img = $('<img />')
.attr({
src: url,
alt: "Immagine da picsum",
title: "Immagine da picsum",
class: "img-fluid"
});
// Creo l'elemento <a> che richiamerà l'ingrandimento dell'immagine utilizzando
// fancybox. Aggiungo l'attributo href impostandolo sull'url dell'immagine e
// l'attributo custom data-fancybox che attiva il plugin. Inserisco l'immagine appena
// creata nell'elemento <a>
var $a = $('<a />')
.attr ({
href: url,
"data-fancybox": 'gal'
}).append($img);
// Creo una <div> con varie classi col-* che la rendono responsive,
// la classe mb-3 che aggiunge un margine inferiore e aggiungo
// l'elemento <a> appena creato
var $col = $('<div />')
.addClass("col-sm-6 col-md-4 col-lg-3 mb-3")
.append($a);
// Aggiungo l'elemento col al contenitore della galleria
$galleria.append($col);
}
}
})
})
</script>
</body>
</html>