Script Carrusel de Imagenes

zyxer · #1

Hola, deseo compartirles este Srcipt. Sirve para implementar un carrusel de imágenes que quiero implemente y además preguntarles en que no he estoy fallando en la implementación de este script, ya que no me funciona. Lo que he hecho es esto:

Crear un archivo llamado iCarrousel.html en styles/tu_estilo/template. Este archivo llevará este código (cambiando la dirección y nombre de las imágenes):

Código: Seleccionar todo

<div id="example_3">  
    <ul id="example_3_content">  
        <li class="example_3_item"><a href="#"><img src="images/flowers/1.jpg" alt="flower 1" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/2.jpg" alt="flower 2" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/3.jpg" alt="flower 3" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/4.jpg" alt="flower 4" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/5.jpg" alt="flower 5" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/6.jpg" alt="flower 6" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/7.jpg" alt="flower 7" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/8.jpg" alt="flower 8" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/9.jpg" alt="flower 9" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/A.jpg" alt="flower A" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/B.jpg" alt="flower B" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/C.jpg" alt="flower C" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/D.jpg" alt="flower D" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/E.jpg" alt="flower E" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/F.jpg" alt="flower F" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/G.jpg" alt="flower G" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/H.jpg" alt="flower H" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/I.jpg" alt="flower I" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/J.jpg" alt="flower J" /></a></li>  
        <li class="example_3_item"><a href="#"><img src="images/flowers/K.jpg" alt="flower K" /></a></li>  
    </ul>  
    <div id="example_3_frame">  
        <img id="example_3_previous" src="images/ex3_previous.gif" alt="move previous" />  
        <img id="example_3_next" src="images/ex3_next.gif" alt="move next" />  
    </div>  
</div>

Crear un archivo llamado iCarrousel.js en la misma carpeta y con este código:

Código: Seleccionar todo

window.addEvent("domready", function() {  
    new iCarousel("example_3_content", {  
        idPrevious: "example_3_previous",  
        idNext: "example_3_next",  
        idToggle: "undefined",  
        item: {  
            klass: "example_3_item",  
            size: 86  
        },  
        animation: {  
            duration: 1000,  
            amount: 4  
        }  
    });  
});

Y un tercer archivo llamado iCarrousel.css, en la carpeta styles/tu_estilo/theme. Este archivo, debe llevar el siguiente código:

Código: Seleccionar todo

/* example_3 css */  
#example_3 {  
    position: relative; /* important */  
    overflow: hidden; /* important */  
    width: 470px; /* important */  
    height: 86px; /* important */  
    margin: 0 85px;  
    background: #000;  
}  
  
#example_3_frame {position: relative}  
#example_3_previous {float: left;}  
#example_3_next {float: rightright;}  
#example_3_content {  
    position: absolute;  
    top: 0;  
    margin-left: 20px;  
}  
  
#example_3_content  
#example_3_content li {  
    list-style: none;  
    margin: 0;  
    padding: 0;  
}  
    #example_3_content {  
        width: 5418px;  
    }  
    #container_bd #example_3 ul li {  
        display: block;  
        float: left;  
        margin: 5px;  
        padding: 5px;  
        border: 1px solid #666;  
        background-color: #000;  
    }  
  
#container_bd #example_3 ul li img {  
    display: block;  
}

En el overall_header, antes del </head>, colocar:

Código: Seleccionar todo

<script type="text/javascript" src="http://www.tudominio.com/phpBB3/styles/tu_estilo/template/iCarousel.js"></script>

En el stylesheet:
Buscar:

Código: Seleccionar todo

@import url("colours.css");

Añadir después:

Código: Seleccionar todo

@import url("iCarousel.css");

En el lugar donde desean que aparezca el la carrusel de imágenes añadir:

Código: Seleccionar todo

<!-- INCLUDE iCarousel.html -->

Bueno, eso es lo que he hecho, pero no me funciona correctamente, si alguien, encuentra el error , por favor avisarme.

Gracias de Antemano y feliz resto del día.