Mappa del sito
Gallerie
Informazioni sull'accesso a queste risorseModulo di contatto per i membri
Per aiuto e segnalazioni
Lista delle risorse scaricabili con donazione
ATTENZIONE: Non dimenticate di aggiungere i vendor prefixes ai codici css di base.
Review of images and videos galleries
Rassegna di gallerie per immagini e video
Importante, per la performance del sito web, comprimere tutte le immagini, anche le più piccole, prima di caricarle.Compressor
Equal size image gallery - HTML, CSS
Galleria immagini uguale dimensione - HTML, CSS
Preview + code
6a-Equal size image gallery with lightbox - HTML, CSS, JS
6a-Galleria immagini uguale dimensione con lightbox - HTML, CSS, JS
Preview + download
6b-Different size image gallery - HTML, CSS
6b-Galleria immagini diverse dimensioni- HTML, CSS
Preview + download
6c-Different size image gallery with lightbox - HTML, CSS, JS
6c-Galleria immagini diverse dimensioni con lightbox - HTML, CSS, JS
Preview + download
6d-Different height image gallery - HTML, CSS
6d-Galleria immagini diversa altezza- HTML, CSS
Preview + download
6e-Different height image gallery with lightbox - HTML, CSS, JS
6e-Galleria immagini diversa altezza con lightbox - HTML, CSS, JS
Preview + download
6f-Self-filling different size image gallery - HTML, CSS
6f-Galleria immagini diverse dimensioni auto riempitiva- HTML, CSS
Including the lightbox JS version.Preview + download
6g-Image gallery with lightbox + video mp4 + video youtube - HTML, CSS, JS
6g-Galleria immagini + video mp4 + video youtube, con overlay - HTML, CSS, JS
Preview + download
Gallery of all images in a folder
Galleria di tutte le immagini di una cartella
Con questo script è possibile ottenere l'anteprima, in una pagina web, di tutte le immagini contenute in una cartella.La cartella deve trovarsi nello stesso dominio.
NOTA: le immagini nella cartella devono essere nominate e numerate in sequenza in questo modo: 1.jpg, 2.jpg, 3.jpg ecc.
Lo script necessita di jQuery.
Apri codice:
<html>
<body>
<div id = "images" style="text-align:center;"></div>
<!-- script for load images -->
<script>
var dir = "images/"; // folder path
var fileextension = ".jpg";
$(document).ready(function(){
var n = 5; //change images number (1 more than the actual number of images)
for(i=1;i<n;i++){
imageloop(i);
};
});
function imageloop(i){
$("<img />").attr('src', dir + i + fileextension ).appendTo("#images");
}
</script>
<!-- end script for load images -->
</body>
</html>
<body>
<div id = "images" style="text-align:center;"></div>
<!-- script for load images -->
<script>
var dir = "images/"; // folder path
var fileextension = ".jpg";
$(document).ready(function(){
var n = 5; //change images number (1 more than the actual number of images)
for(i=1;i<n;i++){
imageloop(i);
};
});
function imageloop(i){
$("<img />").attr('src', dir + i + fileextension ).appendTo("#images");
}
</script>
<!-- end script for load images -->
</body>
</html>
6h-Folder images gallery with lightbox - HTML, CSS, jQuery
6h-Galleria di tutte le immagini di una cartella con overlay - HTML, CSS, jQuery
Preview + download
6i-Folder images gallery with lightbox 2 - HTML, CSS, JS, PHP
6i-Galleria di tutte le immagini di una cartella con overlay 2 - HTML, CSS, JS, PHP
Titolo, data, oraNOTA: essendo php un linguaggio lato server, le risorse che lo utilizzano possono funzionare solo se caricate su uno spazio hosting.
Preview + download
6l-Team gallery - HTML, CSS
6l-Galleria per la presentazione di un team- HTML, CSS
Preview + download
Image and text gallery - HTML, CSS
Galleria con immagini e testo- HTML, CSS
Preview and code
Argomenti del sito correlati:
Leggi tutto