Galerie d'images Jquery avec zoom. Base de données constamment mise à jour de plugins jQuery pour les galeries de photos, de vidéos et de médias. Outils pour créer de belles images à l'aide de filtres CSS. Galerie Lightbox élégante "ppGallery"

Salut tout le monde! Dans cet article, nous verrons comment créer une galerie magnifique et facilement triable à l'aide de JQuery.

Une belle galerie bien organisée est une chose merveilleuse pour votre site Web qui ravira vous et vos visiteurs. Aujourd'hui, nous allons examiner un plugin très simple à installer et à configurer pour la bibliothèque JQuery – Filterizr.

Malgré la facilité d’utilisation, le plugin est assez léger et efficace. Regardons-le de plus près.

Démonstration

Pour voir comment fonctionne le plugin, rendez-vous sur le site officiel, et le voici devant vous !

Vous pouvez choisir de trier par ville, nature, secteur d'activité, lever, coucher de soleil ou afficher toutes les photos (par défaut). Il y a un bouton Shuffle qui vous permettra de mélanger les images. Les boutons ASC et DESC trient les images respectivement par ordre croissant et décroissant. Si vous souhaitez rechercher une image par position ou par description, sélectionnez l'élément souhaité dans la liste déroulante et saisissez la requête dans le champ de recherche. Lorsque vous passez votre souris sur l'image, l'image passe du noir et blanc à la couleur.

Installation

Pour télécharger la bibliothèque, cliquez sur le bouton Télécharger ou utilisez NPM :

Npm installer filterizr

Le plugin est déjà configuré par défaut, mais si vous souhaitez remplacer les valeurs par défaut, vous pouvez soit :

1) Passer un objet avec des paramètres au constructeur JQuery

Var filterizd = $(".filtr-container").filterizr((
// paramètres
})

2) Réécrivez les options en utilisant la méthode setOptions() sur l'objet Filterizr.

Filterizd.filterizr("setOptions", (
// paramètres
})

Possibilités

Paramètres par défaut :

Options = (
animationDurée : 0,5,
rappels : (
onFilteringStart : fonction() ( ),
onFilteringEnd : fonction() ( )
},
retard: 0,
delayMode : "progressif",
assouplissement : "assouplissement",
filtre : "tout",
filtreOutCss : (
opacité : 0,
transformation : "échelle (0,5)"
},
filtreInCss : (
opacité : 0,
transformation : "échelle(1)"
},
mise en page : "mêmeTaille",
sélecteur : ".filtr-container",
setupControls : vrai
}

Des instructions et des descriptions plus détaillées de chaque paramètre peuvent être trouvées sur

Salut tout le monde! Aujourd'hui, nous allons parler peut-être de la meilleure galerie de photos gratuite, du meilleur curseur vidéo et photo, parlons du « cadre photo ». Malgré le fait que le script n'est plus pris en charge depuis 2 ans et que l'auteur est passé à un projet sur un sujet similaire, il fonctionne très bien et continue de plaire aux yeux.

Principaux avantages (+)

Facile à installer, configurer et utiliser. Outre jQuery, vous aurez besoin connecter seulement 2 fichiers, et pour afficher la galerie, il vous suffit de fournir des liens vers les images.

Affecte légèrement la vitesse de chargement du site.

Adaptabilité. Votre galerie a fière allure sur un téléphone, un ordinateur portable et même un écran de télévision.

Une abondance de paramètres et de fonctions qui peuvent être connectés séparément via les attributs des balises HTML.

Prise en charge des appareils tactiles.

Prise en charge vidéo.

Possibilité de chargement paresseux des images.

Et bien d’autres choses qui séduiront un utilisateur averti.

Inconvénients (-)

Manque de support utilisateur.

La probabilité que votre problème soit résolu ou corrigé est presque nulle. Oui, c'est mauvais, mais pas fatal.

Première option pour connecter Fotorama

Cette option de connexion est la plus simple, mais pas la meilleure ; elle ne doit être utilisée que si vous devez afficher la galerie sur la plupart des pages du site. L’avantage de cette option est l’utilisation du CDN.

Vérification de jQuery. Accédez au code source du site (raccourci clavier Ctrl + U) → en essayant de trouver quelque chose comme cette ligne : https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js

Pour faciliter votre recherche, utilisez Ctrl + F . Si la ligne convoitée n'est pas là, alors vous devrez vous connecter à jQuery. Sur WordPress, cela peut être fait en collant le code ci-dessous dans le fichier de fonctions du thème (functions.php). En fait, ce script est utilisé lorsqu'il y a des conflits entre différentes versions de jQuery et il fonctionne selon le schéma suivant : il supprime le jQuery précédemment enregistré, en enregistre un nouveau et affiche le script. Les versions actuelles de la bibliothèque jQuery peuvent être trouvées ici.

Vous pouvez simplement insérer cette ligne entre et :

Nous connectons fotorama.css et fotorama.js. Insérez le code suivant entre les balises et, dans WordPress cela se fait dans le fichier d'en-tête du thème (header.php).

Ceci termine la connexion de la galerie en utilisant la première méthode. Comment l'utiliser est écrit dans la section « Créer directement une galerie ».

Dans cette option de connexion, les fichiers de script seront affichés uniquement sur les pages nécessaires via [shortcode]. Et si vous utilisez le plugin Autoptimize, alors le code du script sera également intégré aux fichiers du thème. Ces manipulations simples devraient augmenter la vitesse de chargement du site.

Vérification de jQuery. Tout comme dans la première option, voir ci-dessus.

Téléchargez les fichiers du cadre photo → décompressez → téléchargez-les dans un dossier séparé à la racine du site.

Pour créer un shortcode, insérez le code ci-dessous dans le fichier de fonctions du thème (functions.php), remplacez les liens vers les fichiers par les vôtres..js"> " ; ) add_shortcode("photo","sd");

Désormais, lorsque vous rédigez un article, saisissez le shortcode à la fin

Créer directement une galerie

La galerie est affichée en code HTML en utilisant conteneur classe c = "photorama", le conteneur contient le code de sortie de l'image ou lien vers l'image . Lorsque vous rédigez un article à l'aide du moteur WordPress, passez l'éditeur en mode texte et saisissez le conteneur c class="fotorama" .

Cela ressemble à ceci :

Ou comme ceci (la numérotation des liens est facultative) :

1 3 4

Exemples de paramètres Fotorama Dimensions du conteneur

La taille du bloc du cadre photo correspond à la taille de la première image, les autres images sont mises à l'échelle proportionnellement à la première. Pour corriger cette situation, vous pouvez spécifier les dimensions manuellement.

Il existe d'autres paramètres :

Data-width="98%" //largeur relative data-ratio="800/600" //rapport d'aspect data-minwidth="420" //min. largeur data-maxwidth="900" // max. largeur data-minheight="320" // min. hauteur data-maxheight="100% // hauteur relative maximale data-height="100% // hauteur relative

Miniatures

Data-nav="thumbs" est responsable des vignettes

Mais cette méthode n'est pas très efficace, puisque le script doit charger toutes les photos en même temps pour générer des vignettes, il serait donc plus rationnel de préparer de petites copies des images à l'avance. WordPress crée automatiquement des vignettes, c'est ce que nous utiliserons. Pour obtenir un lien vers la vignette, ajoutez -70x70 au nom du fichier (https://site/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://site/wp-content/uploads/2017/ 11/27ltl9eRXk- 70x70.jpg).

Par défaut, la vignette est de 64 × 64. Vous pouvez ajuster ce paramètre en utilisant data-thumbwidth (largeur) et data-thumbheight (hauteur). Si vous souhaitez que la vignette ait sa propre taille, définissez les paramètres de largeur et de hauteur du fichier vignette :

Code HTML + Fotorama

Photoframe traite parfaitement HTML et CSS, ce qui étend considérablement les fonctionnalités du script. Travaillez avec des liens, des blocs, des tableaux, des paragraphes, écrivez du CSS et bien plus encore. Vous trouverez ci-dessous quelques exemples du travail de la galerie. Si la partie visuelle ne s'affiche pas, cliquez alors sur le bouton "Résultat".

Afficher/Masquer les exemples

Voir le Pen ooppwb d'Ivanov Klim (@DreamerKlim) sur CodePen.

Voir le Pen aVEEVb d'Ivanov Klim (@DreamerKlim) sur CodePen.

Mode plein écran data-allowfullscreen="true" //dans la fenêtre du navigateur data-allowfullscreen="native" //sur tout le moniteur

Il existe une option pour ajouter une grande image distincte pour le mode plein écran via data-full :

Autre data-autoplay ="true" //autoplay data-autoplay="3000" //intervalle entre les diapositives dans ms data-caption ="One" //commentaires sur les images data-keyboard ="true" //flèche de navigation data-shuffle ="true" //images dans un ordre différent data-navposition ="top" //vignettes en haut data-loop ="true" //défilement cyclique Essayons de tout connecter et d'ajouter une vidéo "quelque commentaire 1" > "quelque commentaire 2" > Pour trouver un travail que vous aimez

Les galeries d'images et les curseurs font partie des formats jQuery les plus populaires. Grâce à eux, vous pouvez ajouter la quantité nécessaire de contenu visuel à votre site, tout en économisant un espace précieux.

Les galeries et les curseurs rendent la page moins chargée, mais vous permettent néanmoins d'ajouter toutes les images dont vous avez besoin pour transmettre votre message. Ils seront particulièrement utiles pour les boutiques en ligne.

Dans l'article d'aujourd'hui, nous avons rassemblé pour vous les meilleures galeries d'images et curseurs jQuery.

Pour les installer, ajoutez simplement les plugins sélectionnés à la section d'en-tête de la page HTML avec la bibliothèque jQuery et configurez-les selon la documentation (juste quelques lignes de code).

Choisissez lequel de ces éléments s’intègre parfaitement à votre projet.

1. Curseur d'amorçage

Bootstrap Slider est un curseur d'image gratuit et optimisé pour les mobiles avec défilement tactile et par balayage. Il sera superbe sur n'importe quel écran et dans n'importe quel navigateur. Vous pouvez charger des images, des vidéos, du texte, des vignettes et des boutons dans des curseurs.

2. Curseur d'aperçu du produit

Product Preview Slider incarne tout le potentiel de jQuery et s’intègre parfaitement dans n’importe quelle interface. Vous serez également satisfait de la qualité et de la propreté du code de ce plugin.

3. Galerie d'images extensible

Expandable Image Gallery est un plugin étonnant qui se transforme en une galerie plein écran en un seul clic. Il peut être utilisé pour la section « À propos de nous » ou pour afficher des informations sur les produits.

4. Fotorama

Fotorama est un plugin de galerie jQuery réactif qui fonctionne à la fois pour les navigateurs de bureau et mobiles. Il offre une variété d'options de navigation : vignettes, défilement, boutons avant et arrière, diaporamas automatiques et puces.

5. Curseur immersif

Immersive Slider vous permet de créer une expérience de visualisation de diapositives unique similaire au curseur Google TV. Vous pouvez modifier l’image d’arrière-plan pour qu’elle soit floue afin de conserver la mise au point sur la photo principale.

6. Les moins js

Leastjs est un plugin jQuery réactif qui vous aidera à créer une superbe galerie. Lorsque vous passez le curseur sur l'image, du texte apparaît ; lorsque vous cliquez, la fenêtre s'agrandit en plein écran.

7. Modèle de panneaux coulissants

Ce plugin est idéal pour un portfolio. Il créera des blocs d’images disposés horizontalement (verticalement sur des petits écrans) auxquels sera lié le contenu sélectionné.

8. Modèle de portefeuille Squeezebox

Le modèle de portfolio Squeezebox propose des effets de mouvement pour votre portfolio. Lorsque vous survolez l'image principale (ou le bloc), des éléments ancrés apparaissent.

9. Mélanger les images

Shuffle Images est un plugin réactif étonnant qui vous permet de créer une galerie avec des images qui changent au survol.

10. Plugin jQuery Lightbox gratuit

Le plugin jQuery Lightbox gratuit vous aidera à afficher une ou plusieurs images sur une seule page. Ils peuvent également être agrandis et ramenés à leur taille d'origine.

11. PgwSlider – Curseur réactif pour jQuery

PgwSlider est un curseur d'image minimaliste. Le code jQuery est léger, donc la vitesse de chargement de ce plugin vous surprendra agréablement.

12. Galerie de polaroïds épars

Scattered Polaroids Gallery est un superbe curseur au design plat. Ses éléments se déplacent de manière chaotique lors du changement d'image, ce qui est incroyable.

13. Filtre de contenu rebondissant

Bouncy Content Filter est une solution idéale pour les portefeuilles. Ce plugin permet aux utilisateurs de passer rapidement d'une catégorie à une autre.

14. Curseur jQuery simple

Simple jQuery Slider porte bien son nom. Ce plugin combine des éléments de JavaScript, HTML5 et CSS3. La démo par défaut permet uniquement de charger du texte, mais si vous apportez quelques modifications, vous pouvez également ajouter du contenu visuel.

15. Glisser JS

Glide JS est un curseur jQuery simple, rapide et réactif. Il est facile à configurer et le plugin ne prend pas beaucoup de place.

16. Glisseur plein écran avec parallaxe

Cet incroyable curseur jQuery avec la possibilité de charger des images et du texte convient à n'importe quel site Web. Il ravira les utilisateurs avec un léger effet de parallaxe et une apparition lente du texte.

Bonjour, chers lecteurs ! Dans cette leçon, je vais vous montrer comment créer une galerie de photos minimaliste, mais en même temps pratique et fonctionnelle à l'aide de jQuery, ou une galerie d'images, comme vous le souhaitez. La galerie a la possibilité de créer des catégories, suivies d'un filtrage. Il est également possible de lancer un diaporama. La galerie fonctionne dans tous les navigateurs, il n'y aura donc aucun problème d'adaptation.

Pour créer cette galerie, deux bibliothèques gratuites seront utilisées : Quicksand et PrettyPhoto. Ils facilitent grandement la création d’une galerie. Comme toujours, vous pouvez voir le résultat du travail sur la page de démonstration, ainsi que télécharger l'archive depuis la galerie de travail et tous les fichiers sources. Le seul inconvénient, pour ainsi dire, est la création manuelle de vignettes pour les grandes images. À tous autres égards, cette galerie mérite l’attention. Tout comme !

Balisage HTML

Tout d'abord, regardons le panneau avec une liste de catégories, il s'agit d'une liste à puces ul. De plus, chaque élément de la liste doit avoir un nom de classe unique.

1 2 3 4 5 6 7 8

Catégories : Tous Catégorie 1 Catégorie 2 Catégorie 3 Catégorie 4

1 2 3 4 5 6 7 8 9 10 11

Nom de l'image publié : 2012

Comme mentionné ci-dessus, les éléments de liste sont des images dans la galerie. Chaque élément de liste comprend des composants. C'est l'image elle-même, ou plutôt sa miniature, ainsi qu'une description. La vignette est un lien vers l'image principale. L'attribut rel est nécessaire pour appeler javascript et ouvrir l'image principale.

N'oubliez pas non plus 2 choses importantes : l'élément de liste li doit avoir un attribut data-id unique. L'attribut data-type contient la classe de catégorie dont j'ai décrit la liste ci-dessus. Tout semble être une question de balisage.

Styles CSS

Je ne me concentrerai pas particulièrement sur les styles, car nous utilisons la bibliothèque PrettyPhoto prête à l'emploi, qui se charge d'agrandir l'image, et il y a beaucoup de code CSS. Cependant, il convient de noter qu'il existe 5 options pour concevoir une image agrandie, bien qu'idéalement seulement 3, car dans deux options, seul l'arrondi est supprimé.

Par conséquent, je n'afficherai que les styles CSS pour les vignettes et la liste des catégories.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

Catégorie de portefeuille ( margin-bottom : 30px ; ) .portfolio-categli ( affichage : en ligne ; marge droite : 10px ; } .image-block( affichage : bloc ; position : relative ; } .image-block img ( bordure : 1px solide #d5d5d5 ; rayon de bordure : 4px 4px 4px 4px ; fond : #FFFFFF ; remplissage : 10 px ; } .image-block img : survol ( bordure : 1px solide #A9CF54 ; ombre-boîte : 0 0 5px #A9CF54 ; } .zone de portefeuille li ( flotteur : gauche ; marge : 0 12px 20px 0 ; débordement : caché ; largeur : 245 px ; remplissage : 5 px ; } .home-portfolio-text ( marge-haut : 10px ; ) li.active a (texte-décoration : souligner ;)

En principe, tout devrait être clair avec les styles. Pour aligner les catégories, la propriété display est définie sur inline . Pour donner un effet de contour à l'image, définissez la couleur de fond (blanc) et le remplissage sur 10 pixels. Les tailles des éléments de liste sont définies dans .portfolio-area li .

jQuery

Et enfin, le plus important est de savoir à quoi sert toute la leçon. C'est du code jQuery. Commençons par filtrer les images par catégorie.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

// Sélectionnez tous les éléments enfants de la zone de portefeuille et écrivez dans une variable var $data = $(".portfolio-area" ) .clone () ; $(".portfolio-categli" ) .cliquez (fonction (e) ( $(".filter li" ) .removeClass ( "actif" ) ; var filterClass= $(this) .attr ("classe" ) .split (" " ) .slice (- 1 ) [ 0 ] ; if (filterClass == "tous" ) ( var $filteredData = $data.find(".portfolio-item2" ) ; ) autre ( var $filteredData = $data.find(".portfolio-item2" ) ; } $(".portfolio-area") .quicksand ($filteredData, ( durée : 600 , ajuster la hauteur : "auto" ) , fonction () ( LightboxPhoto() ; } ) ; $(this).addClass("actif"); retourner faux ; } ) ;

À l'aide de la méthode clone() et d'un sélecteur, nous sélectionnons tous les éléments enfants de .portfolio-area et les écrivons dans la variable $data. Ensuite, nous suivons le clic sur l'une des catégories, l'élément li de la liste avec la classe .portfolio-categ . Nous rendons toutes les catégories inactives en supprimant RemoveClass("active"). Si cela n'est pas fait, au fil du temps, toutes les catégories seront actives et le filtrage s'arrêtera.

Puisque nous cliquons sur un élément de liste, le sélecteur this contient un élément de liste, c'est-à-dire li , nous en prenons la valeur de l'attribut de classe et en utilisant la méthode split, nous divisons le nom de la classe en plusieurs parties, la bordure est un espace (c'est-à-dire que si la classe était " all active ", alors après la division, nous obtenons un tableau de " all " et " active "). Et puis, en utilisant la méthode slice, nous sélectionnons le premier élément du tableau (dans notre cas, « tous ») et écrivons le résultat résultant dans la variable filterClass. S'il n'y a pas d'espace, le nom de la classe ne changera pas.

Ensuite, nous vérifions si la variable filterClass contient la chaîne all , puis en utilisant la méthode .find, nous sélectionnons tous les éléments avec la classe portfolio-item2 dans le tableau $data, que nous avons examiné ci-dessus. Les éléments sélectionnés (et ce sont tous les éléments de la liste, c'est-à-dire toutes les images) sont placés dans la variable filteredData.

Sinon, si filterClass n'est pas égal à all , alors nous ne placerons pas tous les éléments de la liste dans la variable filterData, mais uniquement ceux dont l'attribut data-type correspond à la classe de catégorie. Bref, des éléments d’une seule catégorie.

Et finalement, nous transmettons la variable résultante à la bibliothèque jquery quicksand, qui filtre les images. Voilà pour le filtrage.

Maintenant, comme pour agrandir l’image dans la fenêtre pop-up. Tout est beaucoup plus simple ici.

1 2 3 4 5 6 7

jQuery("a" ) .prettyPhoto (( animationSpeed : "rapide", diaporama : 5000, thème : "facebook", show_title : faux overlay_gallery : faux } ) ;

Un clic sur un lien dont l'attribut rel commence par PrettyPhoto est tracké. Ensuite, la bibliothèque PrettyPhoto entre en jeu et l'image est miraculeusement agrandie. À propos, nous transmettons également plusieurs paramètres. Comme la vitesse d'animation est rapide, le délai du diaporama est de 5 secondes, le thème de conception Facebook (il y a 5 thèmes au total, ils se trouvent dans le dossier images/prettyPhoto), et nous interdisons également d'afficher le nom de l'image et agrandir l'image au survol de la souris. La documentation complète de PrettyPhoto peut être trouvée

Pour rester informé des derniers articles et leçons, abonnez-vous à

J’ai passé beaucoup de temps à choisir le sujet du sujet d’aujourd’hui. Du coup, j’ai remarqué que nous n’avons pas encore réalisé de collections avec des galeries d’images. À mon avis, c’est un excellent sujet, puisque de nombreux sites proposent des galeries. Franchement, ils ne sont pas tous très attractifs. Compte tenu des tendances actuelles dans le développement de jquery, html5, etc., j'ai pensé qu'il devait y avoir des solutions bien plus attractives que celles que j'avais rencontrées auparavant. Donc. Après avoir passé une journée, nous avons réussi à trouver un grand nombre de scripts. De toute cette montagne, j'ai décidé de sélectionner uniquement, parce que j'aime, comme vous l'avez déjà remarqué dans les posts précédents.
La galerie d’images n’est pas seulement applicable aux albums photo. Le script peut être utilisé, je pense qu'il serait encore plus correct, comme portfolio pour les photographes, les designers, etc. Les effets Jquery aideront à attirer l'attention des visiteurs et ajouteront simplement de l'élégance à votre site.
Donc. Nous attirons votre attention sur une collection de plugins de galerie d'images jquery pour le site.
N'oubliez pas de commenter et rappelez-vous, pour ne pas perdre cette collection, vous pouvez l'ajouter à vos favoris en cliquant sur l'étoile en bas de l'article.

PHOTOBOX Une galerie d'images gratuite, légère et adaptative dans laquelle tous les effets et transitions sont réalisés en CSS3. Idéal pour créer un site portfolio de photographe.

S Gallery Un plugin de galerie d'images Jquery attrayant. L'animation fonctionne en CSS3.

DIAMONDS.JSPlugin original pour créer une galerie d'images. Les miniatures sont en forme de diamant, ce qui est très populaire en ce moment. Ce formulaire est réalisé en CSS3. Le seul inconvénient de cette galerie est l’absence de lightbox dans laquelle la photo s’ouvrirait en taille réelle. Autrement dit, vous devrez visser le plugin lightbox. Ce script génère une grille adaptative d'images en forme de losange.

Superbox Une galerie d'images moderne utilisant Jquery, CSS3 et HTML5. Nous sommes tous habitués au fait que lorsque vous cliquez sur un aperçu, l'image complète s'ouvre dans une lightbox (fenêtre pop-up). Les développeurs de ce plugin ont décidé que la lightbox avait déjà fait son temps. Les images de cette galerie s'ouvrent sous l'aperçu. Regardez la démo et voyez que cette solution semble beaucoup plus moderne.
| Galerie de fondus diagonales fluides Une galerie d'images moderne dans laquelle les aperçus sont répartis sur tout l'espace de l'écran. Le script peut analyser un dossier contenant des photos sur le serveur, c'est-à-dire qu'il n'est pas nécessaire d'insérer chaque image séparément. Téléchargez simplement les images dans un dossier sur le serveur et spécifiez le chemin d'accès au répertoire dans les paramètres. Ensuite, le script fera tout lui-même.

Gamma Gallery Une galerie d'images élégante, légère et réactive avec une grille de style Pinterest qui est devenue très populaire ces jours-ci. Le script fonctionne parfaitement sur les ordinateurs de bureau et les appareils mobiles avec n'importe quelle résolution d'écran. Une excellente solution pour créer un portfolio de concepteur Web.

GRILLE DE VIGNETTES AVEC APERÇU EXPANSIBLE Le plugin est une grille d'images réactive. Lorsque vous cliquez ci-dessous, une photo et une description plus grandes apparaîtront. Idéal pour créer un portfolio.

jGalleryjGallery est une galerie d'images réactive en plein écran. Les effets, les transitions et même le style sont facilement personnalisables.

Glisse.js Un plugin de galerie d'images simple mais très efficace. C'est exactement la solution lorsque vous devez créer un album photo. Le plugin prend en charge les albums et a un effet de retournement très cool.

Mosaic Flow Une galerie d'images simple et réactive avec une grille de style Pinterest.

GalereyaUne autre galerie élégante avec une grille de style Pinterest filtrée par catégorie. Fonctionne dans les navigateurs : Chrome, Safari, Firefox, Opera, IE7+, navigateur Android, Chrome mobile, Firefox mobile.

least.jsExcellente galerie d'images gratuite utilisant JQUERY, 5 et CSS3. Il a une apparence très attrayante et attirera sans aucun doute l’attention de vos visiteurs.

flipLightBox Une galerie d'images simple. Lorsque vous cliquez sur l'aperçu, l'image complète s'ouvre dans une lightbox.

Galerie blueimpGalerie flexible. Capable d'afficher non seulement des images, mais aussi des vidéos dans une fenêtre modale. Fonctionne très bien sur les appareils tactiles. Il est facile à personnaliser et il est possible d’étendre les fonctionnalités à l’aide de plugins supplémentaires (Voir le plugin suivant).