jCarousel javascript/jQuery

26 ene 2011 13:52

Enlace permanente

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

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

26 ene 2011 14:10

Enlace permanente

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.

26 ene 2011 14:45

Enlace permanente

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>


26 ene 2011 14:58

Enlace permanente

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.

27 ene 2011 14:00

Enlace permanente

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.