Discussion :

[Independant44]

Bonsoir à tous et toutes!!

Petits souci au niveau de mon carrousel souhaité.

Je prend bien sur Github,

j'insere bien les bons appels...mais il reste en display:none car non initialisé pour ceux qui connaisse ce carrousel...

J'ai bien mon jquery 1.10 d'appelé et le script en bas de page pour le charger...

Il n'apparait pas ...

je suis bloqué!!!

Merci!!!

[rodolphebrd]

Bonjour,

effectivement c'est incompréhensible...

[Independant44]

Bonjour à Tous!!!!


Alors me revoilà avec mes tracas!!!
Je m'explique...Je travaille à partir du framework Bootstrap Carrousel
http://getbootstrap.com/2.3.2/examples/carousel.html

J'ai donc mon carrousel du haut (slide) qui fonctionne...j'ai ajouter video.js également pour une video sur site ok...
Cependant comme je souhaite une page déroulante style scroll down, je souhaite aussi insérer un carrousel "Owl carrousel" et également une gallérie video via royalslider (çà fait charger en script mais on s'arrange bien...)
Alors j'ai donc un semblant de royalslider qui a l'apparence mais pas les fonctionnalités video et qui slide quand même...
Et je ne vois pas du tout Owl Caroussel qui est "display:none" car non initialisé...
Çà c'est de la demande!!! bref je ne pige pas un truc là...J'ai déjà travaillé avec ce framework sans souci mais sans ces ajouts...
Je vous laisse mes liens script

dans le header:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 <link href="css/bootstrap.css" rel="stylesheet">
     <link href="css/navbar-fixed-top.css" rel="stylesheet">
     <link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
     <link href="css/video-js.css" rel="stylesheet" type="text/css">
      <link class="rs-file" href="css/royalslider.css" rel="stylesheet">
     <link rel="stylesheet" href="owl-carousel/owl.carousel.css">
     <link rel="stylesheet" href="owl-carousel/owl.theme.css">
      <link href="css/carousel.css" rel="stylesheet">
      <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
  <!-- Unless using the CDN hosted version, update the URL to the Flash SWF -->
  <script>
    videojs.options.flash.swf = "video-js.swf";
  </script>

script en bas de page...

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script id="addJS">jQuery(document).ready(function($) {
  $('#video-gallery').royalSlider({
    arrowsNav: false,
    fadeinLoadedSlide: true,
    controlNavigationSpacing: 0,
    controlNavigation: 'thumbnails',
 
    thumbs: {
      autoCenter: false,
      fitInViewport: true,
      orientation: 'vertical',
      spacing: 0,
      paddingBottom: 0
    },
    keyboardNavEnabled: true,
    imageScaleMode: 'fill',
    imageAlignCenter:true,
    slidesSpacing: 0,
    loop: false,
    loopRewind: true,
    numImagesToPreload: 3,
    video: {
      autoHideArrows:true,
      autoHideControlNav:false,
      autoHideBlocks: true
    }, 
    autoScaleSlider: true, 
    autoScaleSliderWidth: 960,     
    autoScaleSliderHeight: 450,
 
    /* size of all images http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/adding-width-and-height-properties-to-images */
    imgWidth: 640,
    imgHeight: 360
 
  });
});
</script>

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/holder.js"></script>
    <script src="owl-carousel/owl.carousel.js"></script>
<script class="rs-file" src="js/jquery.royalslider.min.js"></script>
<script class="rs-file" src="js/jquery.easing-1.3.js"></script>
<script src="js/highlight.pack.js"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script> hljs.initHighlightingOnLoad();</script>
<script src="js/video.js"></script>
 
    <script>
        $(".owl-carousel").owlCarousel();
        </script>
 
    <!---OWL CARROUSEL-------------------------->
    <script type="text/javascript">
function montre(calque){
        var el = document.getElementById(calque);
        el.style.display = (!el.style.display || el.style.display == "none") ? "block" : "none";
}
</script>
			<!---end OWL CARROUSEL-------------------------->

le site n'est pas en ligne...

À charge de revanche si vous m'aidez....et puis même...

[rodolphebrd]

le site n'est pas en ligne...

Il doit bien y avoir un moyen de publier une page, avec le problème concerné, en ligne non ?

Ça serait plus simple à tester.

[danielhagnoul]

Bonsoir

Vous parlez de choses que je ne connais pas (bootstrap, owl.carousel), mais le chargement des codes m'intrigue :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script src="js/bootstrap.min.js"></script>
<script src="js/holder.js"></script>
<script src="owl-carousel/owl.carousel.js"></script>
<script class="rs-file" src="js/jquery.royalslider.min.js"></script>
<script class="rs-file" src="js/jquery.easing-1.3.js"></script>
<script src="js/highlight.pack.js"></script>
<script src="js/jquery-ui-1.8.22.custom.min.js"></script>
<script> hljs.initHighlightingOnLoad();</script>
<script src="js/video.js"></script>

class="rs-file" ?

Je vois le chargement d'un jQuery UI obsolète, mais pas d'une version de jQuery (actuellement 1.10.2) ?

Pour moi, l'ordre des chargements n'est pas respecté, on charge des plugins (owl.carousel.js, jquery.royalslider) avant jQuery et jQuery UI !

Le plugin jquery.easing est intégré dans les dernières versions de jQuery UI (version actuelle 1.10.3).