Galerie popup Jquery. Galerie d'images dans jQuery. jQuery galerie "Galleriffic"

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 au site, tout en économisant de l'espace précieux.

Les galeries et les curseurs rendent la page moins occupée, mais vous permettent tout de même d'ajouter toutes les images nécessaires pour transmettre le message. Ils seront particulièrement utiles pour les magasins en ligne.

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

Pour les installer, il suffit d'ajouter les plugins sélectionnés à la section head de la page HTML avec la bibliothèque jQuery et de les configurer selon la documentation (juste quelques lignes de code).

Choisissez lequel de ces éléments s'intégrera parfaitement à votre projet.

1. Curseur Bootstrap

Bootstrap Slider est un curseur d'image gratuit optimisé pour les mobiles avec défilement tactile et par balayage. Cela aura l'air incroyable 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

Le curseur d'aperçu du produit 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 pureté du code de ce plugin.

3. Galerie d'images extensible

Expandable Image Gallery est un plugin génial 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 le produit.

4. Fotorama

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

5. Curseur immersif

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

6. Leastjs

Leastjs est un plugin jQuery réactif pour vous aider à créer une galerie impressionnante. Lorsque vous survolez l'image, du texte apparaît, lorsque vous appuyez sur, la fenêtre se développe en plein écran.

7. Modèle de panneaux coulissants

Ce plugin est parfait pour un portfolio. Il créera des blocs d'images disposés horizontalement (verticalement sur non grands écrans) auquel le contenu sélectionné sera lié.

8. Modèle de portfolio Squeezebox

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

9. Lecture aléatoire des images

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

10. Plugin gratuit jQuery Lightbox

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

11. PgwSlider - Slider responsive 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

La galerie de polaroïds épars est un superbe curseur conçu en design plat... Ses éléments se déplacent de manière erratique lors du changement d'images, ce qui semble incroyable.

13. Filtre de contenu dynamique

Filtre de contenu rebondissant - solution parfaite pour et portfolio. Ce plugin permet aux utilisateurs de passer rapidement d'une catégorie à une autre.

14. Curseur jQuery simple

Simple jQuery Slider est à la hauteur de son nom. Ce plugin combine des éléments JavaScript, HTML5 et CSS3. Dans la démo, par défaut, seul le chargement de texte est disponible, mais si vous apportez quelques modifications, vous pouvez également ajouter du contenu visuel.

15. Glide JS

Glide JS - Simple, rapide et réactif curseur jQuery... Il est facile à installer et ne prend pas beaucoup de place.

16. Glisser-curseur plein écran avec parallaxe

Ce curseur jQuery génial avec la possibilité de charger des images et du texte fonctionnera pour n'importe quel site Web. Il ravira les utilisateurs avec des effet de parallaxe et l'apparence lente du texte.

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.

Je présente une autre sélection de 15 jQuery réactif plugins qui sont amis avec les deux 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

en utilisant CSS

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 les grands écrans, cette approche est compréhensible, la possibilité d'interagir avec la page demeure. 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

salut! Aujourd'hui, nous allons parler de la meilleure galerie photo gratuite, du curseur vidéo et photo, parlons 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 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 de 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, vous pouvez le faire en collant le code ci-dessous dans le fichier functions.php de votre 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 une galerie directement

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 le 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 hauteur / largeur 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).

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

Code HTML + Fotorama

Le cadre photo gère 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, 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 un grande image pour mode plein écran via plein de données:

Autre

données-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

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.

Comme

LA CLOCHE