L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Construire une galerie d'images avec jQuery et le widget Kendo UI
Nous visitons de temps en temps des sites Web qui nous permettent d'afficher des images de personnes ou de lieux ou même des images de nous-mêmes que nous avons téléchargées. Lorsque vous affichez les images de votre profil sur Facebook et que vous faites défiler l'écran vers la gauche ou la droite pour afficher les versions précédentes ou plus récentes des téléchargements de vos images de profil, vous utilisez une galerie d'images. La même chose peut être dite pour Instagram, Pinterest et autres sites Web basés sur des images. Dans ce didacticiel, nous allons montrer comment créer une galerie d'images avec le widget ScrollView de Kendo UI et jQuery.
Conditions préalables
jQuery : jQuery est une bibliothèque JavaScript légère facilitant l'utilisation de JavaScript. tâches dans votre site Web avec seulement quelques lignes de code.
Kendo UI : Kendo UI est une bibliothèque JavaScript développée par Telerik. Il vous permet de créer rapidement l’UI d’une application Web. La bibliothèque principale de Kendo UI fournit un large éventail de composants conviviaux tels que des grilles, des zones de texte, des zones de texte numériques, des graphiques, etc. Kendo UI fournit des composants pour les bibliothèques JavaScript les plus répandues telles que jQuery, Angular, React et VueJS. [19659005] Dans ce didacticiel, nous allons construire une galerie d’images d’une page en utilisant l’un des composants de Kendo UI appelé Widget ScrollView .
Notre galerie d’images sera construite avec jQuery / HTML et CSS. Par conséquent, pour suivre ce didacticiel, une compréhension de base de JavaScript / jQuery est requise. Des connaissances HTML et CSS sont également recommandées mais non obligatoires.
Initialisation de notre application
Pour commencer à créer notre application, nous devons créer un dossier dans lequel travailler. Créez un dossier appelé imagegallery . Ensuite, nous devons créer un fichier index.html et ajouter les dépendances des projets (Kendo UI et jQuery).
L'ajout de Kendo UI à notre projet peut être effectué de 3 façons:
- Installation via npm
- Téléchargement et regroupement des fichiers de base
- via un CDN
Toutefois, par souci de brièveté, nous allons importer dans ce tutoriel jQuery et Kendo UI via un CDN .
Dans votre [ index.html fichier allez-y et ajoutez les lignes de code suivantes:
// ./index.html
Galerie d'images
Dans notre fichier d'index, nous avons importé 3 éléments:
- La feuille de style par défaut de Kendo UI
- La dernière version de jQuery
- Une version réduite de tous les composants centraux de Kendo UI
L’avantage principal de l’approche CDN est que vos utilisateurs peuvent utiliser une version en cache de Kendo UI Core ou jQuery s’ils ont visité d’autres sites à l’aide du cadre.
L’avantage de l’utilisation d’autres méthodes d’installation est que vous pouvez importer uniquement les composants dont vous avez besoin pour votre application, ce qui peut optimiser la vitesse de la page. Cependant, pour cette démonstration, nous nous en tiendrons à notre approche CDN.
Ensuite, nous devons créer un div où Kendo UI placera toutes les images, puis initialiser Kendo UI.
Ajoutez les lignes de code suivantes à la corps de votre index.html :
// ./index.html
Ensuite nous devons initialiser ScrollView pour injecter automatiquement des images dans nos divs. Sous la dernière division, ajoutez les lignes de code suivantes:
Ceci initialisera ScrollView sur notre page. Cependant, nous n'avons fourni aucune image. Pour que ScrollView fonctionne, nous devons lui transmettre les images à afficher. Laissons lui un tas d’images. Nous allons définir les images comme arrière-plans pour les divs que nous avons créés. Pour ce faire, créons un fichier styles.css dans un dossier CSS à la racine de notre projet:
// css / styles.css
# scrollview-home .photo {
affichage: inline-block;
taille du fond: couverture;
répétition de fond: non répétée;
position de fond: centre centre;
}
.photo1 {
background-image: url ("https://images.unsplash.com/photo-1551430957-10dbe76ddb34?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=900&q=80";
}
.photo2 {
background-image: url ("https://images.unsplash.com/photo-1550785116-fe550d4904cf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=850&q=80");
}
.photo3 {
background-image: url ("https://images.unsplash.com/photo-1550780291-44fe6096919e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=841&q=80";
}
.photo4 {
background-image: url ("https://images.unsplash.com/photo-1550778061-523e38d33df0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=850&q=80");
}
.photo5 {
background-image: url ("https://images.unsplash.com/photo-1551200536-84057e779fac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=889&q=80";
}
Nous avons fourni ici les styles de base pour nos divs et ajouté des images d'arrière-plan pour chacun d'entre eux.
Toutes les images utilisées dans ce tutoriel proviennent de Unsplash .
Mettez à jour le . index.html pour ajouter un lien vers votre fichier css comme suit:
// ./index.html
Ensuite, chargez votre index.html fichier dans un navigateur, et vous devriez voir ceci:
Nous voyons que, avec l'aide de Kendo UI nous a permis de réduire la quantité de code que nous aurions initialement écrit pour reproduire cette fonctionnalité.
Avant de conclure, voyons comment nous pouvons obtenir des données dynamiques pour renseigner nos divs de manière dynamique. Cet exemple utilise le service de démonstration de Kendo UI pour récupérer les données.
Mettez à jour votre index.html aux lignes de code suivantes:
// .index.html
# = data [i] .ProductName #
#} #
Nous créons d'abord la division principale pour héberger tout le contenu. Ensuite, nous allons créer une balise de script dans notre code HTML. En effet, nous devons parcourir le tableau d'images et de noms d'images que nous recevrons.
Dans notre prochaine balise de script, nous créons tout d'abord une source de données pour lire les données à partir de l'URL Telerik.
Après cela, nous envoyons les données à la kendoScrollView via la propriété de la source de données et définissons enfin le modèle.
Enfin, nous créons une fonction pour définir l’arrière-plan d’une div.
. ] Nous devons ajouter un peu de style pour que notre page soit soignée. Mettez à jour votre styles.css comme suit:
// //css/styles.css
div.k-scrollview ul.k-scrollview-wrap> li {
text-align: center;
display: table;
taille de la boîte: boîte à bordure;
}
ul.k-scrollview-wrap> li> .img-wrapper {
rembourrage: 2em;
affichage: table-cellule;
alignement vertical: milieu;
}
ul.k-scrollview-wrap> li> .img-wrapper> div {
largeur: 30%;
largeur minimale: 150px;
taille de la boîte: boîte à bordure;
affichage: inline-block;
alignement vertical: en haut;
marge en bas: 1em;
}
ul.k-scrollview-wrap> li> .img-wrapper> div> div {
marge: auto;
marge inférieure: 0.5em;
}
Maintenant, chargez votre index.html et vous devriez voir ceci:
![</a>. </p>
</blockquote>
<h2 id=]( "s_EEC8863ABEFC7D78894F1A379186AF88B83ABE3FFD55268CA4495684EE49D223_1552295538479_1")
Conclusion
Dans ce tutoriel, nous avons appris à utiliser le composant ScrollWidget de Kendo UI pour créer facilement une galerie d'images avec très peu de lignes de code. Kendo UI est un outil vraiment puissant. Pour en savoir plus, assurez-vous de consulter la documentation officielle . Bonne codage!
Source link