TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Widget Nivo Slider gratuit pour Weebly

22

Weebly propose un élément de diaporama simple pour insérer des curseurs sur votre site. Un diaporama riche en fonctionnalités avec de multiples effets de transition est l’une des parties manquantes de Weebly. Depuis longtemps, Weebly proposait un diaporama d’en-tête pour les utilisateurs Pro, qui a également été supprimé de tous les thèmes réactifs. Nous avons testé divers curseurs et avons découvert que le populaire curseur Nivo avec des modifications serait le meilleur pour les utilisateurs de Weebly. Le curseur Nivo est l’un des curseurs bien connus sur le Web utilisé par défaut sur divers thèmes. Vous pouvez facilement ajouter de beaux effets de transition avec jQuery et personnaliser les curseurs en fonction de vos besoins. Dans cet article, nous verrons comment ajouter un widget de curseur Nivo gratuit sur votre site Weebly. Le curseur peut être inséré n’importe où sur votre site Weebly avec la restriction d’un curseur par page.

Fonctionnalités du widget Nivo Slider

Vous trouverez ci-dessous quelques-uns des points forts du widget de curseur gratuit Nivo pour Weebly :

  • Il peut être ajouté en tant que diaporama d’en-tête ou à l’intérieur de la zone de contenu. Dans cet article, nous discuterons de l’insertion d’une zone de contenu d’initié. Si vous recherchez un diaporama d’en-tête, consultez notre article séparé sur la façon d’insérer un diaporama d’en-tête dans un site Weebly gratuit.
  • Le curseur Nivo est proposé avec 4 styles de thèmes différents: clair, bar, sombre et par défaut.
  • Vous pouvez ajouter 12 effets de transition différents – découper vers le bas à droite, glisser vers le bas à gauche, découper vers le haut à droite, découper vers le haut à gauche, découper vers le bas, découper vers le haut à gauche, plier, fondu, boîte aléatoire, boîte de pluie, boîte de pluie inversée et boîte de pluie grandir inverser.
  • Un effet de transition différent peut être ajouté à chaque diapositive.
  • Facile à ajouter une légende de texte et une légende avec lien. Vous pouvez également lier des images de curseur à la page requise sur votre site.
  • Utilisez des commandes simples comme les boutons de navigation pour les diapositives précédentes et suivantes.

Comment ajouter le widget Nivo Slider dans le site Weebly ?

Le curseur de démonstration a quatre images et utilise un effet de transition défini pour chaque image séparément dans le code HTML. La deuxième image (up.jpg) est utilisée comme lien pour se connecter à une page Web avec un texte de légende en bas. La quatrième image (nemo.jpg) a une légende avec un lien HTML.

Étape 1 – Préparer les images

La première étape de tout diaporama est de préparer les images. Dans les démos, nous avons utilisé 4 images avec chacune une taille de 618 x 246 px. Nous vous recommandons d’utiliser un rapport similaire avec des images de taille supérieure pour une meilleure qualité.

Étape 2 – Télécharger les fichiers Slider

Cliquez sur le bouton ci-dessous pour télécharger tous les fichiers requis pour le curseur Nivo, cela comprend quatre images utilisées à des fins de démonstration.

Téléchargez tous les fichiers de curseurs nivo.

Le fichier d’archive zip contient 12 fichiers comme ci-dessous :

Images de navigation

  • arrows_bar_default.png
  • arrows_dark_light.png
  • bullets_bar_default.png
  • bullets_dark_light.png
  • chargement.gif

Scénario :

  • jquery.nivo.slider.nod.js
  • jquery-1.7.1.min.js

Feuille de style :

  • styles-thème.css

Images de démonstration :

  • histoire de jouets.jpg
  • haut.jpg
  • walle.jpg
  • nemo.jpg

Vous pouvez supprimer les images de démonstration et utiliser les vôtres sur votre site Weebly.

Étape 3 – Télécharger des fichiers de curseur

Connectez-vous à votre compte Weebly et modifiez le site sur lequel vous souhaitez ajouter le curseur Nivo. Accédez à «Thème > Modifier HTML / CSS» et accédez à la section «Actifs ». Cliquez sur le bouton + puis créez un nouveau dossier.

Widget Nivo Slider gratuit pour Weebly

Création d’un nouveau dossier dans l’éditeur de code Weebly

Dans cet exemple, nous créons un dossier nommé «nivo» et téléchargeons les 12 fichiers téléchargés à l’étape 2.

Widget Nivo Slider gratuit pour Weebly

Télécharger des fichiers dans Weebly

Étape 4 – Insertion du code dans la page

Allez maintenant sur la page dans laquelle vous souhaitez ajouter le curseur Nivo et insérez le code suivant à l’aide de l’élément « Embed Code ».

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" /> <div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" data-transition="sliceDownRight"/> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" data-transition="fold"/></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" data-transition="boxRainGrow" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" data-transition="boxRainGrowReverse" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div> <script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

Publiez votre site pour voir le magnifique slider Nivo.

Bien que le code ci-dessus puisse être inséré à l’aide de l’élément « Code d’intégration », il est recommandé d’ajouter le lien CSS dans la section « Pages > Votre page > Paramètres de référencement > Code d’en-tête ».

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />

Et le JavaScript sous la section « Pages > Votre page > Paramètres de référencement > Code de pied de page".

<script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

N’oubliez pas de remplacer les URL des images par les vôtres.

Personnalisation du curseur de niveau

Effet de transition pour les images

L’effet de transition est contrôlé en utilisant le paramètre «data-transition» pour chaque image. Des effets aléatoires seront utilisés lorsque vous supprimerez le paramètre « transition de données » du code HTML. Par exemple, le code HTML ci-dessous entraînera un effet de transition aléatoire avec un thème sombre.

<div class="slider-wrapper theme-dark"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>

Vous pouvez utiliser l’une des 12 valeurs de paramètres de transition de données suivantes pour chaque image sur les curseurs afin d’obtenir des effets différents :

  • trancheBasDroite
  • trancheBasGauche
  • trancheHautDroite
  • trancheHautGauche
  • trancheUpDown
  • trancheHautBasGauche
  • plier
  • disparaître
  • boîteAléatoire
  • boîtePluie
  • boîtePluieReverse
  • boîteRainGrow
  • boîteRainGrowReverse

Utiliser un thème différent

Le thème du slider est défini à l’aide de la classe CSS "theme-NAME". Dans l’exemple ci-dessus, le thème de la barre a été utilisé comme "barre à thème". Vous pouvez utiliser l’un des 4 thèmes en remplaçant le nom du thème comme ci-dessous :

<div class="slider-wrapper theme-bar"> – This is for bar theme <div class="slider-wrapper theme-default"> -This is for default theme <div class="slider-wrapper theme-light"> -This is for light theme <div class="slider-wrapper theme-dark"> -This is for dark theme

Personnalisation des styles

Tous les styles utilisés pour le curseur sont définis dans le fichier "theme-styles.css". Il a des ensembles de styles pour quatre thèmes et le wrapper du curseur. Vous pouvez ajuster la largeur, la taille de la police et la couleur des légendes de ce fichier.

Personnalisation du script

Fondamentalement, deux scripts sont utilisés dans ce curseur – l’un est la bibliothèque Google jQuery et l’autre est le script de curseur personnalisé Nivo distribué sous licence MIT. Toutes les variables de base pour le contrôle du curseur sont définies dans le fichier « jquery.nivo.slider.nod.js » comme ci-dessous dans la section « //Paramètres par défaut » :

  • effet: ‘random’ – Par défaut, des effets de transition aléatoires seront appliqués
  • tranches: 15 – L’image est coupée en 15 morceaux
  • boxCols: 8 – L’image est divisée en 8 colonnes
  • boxRows: 4 – L’image est divisée en 4 lignes
  • animSpeed ​​: 500 – La vitesse d’animation est par défaut de 500 ms, réduisez pour déplacer la transition plus rapidement
  • pauseTime: 3000 – Temps de pause entre les diapositives en 3000 ms
  • startSlide : 0 – La diapositive de départ est la première (0) diapositive
  • directionNav : true – Afficher les boutons de navigation de direction (faux pour masquer)
  • controlNav: true – Afficher les puces de navigation de contrôle (false pour masquer)
  • controlNavThumbs : false – Masquer les vignettes de navigation au lieu des puces (vrai à afficher)
  • pauseOnHover: true – Suspend le diaporama lorsque la souris est survolée sur l’image
  • manualAdvance: false – Par défaut, la rotation automatique est activée, vous pouvez activer le déplacement manuel des images
  • prevText: ‘Prev’ – Texte de l’image précédente
  • nextText: ‘Next’ – Texte de l’image suivante
  • randomStart : false – Le démarrage aléatoire est désactivé

Remarque : veuillez ne pas supprimer les commentaires de copyright du fichier « jquery.nivo.slider.nod.js ». Nous comprenons que le développeur d’origine "Dev7Studios" n’existe plus et que le site redirige vers un plugin WordPress. Mais gardez l’avis intact pour référence. Comme la fonction $ n’est plus prise en charge dans Weebly, nous avons remplacé tous les $ du script par jQuery.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails