Gridzy.Gallery
Bibliothèque JavaScript
L'expérience photo la plus incroyable que j'ai trouvée. Enfin quelqu'un sait comment faire ça CORRECTEMENT !
Milo Persic – un utilisateur de la bibliothèque
Aperçu rapide
Tutoriel vidéo d'une minute
Apprenez ceci en une minute seulement :
Utilisation de base
Configuration
Filtres
Apparence
Styles de légende
Styles de légende prédéfinis pour des solutions simples et rapides
Passez la souris sur les images pour voir le style de légende configuré. Jouez avec les boutons et les sélecteurs de couleurs pour configurer le style intégré affiché.
Balises et filtres
Pour afficher vos images de manière plus structurée
Le système de filtrage intégré est extrêmement flexible. Le fait que des sélecteurs CSS soient utilisés pour le filtrage permet en fait d'utiliser presque n'importe quel type de filtre.
Hautement compatible
Utilisable avec de nombreuses boîtes lumineuses
Combinez la galerie avec n'importe quelle lightbox. La probabilité qu'elle soit compatible est de presque 100 %. Cliquez sur les images pour voir la lightbox PhotoSwipe comme exemple.
Il existe des articles de blog avec des extraits de code prêts à l'emploi :
Très flexible
Créer des styles personnalisés
Si vous connaissez CSS, vous pouvez styliser les éléments de la galerie comme vous le souhaitez.
CSS de l'exemple montré :
/* CSS class: "gridzySkin-custom-sepia" */
@property --gridzySkin-custom-sepia--filter-sepia {
initial-value: 1;
inherits: true;
syntax: "<number>";
}
@property --gridzySkin-custom-sepia--filter-contrast {
initial-value: 1;
inherits: true;
syntax: "<number>";
}
.gridzySkin-custom-sepia > .gridzyItem {
position: relative;
overflow: unset;
margin: -10px;
border: 10px solid #fff;
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
border-radius: 10px;
}
.gridzySkin-custom-sepia > .gridzyItem *:not(.gridzyCaption) {
display: inline;
}
.gridzySkin-custom-sepia > .gridzyItem .gridzyCaption * {
display: initial;
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n) {
transform: rotate(-1deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n+1) {
transform: rotate(-.5deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n+2) {
transform: rotate(1deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(4n+3) {
transform: rotate(.5deg);
}
.gridzySkin-custom-sepia .gridzyImage {
position: relative;
vertical-align: middle;
border-radius: 3px;
--gridzySkin-custom-sepia--filter-sepia: 1;
--gridzySkin-custom-sepia--filter-contrast: .7;
filter: sepia(var(--gridzySkin-custom-sepia--filter-sepia)) contrast(var(--gridzySkin-custom-sepia--filter-contrast));
transition: --gridzySkin-custom-sepia--filter-sepia .6s, --gridzySkin-custom-sepia--filter-contrast .6s;
}
.gridzySkin-custom-sepia > .gridzyItem:hover .gridzyImage {
--gridzySkin-custom-sepia--filter-sepia: 0;
--gridzySkin-custom-sepia--filter-contrast: 1;
}
.gridzySkin-custom-sepia .gridzyCaption {
margin: 0;
padding: .5em;
position: absolute;
z-index: 1;
bottom: -.5em;
top: auto;
width: auto;
max-width: calc(100% - 2em);
height: fit-content;
max-height: 100%;
overflow: auto;
box-sizing: border-box;
background: rgba(238, 238, 238, .8);
color: #000;
box-shadow: 1px 1px 3px rgba(0, 0, 0, .3);
opacity: 0;
transition: opacity .3s;
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(3n) .gridzyCaption {
transform: translateX(1000px) translateX(-50%) rotate(3deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(3n+1) .gridzyCaption {
transform: translateX(1000px) translateX(-50%) rotate(-3deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(3n+2) .gridzyCaption {
transform: translateX(1000px) translateX(-50%) rotate(-1deg);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n) .gridzyCaption {
left: calc(50% - 1000px);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+1) .gridzyCaption {
left: calc(54% - 1000px);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+2) .gridzyCaption {
left: calc(46% - 1000px);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+3) .gridzyCaption {
left: calc(52% - 1000px);
}
.gridzySkin-custom-sepia > .gridzyItem:nth-child(5n+4) .gridzyCaption {
left: calc(48% - 1000px);
}
.gridzySkin-custom-sepia > .gridzyItem:hover .gridzyCaption {
opacity: 1;
}Utilisez n'importe quel HTML
Vous pouvez utiliser presque n'importe quel code HTML. Il n'y a que très peu de restrictions. Les exemples présentés ici produisent tous le même résultat visuel.
Exemple 1 :
<ul class="gridzy gridzySkinClassic">
<li>
<a href="https://www.example.com/">
<img class="gridzyImage" src="https://www.example.com/image1.jpg" />
<span class="gridzyCaption">example caption 1</span>
</a>
</li>
<li>
<a href="https://www.example.com/">
<img class="gridzyImage" src="https://www.example.com/image2.jpg" />
<span class="gridzyCaption">example caption 2</span>
</a>
</li>
...
</ul>Exemple 2 :
<section class="gridzy gridzySkinClassic">
<figure>
<img class="gridzyImage" src="https://www.example.com/image1.jpg" />
<figcaption class="gridzyCaption">example caption 1</figcaption>
</figure>
<figure>
<img class="gridzyImage" src="https://www.example.com/image2.jpg" />
<figcaption class="gridzyCaption">example caption 2</figcaption>
</figure>
...
</section>Autres fonctionnalités utiles
Chargement différé
Chargez vos images visualisées plus rapidement
Cela charge uniquement les images proches de la zone visible. Il y a donc plus de bande passante pour les images visibles.
API
Vous permet de faire beaucoup plus
Cela vous permet d'ajouter et de supprimer des images par programmation, de modifier des options ou de réagir à des événements.
Extensions
Vous propose des solutions pour des scénarios individuels
Il s'agit d'une collection d'articles de blog qui se développent au fil du temps et contiennent des extraits de code utiles pour étendre facilement Gridzy.Gallery .
Utilisateur À propos de la bibliothèque
Passons aux choses sérieuses !
Cliquez sur le bouton pour consulter les plans !