Belle galerie de photos jquery. Fotorama est une galerie jQuery réactive, d'installation et de personnalisation. Plugin "Galerie des minuteries"

Dans ce tutoriel, je vais vous montrer comment créer un décor minimaliste mais confortable et fonctionnel galerie de photos sur jQuery, ou une galerie d'images, à votre guise. 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.

Deux bibliothèques gratuites seront utilisées pour créer cette galerie JQuery: Sables mouvantset Jolie photo... 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 à partir de la galerie de travail et tous les fichiers source. Le seul inconvénient, si je puis dire, est la création manuelle de vignettes pour les grandes images. Sinon, ce galerie digne d'attention.

SOURCES

Balisage HTML

Tout d'abord, jetons un coup d'œil au 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.

Catégories:

Tout

Catégorie 1

Catégorie 2

Catégorie 3

Catégorie 4

Nom de l'image

Comme indiqué ci-dessus, les éléments de la liste sont des images de la galerie. Chaque élément de la liste comprend des éléments composites. Il s'agit de l'image elle-même, ou plutôt de sa vignette, ainsi que d'une description. La vignette est un lien vers l'image principale. L'attribut rel est requis pour appeler javascript et ouvrir l'image principale.

N'oubliez pas non plus 2 choses importantes, l'attribut data-id doit être unique pour l'élément li list. L'attribut de type de données contient la classe de catégorie, dont j'ai décrit la liste ci-dessus. Tout est question de balisage.

Styles CSS

Je ne me concentrerai pas sur les styles, car nous utilisons une bibliothèque prête à l'emploi Jolie photo, qui est responsable de l'augmentation de l'image, et il y a beaucoup de code css. Cependant, il convient de noter qu'il existe 5 options pour la conception de l'image agrandie, bien que idéalement seulement 3, car dans deux options, seul l'arrondi est supprimé.

Par conséquent, je montrerai uniquement les styles CSS pour les vignettes et une liste de catégories.

Portfolio-categ (marge-bas: 30px;)
.portfolio-categ li (
affichage: en ligne;
marge droite: 10px;
}
.image-bloc (
bloc de visualisation;
position: relative;
}
.image-bloc img (
bordure: 1px solide # d5d5d5;
rayon de la bordure: 4px 4px 4px 4px;
arrière-plan: #FFFFFF;
rembourrage: 10px;
}
.image-block img: hover (
bordure: 1px solide # A9CF54;
boîte-ombre: 0 0 5px # A9CF54;
}
.portfolio-area li (
float: gauche;
marge: 0 12px 20px 0;
débordement caché;
largeur: 245px;
rembourrage: 5px;
}
.home-portfolio-text (margin-top: 10px;)
li.active a (texte-décoration: souligné;)

En principe, tout doit être clair avec les styles. Pour aligner les catégories, la propriété d'affichage est définie sur en ligne. Afin de donner l'effet d'un trait à l'image, définissez la couleur d'arrière-plan (blanc) et un décalage de 10 pixels. Les tailles des éléments de la liste sont définies dans .portfolio-area li.

jQuery

Et enfin, la chose la plus importante, alors pour quoi toute la leçon. C'est du code jQuery. Commençons par filtrer les images par catégorie.

// Sélectionnez tous les enfants de portfolio-area et écrivez dans la variable
var $ data \u003d $ (". portfolio-area"). clone ();

$ (". portfolio-categ li"). click (fonction (e) (
$ (". filter li"). removeClass ("active");

Var filterClass \u003d $ (this) .attr ("class"). Split ("") .slice (-1);

Si (filterClass \u003d\u003d "tous") (
var $ filteredData \u003d $ data.find (". portfolio-item2");
) autre (
var $ filteredData \u003d $ data.find (". portfolio-item2");
}
$ (". portfolio-area"). quicksand ($ filteredData, (
durée: 600,
AdjustHeight: "auto"
), une fonction () (

LightboxPhoto ();
});
$ (this) .addClass ("actif");
retourner faux;
});

En utilisant la méthode clone () et le sélecteur, nous sélectionnons tous les enfants de la zone .portfolio et les écrivons dans la variable $ data. Ensuite, nous suivons le clic sur l'une des catégories, l'élément li dans la liste avec la classe .portfolio-categ. Nous rendons toutes les catégories inactives en supprimant removeClass ("active"), si cela n'est pas fait, avec le temps, toutes les catégories seront actives et le filtrage s'arrêtera.

Puisque nous cliquons sur l'élément de liste, le sélecteur contient l'élément de liste, c'est-à-dire li, nous prenons la valeur de l'attribut de classe et utilisons la méthode de fractionnement pour diviser le nom de la classe en plusieurs parties, la bordure est un espace (c'est-à-dire si la classe était " tous actifs "puis après la séparation, nous obtenons un tableau de" tous "et" actifs "). Et puis, en utilisant la méthode slice, nous sélectionnons le premier élément du tableau (dans notre cas, "all"), et écrivons le résultat obtenu dans la variable filterClass. S'il n'y avait pas d'espace, le nom de la classe ne changera pas.

Ensuite, nous vérifions si la variable filterClass contient la chaîne tout, puis en utilisant la méthode .find, nous sélectionnons tous les éléments avec la classe portfolio-item2 dans le tableau $ data dont nous avons discuté 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 tout, puis dans la variable filterData nous ne placerons pas tous les éléments de la liste, mais uniquement ceux dont l'attribut de type de données correspond à la classe de catégorie. En bref, les articles appartiennent à une seule catégorie.

Et à la fin, nous transférons la variable résultante dans la bibliothèque jquery sables mouvants, qui filtre les images. Tout est question de filtrage.

Passons maintenant à l'agrandissement de l'image dans le popup. Tout est beaucoup plus simple ici.

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

Suit un clic sur un lien qui a attribut rel commence par prettyPhoto. Puis la bibliothèque entre en jeu jolie photoet l'image est miraculeusement agrandie. Au fait, nous passons également quelques paramètres. Tels que la vitesse d'animation - rapide, le délai du diaporama - 5 secondes, le thème Facebook (il y a 5 thèmes au total dans le dossier images / prettyPhoto), ainsi que l'interdiction d'afficher le nom de l'image et de zoomer en survolant la souris.

Pendant longtemps, j'ai choisi un sujet pour le sujet d'aujourd'hui. En conséquence, j'ai remarqué que nous n'avons pas encore effectué de sélections avec galeries d'images... À mon avis, un grand sujet, car galeries sont présents sur de nombreux sites. Pour être honnête, ils ne sont pas tous très attractifs. Compte tenu des tendances de développement actuelles jquery, html5 et ainsi de suite, je pensais que les solutions devraient déjà être bien plus attractives que celles que j'ai rencontrées auparavant. Alors. Après avoir passé une journée, j'ai 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 articles précédents.
Galerie d'images applicable non seulement au cas où avec albums photo... Le script peut être utilisé, je pense qu'il sera encore plus correct, car portfolio pour photographes, designers etc. Effets Jquery aidera à attirer l'attention des visiteurs et ajoutera simplement de l'élégance à votre site Web.
Alors. À votre collection d'attention plugins de galerie d'images jquery pour site Web.
N'oubliez pas de commenter et de retenir, afin de ne pas perdre cette collection, vous pouvez l'ajouter à vos favoris en cliquant sur l'étoile en bas de l'article.

PHOTOBOX

Galerie d'images gratuite, légère et réactive, dans lequel tous les effets, transitions sont effectués à l'aide de css3. Idéal pour créer un site Web de photographie.

Galerie S

Attrayant Plugin de galerie d'images Jquery... L'animation fonctionne avec css3.

DIAMANTS.JS

Original plugin pour créer une galerie d'images... Les miniatures ont la forme diamant, dans quoi ce moment très populaire. Ce formulaire est créé à l'aide de css3. Le seul inconvénient de cette galerie est l'absence de lightbox permettant d'ouvrir une photo en taille réelle. Autrement dit, vous devez visser le plugin lightbox avec des crabes. Ce script génère une grille d'images réactive en forme de losange.

Superbox

Galerie d'images moderne utilisant Jquery, css3 et html5... Nous sommes tous habitués au fait que lorsque vous cliquez sur l'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 était obsolète. Les images de cette galerie s'ouvrent sous l'aperçu. Consultez la démo et assurez-vous que cette solution est beaucoup plus moderne.
|

Galerie de fondu diagonal lisse

Une galerie d'images moderne dans laquelle les aperçus sont répartis sur tout l'espace de l'écran... Le script peut numériser un dossier avec une photo sur le serveur, c'est-à-dire que vous n'avez pas besoin d'insérer chaque image séparément. Il suffit de télécharger des images dans un dossier sur le serveur et de spécifier le chemin d'accès au répertoire dans les paramètres. Ensuite, le script fera tout par lui-même.

Galerie Gamma

Une galerie d'images élégante, légère et réactive avec une grille de style Pinterest qui est maintenant très populaire. Le script fonctionne bien à la fois sur les ordinateurs fixes et sur appareils mobiles avec n'importe quelle résolution d'écran. Une excellente solution pour créer un portefeuille de concepteurs Web.

GRILLE THUMBNAIL AVEC APERÇU EXTENSIBLE

Le plugin est grille d'image réactive... Lorsque vous cliquez ci-dessous, une photo plus grande et une description s'affichent. Bon pour créer un portfolio.

jGallery

jGallery est plein écran, galerie d'images réactive... 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.

Flux de mosaïque

Simple, réactif galerie d'images avec une grille dans le style de Pinterest.

Galereya

Une 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.

less.js

Excellent galerie d'images gratuite en utilisant JQUERY, 5 et CSS3. Il a une apparence très attrayante et attirera sûrement l'attention de vos visiteurs.

flipLightBox

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

galerie blueimp

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

J'ai passé en revue plusieurs galeries d'images à plusieurs reprises, rassemblé une vaste collection de diaporamas et de plugins spectaculaires. Il y a aussi Lighbox dans la tirelire exclusivement sur CSS3, sans connecter des bibliothèques js supplémentaires. Mais le temps ne s'arrête pas, les utilisateurs utilisent de plus en plus divers appareils mobiles pour surfer sur Internet, ce qui signifie que l'adaptabilité des éléments Web et, en particulier, des galeries de photos avec l'effet "" devient l'une des priorités auxquelles les concepteurs et développeurs Web devraient prêter attention.

Voici une autre collection de 15 plugins jQuery responsive qui sont compatibles à la fois avec les navigateurs de bureau et s'intègrent parfaitement dans les écrans de divers appareils mobiles (ordinateurs portables, smartphones, tablettes, etc.).

Regardez la démo sur les sites des développeurs, téléchargez le plugin que vous aimez et créez, créez, créez ...

1. iLightbox

iLighbox Est un plugin lightbox jQuery léger avec un large éventail de support différents types fichiers: images, vidéos, Flash / SWF, contenu Ajax, cadres et cartes intégrées. Ce plugin ajoute également des boutons réseaux sociauxpermettant aux utilisateurs de partager du contenu via Facebook, Twitter ou Reddit. Excellente opportunité d'organiser des diaporamas spectaculaires, des galeries d'images et de vidéos, avec visualisation en mode normal et plein écran.

iLighbox fonctionne assez rapidement et lorsqu'il est visualisé sur des appareils mobiles, affiche plus que correctement le contenu traité. Entre autres, en utilisant ce plugin, vous pouvez facilement implémenter l'affichage de blocs d'informations sous forme de fenêtre modale.

Dépendance: jQuery
Prise en charge du navigateur: IE7 +, Chrome, Firefox, Safari et Opera
Licence: Et le diable sait seulement)))

2. SwipeBox

Swipebox Est un plugin jQuery avec support écrans tactiles plates-formes mobiles. Outre les images, le plugin prend en charge les vidéos intégrées de Youtube et Vimeo. Swipebox est très facile à attacher à n'importe quel projet, le plugin dispose de plusieurs options intuitives pour personnaliser ses fonctionnalités et son comportement. Sur le site Web du développeur, il existe une documentation détaillée sur la connexion et l'utilisation du plugin, sans eau inutile, tout est juste le cas, donc je pense qu'il ne sera pas difficile de comprendre quoi, où et pourquoi.

Dépendance: jQuery
Prise en charge du navigateur: IE9 +, Chrome, Safari, Firefox, Opera, IOS4 +, Android et Windows Phone
Licence: Non déterminé, peut-être que vous aurez de la chance)))

3. MagnificPopup

Un plugin lightbox bien connu et éprouvé basé sur jQuery ou Zepto.js. L'auteur du plugin est Dmitry Semenov, qui est le développeur du plugin PhotoSwipe, dont je parlerai ci-dessous. Fourni en tant que plugin jQuery / Zepto, il possède des fonctionnalités plus avancées qui manquent à PhotoSwipe, telles que la prise en charge vidéo, l'affichage de cartes et de contenu Ajax, et l'implémentation de modaux avec des formulaires en ligne. Selon tous les critères, c'est un autre excellent outil dans la cage du développeur Web. Séparément, il existe un plugin pour WordPress et une documentation détaillée sur la configuration et l'utilisation. Déprimant seulement le manque de documentation en russe, à en juger par le nom et le prénom, l'auteur semble être russe, jamais compris à cause de la nocivité de cela, ou à cause de la conscience imaginaire de son intelligence, mais bla. Eh bien, d'accord, qui a besoin de le comprendre, nous aussi, nous ne sommes pas du thé à la coque))).

Dépendance: jQuery 1.9.1+ ou Zepto.js
Prise en charge du navigateur: IE7 (partiellement), IE8 +, Chrome, Firefox, Safari et Opera
Licence: Licence MIT

4. PhotoSwipe

Dépendance: Javascript ou jQuery
Prise en charge du navigateur
Licence: Licence MIT

11. FeatherLight

Plugin lightbox 6 kb pour les développeurs plus ou moins avertis, équipés de tous les fonctions essentielles... En plus de prendre en charge tous les types de contenu courants (texte, images, iframe, Ajax), il est possible d'en connecter un supplémentaire, et vous pouvez également développer votre propre extension pour ce plugin, qui répondra pleinement à vos besoins lors de la création d'un nouveau projet. Comment fonctionne toute cette économie (développement de l'extension), je ne me suis pas vraiment plongé dedans, mais ceux que ce plugin va insérer, je pense qu'ils vont le découvrir))).

Dépendance: jQuery
Prise en charge du navigateur: IE8 +, Chrome, Firefox, Safari et Opera
Licence: Licence MIT

12. LightGallery

Galerie lumineuse - plugin lightbox multifonctionnel avec de nombreux opportunités supplémentaires... Livré avec plus de 20 options pour personnaliser les plus petits détails de la Lightbox. Il y a tout, enfin, ou presque tout)). Une galerie d'images complète avec des miniatures bien agencées, des commandes de navigation et un défilement des vignettes Balisage HTML simple sous forme de liste non ordonnée

Apparence

Galerie lumineuse

Dépendance: jQuery
Prise en charge du navigateur: IE7 +, Chrome, Firefox, Safari, Opera, iOS, Android et Windows Phone
Licence: Licence MIT

13. StripJS

Insolite, je dirais même: une implémentation inhabituelle d'une lightbox, ou plutôt, une présentation de contenu pas tout à fait familière, lorsqu'une image ou une vidéo, dans la conception d'une lightbox, apparaît à droite, ne remplissant pas tout l'écran, mais uniquement pour une taille donnée d'une image ou d'une vidéo en taille réelle. Sur grands écrans cette approche est compréhensible, il reste la possibilité d'interagir avec la page. Sur les petits écrans des appareils mobiles, ce design innovant se fond parfaitement dans la lightbox classique. L'idée est intéressante, regardez la démo, peut-être que quelqu'un comme ça l'insérera.

Dépendance: jQuery
Prise en charge du navigateur: IE7 +, Chrome, Firefox, Safari, Opera, iOS 5+ et Android 3+
Licence: Licence Creative Commons BY-NC-ND 3.0

14. LightLayer

Un plugin lightbox facile à utiliser qui va bien avec n'importe quel projet et qui a l'air bien sur n'importe quel écran aussi. Le plugin LightLayer permet de contrôler de nombreux paramètres, tels que le changement de la couleur d'arrière-plan et le degré de sa transparence, la position du bloc de base, le choix des effets de transition lors de l'ouverture / fermeture, des fonctions que les utilisateurs peuvent manipuler seuls. Le plugin fonctionne très bien avec le contenu du site Web externe, les lecteurs vidéo intégrés et les cartes.

Dépendance: jQuery
Prise en charge du navigateur: IE9 +, Chrome, Firefox, Safari et Opera
Licence: Licence MIT

15. FluidBox

Fluidbox est un plugin lightbox exclusivement pour les images. Le nombre de variations possibles dans la présentation des images est vraiment impressionnant. Le plugin fonctionne très bien avec des images dans divers modèles, y compris des images flottantes, des images avec un positionnement absolu, des images et des photos encadrées et en retrait, avec des images uniques et combinées dans une galerie. En général, c'est en vain de verser de l'eau, cela ne fonctionnera toujours pas pour décrire toutes les possibilités du plugin dans une courte présentation, donc vous feriez mieux de regarder la démo, twist, twist et je pense que beaucoup aimeront ce plugin.

Dépendance: jQuery
Prise en charge du navigateur: IE9 +, Chrome, Firefox, Safari, Opera
Licence: Licence MIT

C'est probablement tout! J'espère que ce bref aperçu vous aidera à comprendre le tas de produits de développement Web proposés. Je tiens à noter que loin de tous les plugins présentés dans la collection que j'ai utilisés sur des projets de travail, j'ai sondé la plupart d'entre eux sur des sites de test ou sur un vernis, donc si des questions se posent, nous les résoudrons très probablement ensemble, mais ensemble, comme toujours nous réussirons.

Recherchez-vous un modèle russe adapté à vos besoins? Dans ce cas, vous devriez probablement visiter le marché TemplateMonster. Pour la simple raison qu'une nouvelle section de modèles est apparue récemment sur le site. Désormais, chaque utilisateur peut se familiariser avec la collection, qui sera mise à jour et mise à jour. Les textes des modèles ont été écrits à la main. Mais ce n'est pas le seul avantage des données. solutions toutes faites... En effet, dans leurs packages, vous pouvez trouver tout ce qui facilitera le développement d'un projet en ligne, y compris un éditeur visuel.

Avec tout le respect, Andrew

1. galerie jQuery avec effet de changement de page

Une solution similaire peut être utilisée pour afficher les derniers articles de blog ou pour présenter des produits.

Une façon unique d'afficher vos photos sous forme de galerie fantaisie jQuery.

3. Galerie d'images du produit jQuery, plugin slideJS

le plugin jQuery est idéal pour implémenter une page produit avec plusieurs images. La transition entre les images peut être effectuée à l'aide de miniatures ou à l'aide des flèches de navigation.

L'image est agrandie lorsque vous déplacez le curseur de la souris dessus.

5. Élégante galerie Lightbox "ppGallery"

6. Mini-galerie jQuery "Touch-Gallery"

7. Nouvelle galerie de vignettes jQuery

Professionnel galerie jQuery 2011 année.

8. Plug-in jQuery "Nivo Zoom"

Un autre plugin jQuery de qualité des développeurs de curseurs Nivo. Augmentez l'image en cliquant sur la vignette.

9. Galerie murale jQuery 3d

Nouvelle galerie jQuery de 2011. La bande d'image est étirée sur toute la largeur de l'écran. Vous pouvez naviguer entre les photos de trois manières: en utilisant la molette de la souris, en faisant défiler depuis le haut de la galerie et en utilisant le bloc avec des vignettes en bas. La galerie est très impressionnante.

Les images de la galerie sont agrandies et réduites de manière aléatoire pour créer un effet de bulle.

11. Affichage inhabituel d'images dans la galerie jQuery

Utilisez le curseur en haut pour modifier la distance entre les images de la pile. Lorsque vous cliquez sur une image, elle pivote.

12. Plug-in jQuery "MB.Gallery"

13.jQuery galerie qui s'étend en plein écran

Plugin 2011. Une nouvelle galerie avec des descriptions d'images, s'étendant sur toute la zone de la fenêtre du navigateur, quelle que soit sa taille. Les miniatures des images sont implémentées de manière intéressante. La transition entre les photos s'effectue à l'aide des flèches à côté de la vignette et à l'aide de la molette de la souris.

14. Galerie Light jQuery

Le plugin analysera automatiquement le dossier et créera des copies miniatures des images.

16. Galerie élégante utilisant les bibliothèques jQuery et Raphael

Effet intéressant lorsque vous survolez une miniature.

17. Nouvelle version du plugin jQuery "Supersized" version 3.1

Plus récemment, j'ai mentionné cette solution jQuery pour créer des galeries plein écran. Aujourd'hui je veux te présenter dernière version ce plugin professionnel. Le script a été complètement réécrit, maintenant la galerie est encore plus rapide, tandis que certains paramètres intéressants ont été ajoutés, par exemple, la navigation à l'aide du clavier, la vitesse variable de changement d'images, la taille de l'écran et autres.

18.jQuery plugin "Galleria 1.2.2"

Nouvelle galerie jQuery pour vos projets.

La galerie apparaît sur la page en un clic. Des miniatures sont affichées autour de l'image agrandie. Vous pouvez contrôler le changement automatique des images. Technologies utilisées: jQuery, CSS, PHP.

20. Plugin "Timer Gallery"

galerie jQuery. Mise en œuvre du changement automatique des diapositives et du défilement des miniatures s'il y en a trop.

Plugin de galerie d'images dans jQuery.

22. galerie javascript pour affichage sur les appareils mobiles "PhotoSwipe"

Galerie d'images optimisée pour la visualisation sur les appareils mobiles (téléphones ou tablettes).

23. galerie javascript avec effet 3D

24. Galerie "Galerie de morphing jQuery"

Nouveau curseur jQuery... Plusieurs effets animés sympas lors du changement de diapositives.

25. Plug-in jQuery "Galleria 1.2.3"

26. Mur d'images jQuery

Une galerie originale sous forme de miniatures de différentes tailles éparpillées sur l'écran, stylisées comme des peintures. Lorsque vous cliquez sur une vignette, une zone avec une description de l'image apparaît et lorsque vous cliquez à nouveau, l'original apparaît grande image.

27. Galerie CSS3

Effet de survol intéressant.

28. Galerie de miniatures "Galerie TN3"

galerie jQyery avec vignettes. Implémentation de la possibilité de visualiser dans une fenêtre compacte et dans une fenêtre en plein écran, ainsi que la possibilité de désactiver / activer le changement automatique de diapositive.

29. Grille d'images "Grid-Gallery"

La grille d'image est étirée en fonction de la largeur de la fenêtre du navigateur. Effet de survol intéressant: la ligne et la colonne actives sont mises en évidence.

30. Galerie jQuery Swap

Galerie jQuery facile en quelques lignes de code.

La page de démonstration propose plusieurs options pour les méga menus déroulants, dans différents styles. Dans ce menu, vous pouvez personnaliser: l'effet de drop, le taux de drop, et également faire un choix entre le drop-out en cliquant ou en passant la souris sur un élément.

31. Galerie d'images jQuery

galerie jQuery avec légendes d'images. Plusieurs effets de transition de diapositives. La navigation entre les images s'effectue soit à l'aide de flèches, soit en cliquant sur une vignette.

L'image et ses miniatures sont réalisées sous forme de cercles.

33. Plug-in jQuery "Portfolio Image Navigation"

Une solution javascript originale pour le portfolio d'un photographe. La navigation entre les images s'effectue à l'aide des flèches Haut / Gauche / Droite et à l'aide de mini-carrés (imitation du mouvement dans l'espace 2D). Vous pouvez regrouper les photos de différentes sessions photo dans différentes lignes verticales et les parcourir à l'aide des commandes de navigation. Voir la démo.

34. Plugin "jmFullZoom"

Plugin pour visualiser des images s'étendant à la taille réelle de la fenêtre du navigateur. Peut être utilisé pour afficher le travail du portfolio.

35. Carte photo

Galerie intégrée avec Google Map... Vous pouvez passer en plein écran en cliquant sur l'icône dans le coin inférieur droit. Parfait pour les sites de voyage.

36. Galerie d'images avec vignettes

galerie jQuery avec vignettes.

37. Galerie jQuery "Galleriffic"

Diaporama avec vignettes.

38. Plug-in d'effet d'affichage jQuery CSS3 Wave

Présentation ondulée des images et du contenu sur une page. Lorsque vous cliquez sur une vignette, toutes les images sont agrandies et leur nom apparaît. Lorsque vous appuyez à nouveau dessus, un bloc avec une description de la photo s'ouvre.

Nombreuses options et paramètres d'affichage.

42. Plogger

43. Une belle galerie simple faite en CSS, pas de scripts

A l'air bien et fonctionne très bien dans tous les navigateurs modernes

Vous pouvez contrôler le diaporama automatique (démarrage / arrêt), changer de diapositive à l'aide des flèches du clavier, paginer automatiquement les titres des diapositives, s'il y en a beaucoup, prend en charge plusieurs galeries sur une page, les légendes de diapositives, la prise en charge de l'API et la possibilité de créer vos propres effets de transition de diapositives

46. \u200b\u200bGalerie sous forme de pile de photos

Voici à quoi devrait ressembler le résultat de la galerie que nous allons créer avec vous. Vous pouvez regarder la démo et, si vous le souhaitez, télécharger le résultat final de la galerie.

salut! Aujourd'hui, nous allons parler de la meilleure galerie photo gratuite, du curseur vidéo et photo, parler de "cadre photo". Malgré le fait que le script n'est pas supporté depuis 2 ans déjà et que l'auteur est passé à projet similaire cela fonctionne très bien et continue de plaire aux yeux.

Principaux avantages (+)

Simplicité installation, configuration et utilisation. Outre jQuery, vous aurez besoin connectez seulement 2 fichiers, et pour afficher la galerie, il vous suffit de spécifier des liens vers des images.
Affecte légèrement la vitesse chargement du site.
Adaptabilité... Votre galerie est parfaite sur votre téléphone, votre ordinateur portable et même sur votre écran de télévision.
Une multitude de réglages et de fonctions, connectés séparément, via les attributs des balises HTML.
Prise en charge des appareils tactiles.
Soutien vidéo.
Possibilité chargement paresseux des photos.
Et bien d'autres choses qui plairont à l'utilisateur averti.

Moins (-)

Manque de support utilisateur. La probabilité que votre problème soit résolu ou résolu est presque nulle. C'est mauvais, mais pas fatal.

La 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 avez besoin d'afficher la galerie sur la plupart des pages du site. L'avantage de cette option est l'utilisation d'un CDN.

Vérification de jQuery.Aller à la source site (raccourci clavier Ctrl + U) → essayer de trouver quelque chose comme cette ligne: https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js
Utilisez Ctrl + F pour une recherche plus facile. Si la ligne convoitée n'est pas là, vous devez inclure jQuery. Sur WordPress, cela peut être fait en collant le code ci-dessous dans le fichier functions.php du thème. En fait, ce script est utilisé pour les conflits différentes versions jQuery et il agit selon le schéma suivant: il supprime le jQuery précédemment enregistré, en enregistre un nouveau, affiche le script. Les versions actuelles de la bibliothèque jQuery peuvent être trouvées ici.
Vous pouvez simplement insérer une ligne comme celle-ci entre et :
<script src \u003d "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> script\u003e
Nous incluons fotorama.css et fotorama.js.Collez le code suivant entre les balises et , sur WordPress, cela se fait dans le fichier d'en-tête du thème (header.php). "http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel \u003d "feuille de style"\u003e
На этом подключение галереи первым способом окончено. Как использовать написано в разделе "Непосредственно создание галереи".

Второй вариант подключения [шорткод + Autoptimize]

В этом варианте подключения файлы скрипта будут выводиться только на нужных страницах через [шорткод ]. А если вы используете плагин Autoptimize, то код скрипта в придачу интегрироваться в файлы темы. Эти нехитрые манипуляции должны увеличить скорость загрузки сайта.

Проверяем наличие jQuery. Так же как и в первом варианте, смотрите выше.
Скачиваем файлы фоторамы → распаковываем → загружаем в отдельную папку в корне сайта.
Для создания шорткода в файл функций темы (functions.php) вставляем код, расположенный ниже, изменяем ссылки к файлам на свои..js"> ";) add_shortcode (" foto "," sd ");
Maintenant, lors de la rédaction d'un article, à la fin, entrez le shortcode

Créer directement une galerie

La galerie est rendue par du code HTML en utilisant récipient

c class \u003d "fotorama", le conteneur contient le code de sortie de l'image ou lien vers l'image ... Lors de la rédaction d'un article dans WordPress, passez l'éditeur en mode texte et entrez dans un conteneur

c class \u003d "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 est 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 également d'autres paramètres:

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

Miniatures

Data-nav \u003d "thumbs" est responsable des vignettes

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

Par défaut, la miniature est de 64 x 64. Vous pouvez ajuster ce paramètre à l'aide de data-thumbwidth (largeur) et data-thumbheight (hauteur). Si vous avez besoin que la vignette ait sa propre taille, définissez les paramètres de largeur et de hauteur du fichier de vignette:

Code HTML + Fotorama

Le cadre photo gère parfaitement HTML et CSS, ce qui élargit considérablement les fonctionnalités du script. Travaillez avec des liens, des blocs, des tableaux, des paragraphes, écrivez du CSS, etc. Voici quelques exemples du fonctionnement de la galerie. Si la partie visuelle n'est pas affichée, cliquez sur le bouton "Résultat".

Afficher / masquer des exemples

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

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

Mode plein écran

data-allowfullscreen \u003d "true" // dans la fenêtre du navigateur data-allowfullscreen \u003d "native" // moniteur complet

Il est possible d'ajouter une grande image séparée pour mode plein écran via plein de données:

Autre

data-autoplay \u003d "true" // autoplay data-autoplay \u003d "3000" // intervalle entre les diapositives en ms data-caption \u003d "One" // commentaires pour les images data-keyboard \u003d "true" // navigation par flèche data-shuffle \u003d "true" // les images ne sont pas en ordre data-navposition \u003d "top" // vignettes en haut boucle de données \u003d "true" // défilement cyclique Essayons de tout connecter et ajoutons une vidéo

data-caption \u003d "One" data-keyboard \u003d "true" data-shuffle \u003d "true" data-navposition \u003d "top" data-autoplay \u003d "true" data-loop \u003d "true">

"un commentaire 1">

"un commentaire 2"> Pour trouver du travail que vous aimez

Comme

LA CLOCHE