Imprimer la Page | Close Window

accordeon / jqueryscript.net

Imprimé depuis: Forum openElement
Categorie:

openElement


Nom du Forum: Discussion générale openElement
Description du Forum: Discussion générale sur le logiciel
URL: http://forum.openelement.com/fr/forum_posts.asp?TID=22971
Date: 21 Août 2019 à 18:51
Version logiciel: Web Wiz Forums 10.18 - http://www.webwizforums.com


Sujet: accordeon / jqueryscript.net
Posté par: sad
Sujet: accordeon / jqueryscript.net
Posté le: 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



Réponses:
Posté par: Bridet
Posté le: 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" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=22320&title=rcapitulatif-des-tutoriels


-------------
http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus www.de-troyer.be - www.gites-durbuy.be


Posté par: brolysan
Posté le: 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?


-------------
https://sensode.com" rel="nofollow - sensode
http://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Ma biographie


Posté par: sad
Posté le: 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


Posté par: brolysan
Posté le: 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.

http://sensode.ovh/SENSBLUE/test.htm" rel="nofollow - Voila ce que vous devez avoir au final .


-------------
https://sensode.com" rel="nofollow - sensode
http://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Ma biographie


Posté par: sad
Posté le: 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


Posté par: brolysan
Posté le: 05 Sep 2017 à 14:54
mettez le lien de votre page hébergée que l'on regarde de plus prêt.

-------------
https://sensode.com" rel="nofollow - sensode
http://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Ma biographie


Posté par: sad
Posté le: 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


Posté par: brolysan
Posté le: 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">


-------------
https://sensode.com" rel="nofollow - sensode
http://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Ma biographie


Posté par: sad
Posté le: 05 Sep 2017 à 16:15
le boulet...ça fonctionne déjà mieux comme ca...

merci et dessolé pour la perte de temps...


-------------
sad


Posté par: brolysan
Posté le: 05 Sep 2017 à 16:20
Pas de souci.
On est là pour aider ceux qui cherchent "un peu" et font preuve de bonne volonté, et non tout faire nous même sans effort de votre part.
Vous avez essayé, si l'on peut vous aider. Courage pour la suite en tout cas, votre carousel n'est hélas pas responsive et va demander des efforts par la suite.


-------------
https://sensode.com" rel="nofollow - sensode
http://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Ma biographie


Posté par: sad
Posté le: 05 Sep 2017 à 16:28
merci a tous.
par contre j'ai une question bete pour rajouter une image en rajoutant bêtement ce code au bloc de code source :
 <div>
      <div>
          <h1>The war sphere</h1>
          <p>texte definition du produits</p>
          <a  href="#">Linh Nguyen</a>
      </div>
      <img src="Files\Image\en cours.jpg" alt="example1"/>
  </div>
</div>

Mais sans resultat...une petite idée ?
merci d'avance...


-------------
sad


Posté par: brolysan
Posté le: 05 Sep 2017 à 16:30
oui, une </div> en bas en trop. Faites juste attention, c'est visible en regardant le nombre de <div> ouverte au départ. Comptez les et vous verrez par vous même. 

-------------
https://sensode.com" rel="nofollow - sensode
http://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Ma biographie


Posté par: sad
Posté le: 05 Sep 2017 à 16:44
okok merci pour l'info :)

Bonne soirée et merci...


-------------
sad



Imprimer la Page | Close Window

Forum Software by Web Wiz Forums® version 10.18 - http://www.webwizforums.com
Copyright ©2001-2014 Web Wiz Ltd. - http://www.webwiz.co.uk