BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Discussion générale openElement
  Nouveaux messages Nouveaux messages Fil RSS  - accordeon / jqueryscript.net
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

accordeon / jqueryscript.net

 Répondre Répondre Page  12>
Auteur
Message
sad allez vers le bas
Groupie
Groupie


Depuis le: 13 Mar 2017
Pays: France
Status: Inactif
Points: 48
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer sad Citer  RépondreRéponse Lien Direct à ce Post Sujet: accordeon / jqueryscript.net
    Envoyé : 04 Sep 2017 à 18:08
Bonjour à tous,

je souhaite ajouter à mon site un "accordeon" voici les deux que j'ai selectionnés (ma preference va vers le 1er)

1:http://www.jqueryscript.net/slider/Accordion-Style-Collapsing-Carousel-Plugin-With-jQuery-Colcarou.html
2:http://www.jqueryscript.net/slider/Simple-Accordion-Style-jQuery-Slider-Plugin-ClassySlider.html

MAis (il faut bien un mais ;) ) je suis débutant ayant 2,3 notion mais la c'est au dessus de mes compétences donc si une âme charitable passe par la hésiter pas à me donner la marche à suivre ou un bon tuto qui ne survol pas trop le sujet svp...

Merci d'avance pour vos conseils...
sad
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Bridet Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Sep 2017 à 19:08
C'est expliqué sur ce site et il suffit d'un peu de lecture de la rubrique animation des tutos OE pour tout comprendre :
http://forum.openelement.com/fr/forum_posts.asp?TID=22320&title=rcapitulatif-des-tutoriels
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 04 Sep 2017 à 19:29
Bonjour,

Qu'est ce que vous ne comprenez pas réellement? Tout?
Si c'est le cas alors, ce menu n'est hélas pas fait pour vous sans aide extérieure, j'en ai bien peur.
Si déjà la mise en place de bloc de code source et visuelle nous semble "inconnu"...
Qu'avez vous réellement fait de votre côté sur votre page dans OE?


Edité par brolysan - 04 Sep 2017 à 19:34
Haut de la page
sad allez vers le bas
Groupie
Groupie


Depuis le: 13 Mar 2017
Pays: France
Status: Inactif
Points: 48
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer sad Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 05 Sep 2017 à 12:18
Bonjour,

j'ai lu les tutos merci mais il y un truc que je comprend pas comment fait t'on pour definir la config des blocs en fonction des codes (java,css...header,endbody...) c'est encore trop flou pour moi desolé...

dans mon exemple (http://www.jqueryscript.net/slider/Accordion-Style-Collapsing-Carousel-Plugin-With-jQuery-Colcarou.html) j'ai fait plusieurs manip en changeant ces critères mais j'ai l'impression que le plug ne se lance pas car les images sont les unes en dessous des autres avec le texte écrit au dessus.Pour le moment je cherche a faire comme dans la demo que je modifierais en fonction de mes besoins.Mais la je comprend pas comment bien configurer les blocs (j'ai fait de multiple test avt ms sans résultat) donc voici ce que j'ai fait...
Et merci d'avance pr l'aide apporter..

1: j'ai télécharger le zip et charger les toutes les ressources dans OE du dossier src

2: j'ai créer un bloc html,header avec le code :
<link href="colcarou.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="colcarou.js"></script>
3: j'ai créer un bloc html,header avec le code :
<div class="colcarou">
  <div>
      <div>
          <h1>Vadim Sherbakov</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
          <a  href="#">Vadim Sherbakov</a>
      </div>
      <img src="https://unsplash.it/1800/1200?image=193" alt="example1"/>
  </div>
  <div>
      <div>
          <h1>Andrea Boldizsar</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
          <a  href="#">Andrea Boldizsar</a>
      </div>
      <img src="https://unsplash.it/1800/1200?image=182" alt="example1"/>
  </div>
  <div>
      <div>
          <h1>Linh Nguyen</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
          <a  href="#">Linh Nguyen</a>
      </div>
      <img src="https://unsplash.it/1800/1200?image=174" alt="example1"/>
  </div>
</div>

4: j'ai créer un bloc java avec le code :
$('.colcarou').colcarou();
5: j'ai créer un bloc java avec le code :
$('.colcarou').colcarou({
  // width of title labels
  slide_width:70,

  // width / height of carousel
  frame_width:500,
  frame_height:300
  
});
sad
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 05 Sep 2017 à 12:55
1 : 
ok, donc avez vous copiez quelque part le dossier src dans votre projet ? J'imagine que oui..

2 : 
Pour commencer, OE utilise déjà jquery en natif.
Donc, enlevez cette ligne : <script src="//code.jquery.com/jquery.min.js"></script>
Ensuite, pour vous aidez dans votre compréhension, que disent les autres lignes ?
<link href="colcarou.css" rel="stylesheet"> et <script src="colcarou.js"></script>
ces deux liens renvoient vers les fichiers colcarou.css et colcarou.js...mais si vous ne les mettez pas ou si vous n'indiquez pas le bon emplacement, rien ne fonctionnera, vous vous en doutez non?
Donc, première chose, mettre la bonne adresse des fichiers demandés.
Si vous avez copié le dossier "src" à la racine de votre projet, il vaut mieux le mettre dans Files puis Other.
Vous obtiendrez ainsi l'adresse suivant :
href="Files/Other/src/colcarou.css et script src="Files/Other/src/colcarou.js

le reste est exact donc (bloc html dans le header).

3 :
À votre avis (et je me doute que vous n'avez pas du assimiler les tutoriels et le wiki sur les blocs de code (source) et (visuels), que contient le code ?
Il s'agit de l'assemblage html du carrousel à proprement parlé. Donc, cela n'a aucune chance de fonctionner si vous le mettez dans le header.
Effacez ce bloc de code (source) et mettez sur votre page un bloc de code (visuel) à l'endroit où vous souhaitez avoir votre carrousel.
Copiez à l"intérieur le code donné.
Edit : pour que cela fonctionne, mettez une largeur et une hauteur identique à vos paramètres sur le bloc de code (visuel).

4 et 5 :
Ce code est bien du javascript, c'est la bonne formulation, à un détail prêt. Au lieu de le mettre dans le header, il faut le mettre dans endbody.
Et au cas où vous n'auriez pas compris le tutoriel, l'un est le basique sans aucune indication de taille ou autre tandis que l'autre ajoute une largeur et une hauteur. Donc, l'un est un doublon de l'autre.

Refaites votre carrousel en suivant ces indications et dites nous si ça roule ou pas.



Edité par brolysan - 05 Sep 2017 à 13:07
Haut de la page
sad allez vers le bas
Groupie
Groupie


Depuis le: 13 Mar 2017
Pays: France
Status: Inactif
Points: 48
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer sad Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 05 Sep 2017 à 14:18
merci de ta réponse...(j'en apprend tout les jours grâce au forum)
j'ai fait les modifs mais forcement ,ca ne fonctionne pas (pratiquement le mémé effet que le 1er message) donc si j'ai bien compris voici ce que j'ai fait:

1&2 ok dans un bloc html,header que j'ai nommé "load" et j'ai mis le dossier des scrips ds le dossier "Other" du projet:
<link href="href="Files/Other/src/colcarou.css" rel="stylesheet">
<script src="Files/Other/src/colcarou.js"></script>

3: si j'ai bien compris=
j'ai rajouter un élément bloc de code (visuel) : avec le code à rallonge...
et j'ai changé les dimensions l=250px et h=150px 

nota:j'avoue avoir surement sauter quelque lignes du wiki....

4&5 = un seul bloc de code java,endbody que j'ai nommé "setting" :avec le code:
$('.colcarou').colcarou({
  // width of title labels
  slide_width:70,

  // width / height of carousel
  frame_width:250,
  frame_height:150
  
});



 
sad
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 05 Sep 2017 à 14:54
mettez le lien de votre page hébergée que l'on regarde de plus prêt.
Haut de la page
sad allez vers le bas
Groupie
Groupie


Depuis le: 13 Mar 2017
Pays: France
Status: Inactif
Points: 48
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer sad Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 05 Sep 2017 à 15:06
desolé ms j'en suis pas encore la...
j'ai fait un dropbox avec un fichier test:
https://www.dropbox.com/s/f0ortvlufug96k3/test.rar?dl=0

merci d'avance...
sad
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 05 Sep 2017 à 15:43
Regardez bien le code (source) de load :

<link href="href="Files/Other/src/colcarou.css" rel="stylesheet">

Rien ne vous gène là?
Comparez le avec celui là :
<link href="Files/Other/src/colcarou.css" rel="stylesheet">
Haut de la page
sad allez vers le bas
Groupie
Groupie


Depuis le: 13 Mar 2017
Pays: France
Status: Inactif
Points: 48
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer sad Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 05 Sep 2017 à 16:15
le boulet...ça fonctionne déjà mieux comme ca...

merci et dessolé pour la perte de temps...
sad
Haut de la page
 Répondre Répondre Page  12>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.