accordeon / jqueryscript.net |
Répondre | Page 12> |
Auteur |
Sujet Recherche Options des sujets
|
sad
Groupie Depuis le: 13 Mar 2017 Pays: France Status: Inactif Points: 48 |
Options des messages
Thanks(0)
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
|
|
Bridet
Senior Member Depuis le: 13 Dec 2013 Pays: Condroz Status: Inactif Points: 5049 |
Options des messages
Thanks(0)
|
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 |
|
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
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 |
|
sad
Groupie Depuis le: 13 Mar 2017 Pays: France Status: Inactif Points: 48 |
Options des messages
Thanks(0)
|
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();
slide_width:70, // width / height of carousel frame_width:500, frame_height:300 }); |
|
sad
|
|
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
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 |
|
sad
Groupie Depuis le: 13 Mar 2017 Pays: France Status: Inactif Points: 48 |
Options des messages
Thanks(0)
|
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
|
|
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
mettez le lien de votre page hébergée que l'on regarde de plus prêt.
|
|
sad
Groupie Depuis le: 13 Mar 2017 Pays: France Status: Inactif Points: 48 |
Options des messages
Thanks(0)
|
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
|
|
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
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">
|
|
sad
Groupie Depuis le: 13 Mar 2017 Pays: France Status: Inactif Points: 48 |
Options des messages
Thanks(0)
|
le boulet...ça fonctionne déjà mieux comme ca...
merci et dessolé pour la perte de temps...
|
|
sad
|
|
Répondre | Page 12> |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |