Discussion :

[sooprano]

salut j'ai un effet caroussel exemple http://sorgalla.com/projects/jcarous...ic_simple.html

et effet Modal

demo : http://yensdesign.com/tutorials/popupjquery/

problème c'est que quand j’intègre le carousel dans une fenêtre Modal , ça m'affiche pas tous les images j'en sais pas pourquoi

voici le rendu : http://www.mdesign.ma/modal/

[sooprano]

Voici mon code total :

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
<!--------- modal----------------!-->
  <link rel="stylesheet" href="css/general.css" type="text/css" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="js/popup.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.bpopup-0.5.1.min.js"></script>
 
    <script type="text/javascript">
$(document).ready(function(){
   $("#button").bind('click', function(){
      $("#popupContact").bPopup();
      return false
   });
});
</script>
 
<!--------- fin modal -----------!-->
 
<!-- ------jcarousel------------!-->
jQuery library
-->
<script type="text/javascript" src="js/carousel/jquery-1.4.2.min.js"></script>
<!--
  jCarousel library
-->
<script type="text/javascript" src="js/carousel/jquery.jcarousel.min.js"></script>
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="css/carousel/tango/skin.css" />
 
<script type="text/javascript">
 
function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });
 
    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });
 
    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};
 
jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        auto: 2,
        wrap: 'last',
        initCallback: mycarousel_initCallback
    });
});
 
</script>
<!--------fin carousel----------!-->
 
<!------ HTML-------------------!-->
<div id="button"><input value="Press me please!" type="submit"></div>
<div id="div_to_popup"></div>
<div style="position: absolute; top:10px;  left: 50%; display: none; width:656px;  overflow:scroll" id="popupContact">
	<a id="popupContactClose">x</a>
  <div id="wrap">
 
 
 
 
 
 
  <ul id="mycarousel" class="jcarousel-skin-tango">
    <li><a href="#"><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></a></li>
 <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
  </ul>
 
</div>
</div>
	<div style="height: 605px; opacity: 0.7; display: none;" id="backgroundPopup"></div>
<!------fin HTML----------------!-->

Comme je l'ai dis auparavant, effet jcarousel est intégré dans une fenêtre Pop up en jquery et ça ne fonctionne pas parfaitement.