jCarousel javascript/jQuery

Question

jCarousel javascript/jQuery

JaguarSpen 26 ene 2011 12:52

Zero One

4.359 mensajes
desde jun 2005

http://gmarwaha.com/jquery/jcarousellite/#install

Alguien me puede explicar el paso 3 donde se pone eso??? No lo entiendo.

4 respuestas

#46825# 26 ene 2011 13:10 · Answer 1 · 2011-01-26T12:10:25+00:00

Lo que tienes que poner es:

<script type="text/javascript">
    $(".default .jCarouselLite").jCarouselLite({
        btnNext: ".default .next",
        btnPrev: ".default .prev"
    });   
</script>

O modificado como quieras, dentro del html. El autor aconseja ponerlo en los eventos document.ready o window.load de jQuery, si no me equivoco.

Answer 2 · 2011-01-26T12:45:09+00:00

Porqué no me funciona?

Esto en el head:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jcarousellite.js"></script>

Esto después del body:

<script type="text/javascript">
    $(".vertical .galeria").jCarouselLite({
        btnNext: ".vertical .next",
       btnPrev: ".vertical .prev",
       vertical: true

    });   
</script>

Y el HTML:

<div id="blanco">

<button class="prev"><<</button>
<button class="next">>></button>

 <div class="galeria">

    <ul>
     <li>
        <div class="preview">
         <img src="foto1.jpg" alt="" width="100" height="100" border="4px">
        </div>
     </li>
     <li>
        <div class="preview">
         <img src="foto2.jpg" alt="" width="100" height="100" border="4px">
        </div>
     </li>
     <li>
        <div class="preview">
   <img src="foto1.jpg" alt="" width="100" height="100" border="4px">
        </div>
     </li>
     <li>
        <div class="preview">
        <img src="foto2.jpg" alt="" width="100" height="100" border="4px">
     </li>
    </ul>
 </div>

</div>

#46825# 26 ene 2011 13:58 · Answer 3 · 2011-01-26T12:58:41+00:00

Lo que pones en el body tienes que ponerlo después del div (lo cual no sé si funcionará) o dentro de los eventos que he citado.

Answer 4 · 2011-01-27T12:00:08+00:00

Yo probaría a cambiar

Esto después del body:
CÓDIGO: SELECCIONAR TODO
<script type="text/javascript">
$(".vertical .galeria").jCarouselLite({
btnNext: ".vertical .next",
btnPrev: ".vertical .prev",
vertical: true

});
</script>

por esto

En el head
<script type="text/javascript"> $(document).ready(function() { $(".vertical .galeria").jCarouselLite({ btnNext: ".vertical .next", btnPrev: ".vertical .prev", vertical: true }); }); </script>

Así no se disparará el evento hasta que la página esté cargada y el body parseado.