Probleme carousel
Bonjour
j essaie de mettre sa http://owlgraphic.com/owlcarousel/demos/images.html il a que 3 choses a mettre chose faites (voir source de ma page test) j arrive encore a avoir sa ... http://testgaming.over-blog.com/
j essaie de mettre sa http://owlgraphic.com/owlcarousel/demos/images.html il a que 3 choses a mettre chose faites (voir source de ma page test) j arrive encore a avoir sa ... http://testgaming.over-blog.com/
3 réponses
Résumé de la discussion
L’intégration d’Owl Carousel sur une page OverBlog présente un problème d’affichage des éléments et de non-interprétation du script malgré l’exemple fourni. Plusieurs réponses indiquent qu’il faut placer le JavaScript dans la section head (et non entre les balises style), et s’assurer que le HTML contient bien les balises et les divs requis pour Owl Carousel (#owl-demo, .item). Des conseils précisent aussi de séparer le CSS et d’insérer le code concerné dans le fichier CSS ou dans une balise style bien placée, afin que le script s’exécute après le chargement du DOM. En cas de limites techniques d’OverBlog, certains évoquent l’utilité de modifier le thème ou de recourir à une plateforme alternative comme Blogger ou WordPress pour gagner en flexibilité.
-
ContributeurBonjour,
Je ne sais pas si Over-Blog permet l'insertion de code HTML ou de code JavaScript, et la modification du fichier "ob-style.css", comme il est possible de le faire chez Blogger de Google, par exemple.
De toutes manières, OverBlog est loin d'être la meilleure plate-forme de blog, ou la moins pire.
Je ne les connais pas toutes et encore moins testées, mais je pense que Blogger ou WordPress.com offrent plus de possibilités. J'aime bien aussi blog.free.fr parce qu'elle utilise DotClear comme moteur de blog.
De plus, Blogger et blog.free.fr n'imposent aucune publicité et sont entièrement gratuites, sans limitation.
Après quelques recherches, il semble être possible de modifier le thème d'un blog OverBlog par "Gérer - Thème - Éditer". Mais je ne retire pas le reste de mon commentaire ;-)
Courage, le bout du tunnel n'est pas loin, il suffit de se retourner.-
je siuis d'accord avec vous mais je suis chez overblog depuis 5ans et avec 600.000 visites partir autre part serai un peu comme repartir a zero lol mais oui je sais ou comment modifier le html etc ^^ mais cest surtout que jai mis les 3 code donné par le site mais sa ne fonctionne pas http://owlgraphic.com/owlcarousel/demos/images.html mais qui donne http://testgaming.over-blog.com/
-
Contributeur@Utilisateur anonymeIl faut insérer le code HTML dans la partie <body> de ta page :
<div id="owl-demo"> <div class="item"><img src="" alt="Owl Image"></div> <div class="item"><img src="" alt="Owl Image"></div> <div class="item"><img src="" alt="Owl Image"></div> <div class="item"><img src="" alt="Owl Image"></div> <div class="item"><img src="" alt="Owl Image"></div> <div class="item"><img src="" alt="Owl Image"></div> <div class="item"><img src="" alt="Owl Image"></div> <div class="item"><img src="" alt="Owl Image"></div> </div>
Tu as bien inséré dans la partie <style> de ta page :#owl-demo .item{ margin: 3px; } #owl-demo .item img{ display: block; width: 100%; height: auto; }
En revanche, le JavaScript ne doit pas être dans la partie <style>, mais dans la partie <body> (éventuellement, dans la partie <head>) :<script> $(document).ready(function() { $("#owl-demo").owlCarousel({ autoPlay: 3000, items : 4, itemsDesktop : [1199,3], itemsDesktopSmall : [979,3] }); }); </script> -
-
Contributeur@Utilisateur anonymeTu peux mettre le JavaScript dans la partie <head>, mais pas entre les balises <style></style>comme tu l'as fait. Ton script n'est pas interprété. Entre les balises <style></style>, il ne doit y avoir que du CSS.
Il faut simplement déplacer ce code :<script> $(document).ready(function() { $("#owl-demo").owlCarousel({ autoPlay: 3000, items : 4, itemsDesktop : [1199,3], itemsDesktopSmall : [979,3] }); }); </script>
Je ne vois pas ton code HTML :<div id="owl-demo"> <div class="item"><img src="" alt="Owl Image"></div> <div class="item"><img src="" alt="Owl Image"></div> <div class="item"><img src="" alt="Owl Image"></div> <div class="item"><img src="" alt="Owl Image"></div> <div class="item"><img src="" alt="Owl Image"></div> <div class="item"><img src="" alt="Owl Image"></div> <div class="item"><img src="" alt="Owl Image"></div> <div class="item"><img src="" alt="Owl Image"></div> </div>
Il doit se trouver entre les balises <body> </body> de ta page.
Ce code CSS :/******************************** Carousel ********************************/ #owl-demo .item{ margin: 3px; } #owl-demo .item img{ display: block; width: 300px; height: 200px; }
aurait pu être placé directement entre les balises <style> </style> déjà présentes, par exemple, à la place du JavaScript qui n'a rien à y faire. -
-
