Regresar a la página www.ComoCrearTuWeb.com
Página 4 de 4 PrimerPrimer 1234
Resultados 46 al 60 de 60

Tema: [TUTORIAL] Crear carrusel-slide de imágenes

  1. #46
    Esto empieza a ser un vicio... Habitante Avatar de Lombardo
    Fecha de Ingreso
    24 jul, 11
    Ubicación
    Austria
    Mensajes
    406
    Poder de Reputación
    12
    ¡Lo conseguí, muchas gracias por la explicación!

  2. #47
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    18 abr, 13
    Mensajes
    1
    Poder de Reputación
    0
    Hola No puedo hacer funcionar el carrusel. Cuando lo veo en mozilla solo aparece una imagen cambiando una por otra en el mismo lugar:
    este es el codigo
    gracias

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Prueba</title>
    <script type="text/javascript" src="jquery.js"></script>

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

    <script type="text/javascript">

    $(document).ready(function() {

    $('.carruseldeimagenes').cycle({

    fx: 'fade'

    });

    });

    </script>

    </head>

    <body>
    <div class="carruseldeimagenes">
    <img src="images/Estrip.png" alt="TEXTO" />
    <img src="images/Inosha_tapa.png" alt="TEXTO" />
    <img src="images/tapa_a_palo_de_gueso.png" alt="TEXTO" />
    <img src="images/tapa_Barbara.png" alt="TEXTO" />
    <img src="images/tapa_carneada.png" alt="TEXTO" />
    <img src="images/tapa_dondelased.png" alt="TEXTO" />
    <img src="images/tapa_fondos_alma.png" alt="TEXTO" />
    </div>
    </body>
    </html>

  3. #48
    Recien Llegado! Merodeador
    Fecha de Ingreso
    17 abr, 13
    Mensajes
    4
    Poder de Reputación
    0
    Hola buenas, yo tengo este carrusel que me funciona bien, todo ok ya lo tengo configurado como quiero etc, pero me gustaria añadirle la funcion de qque pasen las imagenes solas, y no consigo hacerlo, si alguien me puede ayudar se lo agradeceria.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
    * {
    margin: 0;
    padding: 0;
    border: none;
    position: relative;
    }

    html, body {
    width: 100%;
    height: 100%;
    }


    div#contenedor_principal {
    width: 570px;
    height: 250px;
    margin: 0 auto;
    }


    div#contenedor_principal > div#contenedor_slider{
    border: 1px solid #000;
    width: 570px;
    height: 250px;
    background: #000;
    margin: 0 auto;
    overflow: hidden;
    }


    div#contenedor_principal > span.flecha{
    z-index: 99;
    width: 60px;
    height: 61px;
    top: 100px;
    position: absolute;
    cursor: pointer;
    }


    div#contenedor_principal > span.der{
    right: -9px;
    background-image: url('http://imageshack.us/a/img42/2639/btnextk.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    }


    div#contenedor_principal > span.izq{
    left: -9px;
    background-image: url('http://imageshack.us/a/img542/5567/btprev.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    }


    div#contenedor_principal > div#contenedor_slider div#slider{
    width: 200%; /* este width es sobrescrito en el onload. es equivalente a 2 imágenes */
    position: relative;
    left: 0;
    top: 0;
    }


    div#contenedor_principal > div#contenedor_slider div#slider img {
    width: 570px; /* mismo width de #contenedor_slider */
    height: 250px; /* mismo height de #contenedor_slider */
    float: left;
    }
    </style>
    <script type="text/javascript">
    var namespaceSlider = {

    Evento : function(elemento, nomevento, fnc) {

    if (elemento.addEventListener) {
    elemento.addEventListener(nomevento, function(e) { fnc.call(elemento, e); }, false);
    } else if (elemento.attachEvent) {
    elemento.attachEvent('on' + nomevento, function() { fnc.call(elemento); });
    }
    },



    estableceValoryEventos: window.onload = function() {
    var selectorSlider = document.getElementById('slider');
    var n_Imagenes = selectorSlider.getElementsByTagName('img').length;
    selectorSlider.style.width = parseInt(n_Imagenes * 100, 10) + '%';

    var spans = document.querySelectorAll('span.flecha');
    namespaceSlider.Evento(spans[0], 'click', function() {namespaceSlider.mover(n_Imagenes, 0)});
    namespaceSlider.Evento(spans[1], 'click', function() {namespaceSlider.mover(n_Imagenes, 1)});

    },


    clicks: 0,
    posInicial: 0,
    anchoImg: 100,

    mover : function(nImg, i){

    namespaceSlider.clicks += (i == 0) ? parseInt(nImg-1, 10) : parseInt(i, 10);
    var indiceImg = namespaceSlider.clicks % nImg;
    var posFinal = namespaceSlider.anchoImg * parseInt(indiceImg, 10);
    var slider = document.getElementById('slider');

    if (namespaceSlider.posInicial >= posFinal) { // escrolea hacia la izquierda

    (function desplazar() {
    setTimeout(function(){

    if(namespaceSlider.posInicial <= posFinal) return;
    namespaceSlider.posInicial -= 2;
    slider.style.left = -namespaceSlider.posInicial + '%';
    desplazar();
    },6);
    })();


    } else { // escrolea hacia la derecha


    (function desplazar() {
    setTimeout(function(){

    if(namespaceSlider.posInicial >= posFinal) return;
    namespaceSlider.posInicial += 2;
    slider.style.left = -namespaceSlider.posInicial + '%';
    desplazar();
    },6);
    })();
    }
    }
    }
    </script>
    </head>
    <body>

    <div id="contenedor_principal">
    <span class="flecha izq"></span>
    <span class="flecha der"></span>
    <div id="contenedor_slider">
    <div id="slider">
    <a href="http://www.elosport.es/c28071-futbol.html"><img src="http://imageshack.us/a/img16/168/nikectr3602.jpg" alt="i0" />
    <img src="http://imageshack.us/a/img32/9491/futbolsala2.jpg" alt="i1" />
    <img src="http://imageshack.us/a/img16/168/nikectr3602.jpg" alt="i2" />
    <img src="http://imageshack.us/a/img32/9491/futbolsala2.jpg" alt="i3" />
    </div>
    </div>
    </div>

    </body>
    </html>

  4. #49
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    22 abr, 13
    Mensajes
    2
    Poder de Reputación
    0

    Un buen trabajo, pero tengo una dura

    Mi duda es que trabajo con DREAMWEAVER y el me da una vista del documento antes de ponerlo en el navegador y me pone las imágenes una detrás de otro y me tapa todo, y así no puedo trabajar y ademas si escribo algo en el pie de pagina no lo puedo ver y tampoco se ve en la pagina, me ayudáis ?

  5. #50
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    22 abr, 13
    Mensajes
    2
    Poder de Reputación
    0
    Zad22 tu problema lo tuve yo xD y es que la ruta de los dos archivos esta mal porque copiaste el código de la pagina, yo no tuve los archivos en el mismo documento que el index porque me gusta estar organizado, mira eso, puede ser ese el problema

  6. #51
    Recien Llegado! Merodeador Avatar de juanjose
    Fecha de Ingreso
    06 may, 13
    Mensajes
    4
    Poder de Reputación
    0
    como siempre excelente tutorial! me ayudó bastante

    gracias y saludos

  7. #52
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    19 jun, 13
    Mensajes
    1
    Poder de Reputación
    0
    Hola, tengo un problema, y es que me pone que el "objeto" donde he puesto el carrusel me dice que no tiene la funcion cycle y otra pregunta sirve para moviles, tablets?

  8. #53
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    07 jul, 13
    Mensajes
    2
    Poder de Reputación
    0
    Yo estoy igual. No se que hago mal.. Y como estoy un poco verde en esto seguro que hago algo mal.. jeje.
    A ver, os explico paso a paso lo que hago yo, los archivos descargados jquery y cycle los he dejado en la misma carpeta de index, etc, sin abrirlos y sin tocarlos.
    He abierto index por ejemplo y como poneis, he puesto en una etiqueta cualquiera del texto <head> esto que poneis:

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="cycle.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('.carruseldeimagenes').cycle({
    fx: 'fade'
    });
    });
    </script>

    cerrandolo con </head>

    y despues he insertado una etiqueta div y dentro he puesto esto:

    <div class="carruseldeimagenes">
    <img src="URL DE LA IMAGEN" alt="TEXTO" />
    <img src="URL DE LA IMAGEN" alt="TEXTO" />
    <img src="URL DE LA IMAGEN" alt="TEXTO" />
    <img src="URL DE LA IMAGEN" alt="TEXTO" />
    <img src="URL DE LA IMAGEN" alt="TEXTO" />
    </div>

    y me ha creadi 5 iconos con imagen partida donde he creado el div, le doy al boton derecho sobre el icono y le doy a editar etiqueta <img> y pongo una imagen cualquiera, y lo mismo con las demas imagenes en los otros iconos.
    Pero se me pone en vez de carrusel de imagenes una imagen detras de otra. ''cada imagen tiene distinto tamaño, no se si tendra algo que ver'' Asique estoy un poco liado...
    Intentad no hecharme la bronca ni reirse de mi que toy un poco novato en estas cosas. Empezando ahora desde cero. he intentado aprender. Poco a poco mejorare. Gracias a todos y perdonar por el tocho

    Saludos

  9. #54
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    26 jun, 13
    Mensajes
    2
    Poder de Reputación
    0

    No se adapta el tamaño de las imágenes

    Al cambiar de tamaño la ventana del navegador, el tamaño de las imágenes del carrusel no cambia, aunque en la hoja de estilos le he puesto en "auto" tanto el ancho como el largo. ¿Cómo lo puedo arreglar?

  10. #55
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    26 jun, 13
    Mensajes
    2
    Poder de Reputación
    0
    No veo la opción slideREsize ni width. ¿es por eso que no consigo que las imágenes se adapten al tamaño de la ventana cuando cambio el tamaño de la ventana?

  11. #56
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    18 abr, 11
    Mensajes
    1
    Poder de Reputación
    0
    ¿ Donde esta el código que tengo que pegar en jquery.js y en cycle.js ?

  12. #57
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    13 abr, 14
    Mensajes
    2
    Poder de Reputación
    0
    Recien me estoy integrando a este asunto del Jquery y diseño... pero tengo dudas... con respecto a que en el tutorial no dice algo como un ejemplo de donde deberían ir los archivos jquery.js y cycle.js, ya que así nos da una idea para los que no sabemos bien... el cuál es mi problema en estos momentos... para la prueba... yo tengo el head en:

    templates->yoo_streamline->layouts->template.php

    donde inserte el código:

    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="cycle.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('.carruseldeimagenes').cycle({
    fx: 'fade'
    });
    });
    </script>

    pero... no se dónde debo subir los archivos antes mencionados...

    esto que dijeron: "Por lo que veo tienes el jquery.js y el cycle.js en carpetas distintas, tienes que poner los dos archivos (archivos, no carpetas) en la misma carpeta donde quieres el carrusel"

    No logré entenderlo completamente... en el sentido que "en la misma carpeta donde quieres el carrusel", en mi caso lo quiero agregar en content donde hago las publicaciones, así puedo agregar varias fotos a la publicación de una forma interactiva...

    Por si acaso estoy usando Joomla 3.2.3

  13. #58
    Esto empieza a ser un vicio... Habitante Avatar de Doodleo
    Fecha de Ingreso
    25 abr, 11
    Ubicación
    Galicia (España)
    Mensajes
    1,329
    Poder de Reputación
    17
    Fue un error mío al hacer el post hace ya mucho tiempo... os recomiendo a todos dejar de lado este tema y si queréis un slide (a parte más sencillo de lo que era este) mirar este post: http://www.comocreartuweb.com/consul...para-todo-CCTW

  14. #59
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    13 abr, 14
    Mensajes
    2
    Poder de Reputación
    0
    Cita Iniciado por Doodleo Ver Mensaje
    Fue un error mío al hacer el post hace ya mucho tiempo... os recomiendo a todos dejar de lado este tema y si queréis un slide (a parte más sencillo de lo que era este) mirar este post: http://www.comocreartuweb.com/consul...para-todo-CCTW
    Doodleo, te agradezco la pronta respuesta... pero más me confundo el link que entregaste... ya que no hay un ejemplo de los que se muestran allí...
    lo que ando buscando es un CSS3 o animación de tipo Carrousel para agregar en cada publicación que haga en la sitio... de forma que estás 3 imagenes (?) se vean en dicho efecto y animación...

    Se agradece la ayuda... pero si puedes indicarme una ruta de ejemplo para los archivos .js se agradecería o tal vez algo mejor...

    Saludos desde Chile

  15. #60
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    26 nov, 15
    Mensajes
    1
    Poder de Reputación
    0
    Buenas tardes,

    A mi tampoco me funciona. Lo estoy haciendo en una carpeta de prueba. El codigo es el siguiente:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Prueba Carrousel</title>
    <script type="text/javascript" src="<a href="jquery.js">jquery.js</a>"></script>
    <script type="text/javascript" src="<a href="cycle.js">cycle.js</a>"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('.carruseldeimagenes').cycle({
    fx: 'fade'
    });
    });
    </script>
    <style type="text/css">
    #apDiv1 {
    position:absolute;
    width:620px;
    height:410px;
    z-index:1;
    left: 238px;
    top: 96px;
    }
    </style>
    </head>

    <body>
    <div class="carruseldeimagenes">
    <img src="<img src="file:///C|/Users/Miguel Ángel/Desktop/WebLand/Prueba1/Imagenes/1.jpg" width="275" height="183" />" alt="TEXTO" />
    <img src="<img src="file:///C|/Users/Miguel Ángel/Desktop/WebLand/Prueba1/Imagenes/2.jpg" width="206" height="245" />N" alt="TEXTO" />
    <img src="<img src="file:///C|/Users/Miguel Ángel/Desktop/WebLand/Prueba1/Imagenes/3.jpg" width="400" height="400" />" alt="TEXTO" />
    <img src="U<img src="file:///C|/Users/Miguel Ángel/Desktop/WebLand/Prueba1/Imagenes/4.jpg" width="996" height="900" />" alt="TEXTO" />
    <img src="<img src="file:///C|/Users/Miguel Ángel/Desktop/WebLand/Prueba1/Imagenes/Miguel_Angel_04_1_220.jpg" width="220" height="165" />" alt="TEXTO" />
    </div>
    </body>
    </html>


    Me ayudais? Por favor. :)

Temas Similares

  1. Como corrijo mi banner slide de imagenes?
    Por Gaston1259 en el foro Adobe Flash
    Respuestas: 0
    Último Mensaje: 10/08/2009, 23:32
  2. como uso el tutorial de crear pagina web en un mac?
    Por primole en el foro Foro General
    Respuestas: 1
    Último Mensaje: 21/03/2009, 17:05

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •