Discussion :

[kate59]

Bonjour,

J'ai améliorer un code ici :

http://jsfiddle.net/elodie66/DcpdT/283/

et les récupérer pour mon site mais cela ne marche pas comme si le jquery ne marche pas.

http://test3.webcreation66.com/transats.php


j'ai même tenter de le recopier collier ici

https://jsfiddle.net/elodie66/Lur924ms/1/

mais le code ne marche pas j'ai bien pris les ressources externes pourtant.

Merci.

[kate59]

on m' a conseiller de modifier le code ainsi enlevant les $j par $ mais le resultat n'est pas celui de mon http://jsfiddle.net/elodie66/DcpdT/283/:

Code :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
	<script type="text/javascript">
		 var $ = jQuery.noConflict();
 
var realSlider= $("ul#bxslider").bxSlider({
      speed:1000,
      pager:false,
      nextText:'',
      prevText:'',
      infiniteLoop:false,
      hideControlOnEnd:true,
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        changeRealThumb(realThumbSlider,newIndex);
 
      }
 
    });
 
    var realThumbSlider=$("ul#bxslider-pager").bxSlider({
      minSlides: 4,
      maxSlides: 4,
      slideWidth: 156,
      slideMargin: 12,
      moveSlides: 1,
      pager:false,
      speed:1000,
      infiniteLoop:false,
      hideControlOnEnd:true,
      nextText:'<span></span>',
      prevText:'<span></span>',
      onSlideBefore:function($slideElement, oldIndex, newIndex){
        /*$("#sliderThumbReal ul .active").removeClass("active");
        $slideElement.addClass("active"); */
 
      }
    });
 
    linkRealSliders(realSlider,realThumbSlider);
 
    if($("#bxslider-pager li").length<5){
      $("#bxslider-pager .bx-next").hide();
    }
 
// sincronizza sliders realizzazioni
function linkRealSliders(bigS,thumbS){
 
  $("ul#bxslider-pager").on("click","a",function(event){
    event.preventDefault();
    var newIndex=$(this).parent().attr("data-slideIndex");
        bigS.goToSlide(newIndex);
  });
}
 
//slider!=$thumbSlider. slider is the realslider
function changeRealThumb(slider,newIndex){
 
  var $thumbS=$("#bxslider-pager");
  $thumbS.find('.active').removeClass("active");
  $thumbS.find('li[data-slideIndex="'+newIndex+'"]').addClass("active");
 
  if(slider.getSlideCount()-newIndex>=4)slider.goToSlide(newIndex);
  else slider.goToSlide(slider.getSlideCount()-4);
 
}
 
</script>

voici ma page :
http://test3.webcreation66.com/transats.php

merci

[SpaceFrog]

En console tu as l'erreur suivante :

TypeError: $(...).bxSlider is not a function

[kate59]

je ne comprend pas que cela fonctionne sur :
http://jsfiddle.net/elodie66/ffer2nc4/
voici mon html j'ai bien #bxslider

Code :

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
<ul id="bxslider">
<li><img src="http://dummyimage.com/600x400/000/fff.png" alt="">
				<div class="content">
					<h3>MGMT</h3>
					<h4>Congratulations</h4>
					<p>Recording the follow-up to your critically-acclaimed debut album has to be a nerve-wracking affair. As a band, do you go with the same sound/formula you used on the first record? On MGMT’s sophomore album Congratulations, they successfully manage to do both.</p>
				</div>
				<div class="clear"></div>
</li>
<li><img src="http://dummyimage.com/600x400/000/ff0099.png" alt=""></li>
<li><img src="http://dummyimage.com/600x400/000/ff0000.png" alt=""></li>
<li><img src="http://dummyimage.com/600x400/000/fff000.png" alt=""></li>
<li><img src="http://dummyimage.com/600x400/000/fff.png" alt=""></li>
<li><img src="http://dummyimage.com/600x400/000/fff.png" alt=""></li>
    </ul>
 
    <!-- The thumbnails -->
    <ul id="bxslider-pager">
<li data-slideIndex="0"><a href=""><img src="http://dummyimage.com/200x200/000/fff.png"></a></li>
<li data-slideIndex="1"><a href=""><img src="http://dummyimage.com/200x200/000/ff0099.png"></a></li>
<li data-slideIndex="2"><a href=""><img src="http://dummyimage.com/200x200/000/ff0000.png"></a></li>
<li data-slideIndex="3"><a href=""><img src="http://dummyimage.com/200x200/000/fff000.png"></a></li>
    <li data-slideIndex="4"><a href=""><img src="http://dummyimage.com/200x200/000/fff.png"></a></li>
    <li data-slideIndex="5"><a href=""><img src="http://dummyimage.com/200x200/000/fff.png"></a></li>
    </ul>

[kate59]

nouveau lien http://jsfiddle.net/elodie66/ffer2nc4/

[SpaceFrog]

http://jsfiddle.net/ffer2nc4/2/

[SpaceFrog]

http://jsfiddle.net/ffer2nc4/3/

[kate59]

merci mais le probléme est toujours le même ce n'est pas du puces en bas de navigation que j'avais mais des images thumbnail relié a l'image principal cela s'affiche bien en test en agrandissant la zone on a bien l'image le texte a droit et le carrosuel en bas sur http://jsfiddle.net/elodie66/ffer2nc4/ mais sur mon site http://test3.webcreation66.com/transats.php les thumbnail sont vertical et non horizontal et quand clic sur suivant rien ne se passe.