Recordad que para pedir soporte alguno, debéis facilitar los datos de soporte oportunos por favor, mirad aquí y leer las Normas generales del foro, esto nos servirá de ayuda para dar el mejor soporte..

Gracias.

La Administración de phpBB España.

Script Carrusel de Imagenes

PHP, HTML, CSS, JS, jQuery, etc.

0
No hay votos
 
Votos totales: 0

zyxer
Miembro
Mensajes: 367
Registrado: 17 Jul 2011, 22:53
Edad: 31

Script Carrusel de Imagenes

#1

Mensaje por zyxer »

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.


Datos de Soporte
SPOILER_SHOW
URL: http://abacoentertainment.com
Versión phpBB: 3.0.10
MODs Instalados: AutomodBoard3 Portal 2.0.0b1phpBB Gallery 1.1.6Buttons Menu 2.2.0Paypal Donation Mod 1.0.4Advertisement Management 1.0.12[BETA] phpBB WYSIWYGTopic SEO description and keywordsIndex Tabbed 1.1.1mod • Prime Login Return • Prime Links • Prime Logout Return • Prime Instant Redirect• Unsubscribe ModQuick BuddiesReIMG Image Resizer 2.0.1
Plantilla(s) usada(s): Prosilver
Servidor: Gratis
Actualización desde otra versión: No
Conversión desde otro sistema de foros: No

Volver a “🆘 Recursos Webmaster”