Nivo Slider

Résolu
XARBA Messages postés 155 Date d'inscription   Statut Membre Dernière intervention   -  
XARBA Messages postés 155 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,

Je voudrais avoir un effet d'enchainement d'images et je me suis inspiré de ce site:

http://www.jqueryscript.net/slider/nivo-slider.htm

Le code que j'obtiens colle 4 images cote à cote...: 

<html <!DOCTYPE html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>

<title></title>


<link rel="canonical" href="http://www.melaniequentin.fr/melanie-quentin/" />

<link rel="stylesheet" href="www.melaniequentin.fr/themes/default/default.css" type="text/css" media="screen" />

<link rel="stylesheet" href="www.melaniequentin.fr/nivo-slider.css" type="text/css" media="screen" />

<div id="slider" class="nivoSlider"> 

<img src="BELLE ENDORMIE.jpg" data-thumb="ENIGME.jpg" alt="" /> 

<img src="ENIGME.jpg" data-thumb="DANSEORIENTALE.jpg" alt="" />

<img src="DANSEORIENTALE.jpg" data-thumb="ECHAPPEE BELLE.jpg" alt="" data-transition="slideInLeft" /> 

<img src="ECHAPPEE BELLE.jpg" data-thumb="SERENITE.jpg" alt="" title="#htmlcaption" /> 

</div>

<script type="text/javascript">

$(window).load(function() {

$('#slider').nivoSlider({

effect: 'random',

slices: 15,

boxCols: 8,

boxRows: 4,

animSpeed: 500,

pauseTime: 3000,

startSlide: 0,

directionNav: true,

controlNav: true,

controlNavThumbs: false,

pauseOnHover: true,

manualAdvance: false,

prevText: 'Prev',

nextText: 'Next',

randomStart: false,

beforeChange: function(){},

afterChange: function(){},

slideshowEnd: function(){},

lastSlide: function(){},

afterLoad: function(){}

});

});


</script>

</HEAD>


<BODY>

<script type="text/javascript" src="jquery.nivo.slider.js"></script>
<script type="text/javascript">

$(window).load(function() {

$('#slider').nivoSlider();

});

</body>
</html>


Qu'en pensez vous?

Bien cordialement

EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici : ICI

Merci d'y penser dans tes prochains messages.

10 réponses

Réponse 1 / 10
XARBA Messages postés 155 Date d'inscription   Statut Membre Dernière intervention   9
 
merci mais le résultat est le même...

comme je ne suis pas très au point, juste quelques précisions
l'emplacement de téléchargement du js de Query est-il important?
et Ajax n'est pas un logiciel à télécharger mais bien un ensemble de logiciels

cordialement
1
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
L'important pour jQuery est d'utiliser la bonne version.
NivoSlider n'étant pas mis à jour depuis longtemps, il semble que tu dois utiliser la version 1.X de jQuery, la dernière version étant la 1.12.4 qui semble fonctionner correctement avec NivoSlider.

Ajax est une combinaison de technologie utilisée principalement pour effectuer des requêtes http sans recharger la page du navigateur. Ceci n'a actuellement rien à voir avec ton slider ;)

Voici un exemple simple qui fonctionne de mon coté : 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Titre</title>
        <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="slider" class="nivoSlider">
            <img src="http://placekitten.com/g/500/300" data-thumb="http://placekitten.com/g/200/150" alt="" />
            <img src="http://placekitten.com/g/500/250" data-thumb="http://placekitten.com/g/200/150" alt="" />
            <img src="http://placekitten.com/g/550/300" data-thumb="http://placekitten.com/g/200/150" alt="" data-transition="slideInLeft" /> 
            <img src="http://placekitten.com/g/400/400" data-thumb="http://placekitten.com/g/200/150" alt="" title="#htmlcaption" />
        </div>

        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="jquery.nivo.slider.js"></script>
        <script>
            $(window).load(function () {
                $('#slider').nivoSlider();
            });
        </script>
    </body>
</html>

Pour faire fonctionner cette page, les fichiers nivo-slider.css et jquery.nivo.slider.js doivent se trouver dans le même dossier que la page html.
Ces deux fichiers peuvent être téléchargés ici :
- https://raw.githubusercontent.com/Codeinwp/Nivo-Slider-jQuery/master/nivo-slider.css
- https://raw.githubusercontent.com/Codeinwp/Nivo-Slider-jQuery/master/jquery.nivo.slider.js
0
Réponse 2 / 10
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Salut,

Ton code html n'est pas correct :
- le doctype doit être la première ligne de ton document suivi de l'ouverture de la balise <html>
- les balises <div>, <img> et tout ce qui doit être affiché sur la page doit se trouver à l'intérieur de la balise <body>
- les balises <link> et <title> doivent se trouver dans la balise <head>
- les balises <script> peuvent être situé dans la balise <head> ou juste avant la fermeture de la balise </body>

Exemple : 
<!DOCTYPE html>
<html>
  <head>
    <title>Titre</title>
    <link rel="canonical" href="http://www.melaniequentin.fr/melanie-quentin/" />
    <link rel="stylesheet" href="www.melaniequentin.fr/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="www.melaniequentin.fr/nivo-slider.css" type="text/css" media="screen" />
  </head>
  <body>
    <div id="slider" class="nivoSlider">
      <img src="BELLE ENDORMIE.jpg" data-thumb="ENIGME.jpg" alt="" />
      <img src="ENIGME.jpg" data-thumb="DANSEORIENTALE.jpg" alt="" />
      <img src="DANSEORIENTALE.jpg" data-thumb="ECHAPPEE BELLE.jpg" alt="" data-transition="slideInLeft" /> 
      <img src="ECHAPPEE BELLE.jpg" data-thumb="SERENITE.jpg" alt="" title="#htmlcaption" />
    </div>

    <script type="text/javascript" src="jquery.nivo.slider.js"></script>
    <script type="text/javascript">
      $(window).load(function() {
        $('#slider').nivoSlider();
      });
    </script>
  </body>
</html>


Le fichier jquery.nivo.slider.js nécessite le fichier js de jQuery que tu peux télécharger ici : https://jquery.com/download/

Enfin pour t'aider tu peux consulter la page html de démo de Nivo Slider disponible ici : https://github.com/Codeinwp/Nivo-Slider-jQuery/tree/master/demo

Bonne journée,
0
Réponse 3 / 10
XARBA Messages postés 155 Date d'inscription   Statut Membre Dernière intervention   9
 
Bonjour Pitet,

tout d'abord un grand merci pour ton aide
comme tu as du le remarquer je suis dans la catégorie débutant...
j'ai télécharger jquery-3.1.1.slim.js

et ajouter
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

ce qui donne 
<!DOCTYPE html>
<html>
  <head>
    <title>Titre</title>
    <link rel="canonical" href="http://www.melaniequentin.fr/melanie-quentin/" />
    <link rel="stylesheet" href="www.melaniequentin.fr/themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="www.melaniequentin.fr/nivo-slider.css" type="text/css" media="screen" />
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  </head>
  <body>
    <div id="slider" class="nivoSlider">
      <img src="BELLE ENDORMIE.jpg" data-thumb="ENIGME.jpg" alt="" />
      <img src="ENIGME.jpg" data-thumb="DANSEORIENTALE.jpg" alt="" />
      <img src="DANSEORIENTALE.jpg" data-thumb="ECHAPPEE BELLE.jpg" alt="" data-transition="slideInLeft" /> 
      <img src="ECHAPPEE BELLE.jpg" data-thumb="SERENITE.jpg" alt="" title="#htmlcaption" />
    </div>

    <script type="text/java-script" src="jquery.nivo.slider.js"></script>
    <script type="text/java-script">
      $(window).load(function() {
        $('#slider').nivoSlider();
      });
    </script>
  </body>
</html>


mais j'ai toujours mais 4 images cote à cote

où est l'erreur?
bien cordialement
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Le problème vient de l'attribut type des dernières balises script dans ton code, type="text/java-script" n'est pas un type reconnu, à corriger par type="text/javascript" (ou supprimer l'attribut type puisque "text/javascript" est la valeur par défaut si pas renseigné).

Active également la console de développement de ton navigateur pour voir les éventuelles erreurs javascript.
0
Réponse 4 / 10
XARBA Messages postés 155 Date d'inscription   Statut Membre Dernière intervention   9
 
Bonjour Pitet,

désolé mais je n'ai pas compris ta proposition:
type="text/java-script" n'est pas un type reconnu, à corriger par type="text/java-script"

D'autre part la console ne donne aucune erreur..

merci pour ton aide
cordialement
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
"text/java-script" != "text/javascript"

Pas de tiret dans javascript.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
XARBA Messages postés 155 Date d'inscription   Statut Membre Dernière intervention   9
 
Bonsoir, j'ai copié ton code comme suit: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Titre</title>
        <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    </head>
    <body>
        <div id="slider" class="nivoSlider">
            <img src="BELLE ENDORMIE.jpg" data-thumb="BELLE ENDORMIE.jpg" alt="" />
            <img src="DANSEORIENTALE.jpg" data-thumb="ENIGME.jpg" alt="" />
            <img src="SERENITE.jpg" data-thumb="ENIGME.jpg" alt="" data-transition="slideInLeft" /> 
            <img src="SERENITE.jpg" data-thumb="ENIGME.jpg" alt="" title="#htmlcaption" />
        </div>

        <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="jquery.nivo.slider.js"></script>
        <script>
            $(window).load(function () {
                $('#slider').nivoSlider();
            });
        </script>
    </body>
</html>


et je n'obtiens aucune image contrairement à mes essais précédents?
sur le site jQuery j'ai chargé la version jQuery 3.1.1.min.js
merci en tout cas
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
As tu des erreurs dans la console de développement de ton navigateur ?
Les fichiers css, js et jpg sont ils bien dans le même dossier que ta page ?
0
Réponse 6 / 10
XARBA Messages postés 155 Date d'inscription   Statut Membre Dernière intervention   9
 
Bonjour,
tous les fichiers sont dans le même dossier que la page et il n'y pas d' erreur sur la console
A ton avis la version JQuery 3.1.1.min js convient bien?
j' exécute sous IE

cordialement
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Non la version 3 de jQuery ne semble pas compatible avec NivoSlider, il semble que ce dernier n'est plus mis à jour depuis longtemps.

En reprenant le code de mon dernier exemple et en changeant uniquement la version de jQuery pour la 3.1.1, j'obtiens l'erreur "a.indexOf is not a function". Étrange que tu n'ai aucune erreur.

As tu réussi à faire fonctionner le slider en reprenant exactement mon exemple ?
0
Réponse 7 / 10
XARBA Messages postés 155 Date d'inscription   Statut Membre Dernière intervention   9
 
je viens de reprendre ton code et j'obtiens

Line: 20
Erreur : L’objet ne gère pas la propriété ou la méthode « nivoSlider

surement du à version de JQuery mais je n'arrive à avoir la 1.12.4
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
jQuery est inclus directement dans l'exemple via le site https://code.jquery.com/ tu n'as rien à télécharger.
Par contre il faut p-e télécharger le fichier css et js de NivoSlider précisé sous mon exemple si ce n'est pas fait.
0
Réponse 8 / 10
XARBA Messages postés 155 Date d'inscription   Statut Membre Dernière intervention   9
 
juste avant ton message, j'avais téléchargé 1.12.4 et exécuté ton code sans erreur mais avec une page blanche?
0
Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention   527
 
Encore une fois, jQuery n'as pas besoin d'être téléchargé dans l'exemple puisqu'il est inclus à distance, contrairement aux fichiers css et js dont je ne sais toujours pas si tu les as récupéré.

Du coup j'ai inclus directement les sources des fichiers css et js dans le document html et mis le fichier d'exemple à disposition ici : https://www.cjoint.com/c/FLxpeGsfSgV
Il n'y a rien d'autre à télécharger, le slider doit fonctionner dès l'ouverture de ce document html. Je ne peux pas faire plus simple.
0
XARBA Messages postés 155 Date d'inscription   Statut Membre Dernière intervention   9 > Pitet Messages postés 2826 Date d'inscription   Statut Membre Dernière intervention  
 
désolé mais je pensais t'avoir écrit que j'avais bien mis les fichiers dans le dossier comportant le fichier html.
j'ai fait un copier/coller du code que tu viens de me transmettre qui fonctionne bien contrairement au précédent que tu m'avais transmis et qui donne une page blanche

merci pour tout
0
Réponse 9 / 10
XARBA Messages postés 155 Date d'inscription   Statut Membre Dernière intervention   9
 
j'avais bien chargé jquery.nivo.slider.js mais quand j'ai voulu l'ouvrir il y avait une petite bavure (un signe en moins), maintenant je l'ai télécharger à nouveau et ça marche!

je te remercie très vivement pour ta compétence , ta gentillesse et.....ta
patience

Passes de très bonnes fêtes!
0
Réponse 10 / 10
XARBA Messages postés 155 Date d'inscription   Statut Membre Dernière intervention   9
 
bonjour
je voulais ajouter: je remercie comment ça marche de nous mettre en relation avec des gens aussi compétents et patients comme PITET

Cordialement
0

Discussions similaires

Slider Avant / Après
litcheetuyet -
CCMBot -

1 réponse
slider
pas10 -
Louis -

1 réponse
Probleme de slider
granulo -
granulo -

2 réponses
mon slider ne marche pas
Pacho001 -
Pacho001 -

4 réponses
Home Slider Salient
luckydu30 -
elgazar -

3 réponses