Prototype UI - Carousel

Version imprimable

23/03/2010, 14h48
Lucas Panny

Prototype UI - Carousel

Bonjour,

J'utilise le carousel de http://prototypeui.com
Mais je suis épaté par le carousel utilisé par http://www.pcsdistribuciones.es/ (qui est payant, dommage)

Est-il de possible d'en faire un avec prototype ui, c'est à dire changer de page au survol?
24/03/2010, 10h59
gwyohm

Bonjour,

J'ai jeté un oeil à la doc et il semble que oui...
http://docs.prototype-ui.com/rc0/Car...ousel.scrollTo
24/03/2010, 16h19
Lucas Panny

scrollTo: function( index )
Merci pour le tuyau

Dommage c'est qu'il n'y a d'effet que le glissement vertical ou horizontal

J'ignore le problème d'effet
Un autre gros soucis m'est arrivé: le principe de prototype carousel c'est de défiler les éléments entre <li></li>

En fait, j'ai essayé de mettre une page entière à l'intérieur, des <table>, des <ul> aussi mais le carousel dégringole

Code:

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
    <div id="vertical_carousel">
      <div class="previous_button" style="display:none"></div> 
      <div class="container">
        <ul>
          <li>
 
            <img alt="Window" src="images/window.png" /><br />
            <img alt="Pwc" src="images/window_logo.png" /><br />
            <ul>
				<li>AAAAA</li>
				<li>A</li>
				<li>A11111</li>
			</ul>
          </li>
          <li>
            <img alt="Window" src="images/carousel.png" /><br />
            <img alt="Pwc" src="images/carousel_logo.png" /><br />
            <ul>
				<li>B888888</li>
				<li>B</li>
				<li>B</li>
			</ul>
          </li>
          <li>
 
            <img alt="Window" src="images/window.png" /><br />
            <img alt="Pwc" src="images/window_logo.png" /><br />
            <ul>
				<li>C</li>
				<li>C4444444</li>
				<li>C</li>
			</ul>
          </li>
          <li>
            <img alt="Window" src="images/carousel.png" /><br />
            <img alt="Pwc" src="images/carousel_logo.png" /><br />
            <ul>
				<li>D</li>
				<li>D</li>
				<li>D</li>
			</ul>
          </li>
        </ul>
      </div>
      <div class="next_button" style="display:none"></div>
    </div>
    <script type="text/javascript">
    // <![CDATA[
      function runTest() {
        vCarousel = new UI.Carousel("vertical_carousel", {direction: "vertical"});
      }
 
      Event.observe(window, "load", runTest);
    // ]]>
    </script>

Juste avec ça, le carousel n'y arrive pas, pourquoi?

25/03/2010, 09h28
gwyohm

Salut,

il y a un endroit où ta page est visible ?

Pour mon exemple, seul la 1ère de la liste qui s'affiche en dessous de l'image

Pourquoi les carrousels choisissent <li> pour la liste mais pas leur propre div? Pour avoir plus beau quand js n'est pas activé peut-être?

J'essaie de mettre des tableaux comme suit mais rien

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
            <li>
                 <table style="width:100%">
                     <tr>
                        <td></td>
                        <td style="width:40%">
                           <ul>
                              <li>Agenda partagé dernière génération</li>
                              <li>Outil personnalisable</li>
                              <li>Options pour vos clients: prise de rendez-vous par Internet et rappels des rendez-vous par email ou SMS</li>
                           </ul>
                           Avantages:
                           <ul>
                              <li>Apportez toujours plus de service à vos clients</li>
                              <li>Augmentez votre compétitivité en baissant la facture de vos clients</li>
                              <li>Développez votre chiffre d’affaires</li>
                              <li>Baissez vos charges et augmentez votre profitabilité</li>
                           </ul>
                        </td>
                     </tr>
                  </table>
           </li>

J'ai déjà essayé prototype ui carousel avec du texte entre les <li></li>

Code:

1
2
3
4
5
6
7
 
                    <div style="position:relative;width:400px;height:130px">
                        <div style="position:absolute;top:22px;left:50px;">Text1</div>
                        <div style="position:absolute;top:35px;left:300px;">Text2</div>
                        <div style="position:absolute;top:50px;left:110px;">Text3</div>
                        <div style="position:absolute;top:70px;left:60px;">Text4</div>
                    </div>

Fiasco!

Utilise JQuery Carousel Lite!!