Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 10 de 10

Tema: Necesito script para fotos que se alternan con click en viñeta de abajo

  1. #1
    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

    Necesito script para fotos que se alternan con click en viñeta de abajo

    Seguro que habéis visto el recurso en muchas webs, especialmente de ropa: se abre una ficha de producto con una imagen grande y varias miniaturas debajo, según la que pulses se va cambiando la foto grande. Podéis ver un ejemplo en esta web de zapatos.

    ¿Conocéis un script eficaz para eso, teniendo en cuenta que serán 20 fotos en vez de unas pocas? Gracias, un saludo.
    Última edición por Lombardo; 20/03/2014 a las 18:54

  2. #2
    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
    Bien, ya tengo un script válido para dos o tres fotos

    Ahora necesito otro para cuando son muchas más, debajo muestro lo que planeo hacer. La foto grande cambia según se escoja pulsando en cualquiera de las pequeñas. Me han pasado este sencillo script, pero no sé cómo hacer el html. ¡Gracias por la ayuda!
    Código HTML:
    $('img.thumbnail').click(function() {
          $('#bigImg').attr('src', $(this).attr('src').replace(/\.jpg/, 'Big.jpg'));
          // Change name and show
    }).first().click(); // And activate the first one

  3. #3
    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
    Código HTML:
    <img src="imagen.jpg" class="thumbnail" />
    Prueba con esto a ver

  4. #4
    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
    ¡Gracias, voy a comprobarlo!

  5. #5
    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
    Pues no lo pillo [] ¿Dónde puedo estudiar jQuery? El código completo (quitando muchas fotos para abreviar), que no funciona:

    Código HTML:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>  </title>
    <link rel="stylesheet" href="estilos.css" type="text/css" media="all" />
    <link href="css/lightbox.css" rel="stylesheet" />
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/lightbox-2.6.min.js"></script>
        <script>
        $(function(){
            $('img.thumbnail').click(function() {
                  $('#bigImg').attr('src', $(this).attr('src').replace(/\.jpg/, 'Big.jpg'));
                  // Change name and show
            }).first().click(); // And activate the first one
        });
        </script>
    
    </head>
    <body>
    	<div class="contenedor">
    	<div class="ficha">
    		<div class="grande" width="510" height="380">
    		<a href="cuisine/gr(1).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(1).jpg"></a>
    		<a href="cuisine/gr(2).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(2).jpg"></a>
    		<a href="cuisine/gr(3).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(3).jpg"></a>
    		<a href="cuisine/gr(4).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(4).jpg"></a>
    		<a href="cuisine/gr(5).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(5).jpg"></a>
    		</div>
    		<div class="sellos">
    		<a href="#"><img class="thumbnail" src="cuisine/120px(1).jpg"></a>
    		<a href="#"><img class="thumbnail" src="cuisine/120px(2).jpg"></a>
    		<a href="#"><img class="thumbnail" src="cuisine/120px(3).jpg"></a>
    		<a href="#"><img class="thumbnail" src="cuisine/120px(4).jpg"></a>
    		<a href="#"><img class="thumbnail" src="cuisine/120px(5).jpg"></a>
    		</div>
    	</div>
    </body>
    </html>

  6. #6
    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
    Ya me han explicado cómo era, y aquí lo expongo para quien pueda necesitarlo:

    Código HTML:
       <!DOCTYPE HTML>
        <html>
        <head>
        <title>  </title>
        <link rel="stylesheet" href="estilos.css" type="text/css" media="all" />
        <link href="css/lightbox.css" rel="stylesheet" />
        <script src="js/jquery-1.10.2.min.js"></script>
        <script src="js/lightbox-2.6.min.js"></script>
        </head>
         <body>
         <script>
            $(function(){
                $('img.thumbnail').click(function() {
                      $('#bigImg').attr('src', $(this).attr('src').replace('85', '550'));
                      // Change name and show
                }).first().click(); // And activate the first one
            });
            </script>
            <div class="contenedor">
    			<div class="ficha">
                <div class="grande" width="580" height="450">
                <img id="bigImg" src="cuisine/mer550px(1).jpg">
                </div>
                <div class="sellos">
                <img class="thumbnail" src="cuisine/mer85px(1).jpg">
                <img class="thumbnail" src="cuisine/mer85px(2).jpg">
                <img class="thumbnail" src="cuisine/mer85px(3).jpg">
                <img class="thumbnail" src="cuisine/mer85px(4).jpg">
                <img class="thumbnail" src="cuisine/mer85px(5).jpg">
                <img class="thumbnail" src="cuisine/mer85px(6).jpg">
                <img class="thumbnail" src="cuisine/mer85px(7).jpg">
                <img class="thumbnail" src="cuisine/mer85px(8).jpg">
                <img class="thumbnail" src="cuisine/mer85px(9).jpg">
                <img class="thumbnail" src="cuisine/mer85px(10).jpg">
                <img class="thumbnail" src="cuisine/mer85px(11).jpg">
                <img class="thumbnail" src="cuisine/mer85px(12).jpg">
                </div>
            </div>
        </body>
        </html>
    Pero esto para mí es casi un misterio. ¿De modo que no hace falta el html de las fotos grandes, jQuery va solito al archivo de fotos y tranquilamente coge las que proceda? ¿¿Cómo lo hace??

    Otra duda: intento dejar el div de la foto grande con tamaño fijo, pero no obedece a las medidas con estilos, cada vez adopta el tamaño exacto de la foto aunque sea menor que el indicado. ¿Sabéis cómo puedo doblegarlo?

    Gracias, un saludo.

  7. #7
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,045
    Poder de Reputación
    21
    Respecto a tu segunda pregunta, porque la primera no la entendí xD (debe ser la hora - 0:33)...

    Cuando se aplican estilos a los elementos, estos tienen una jerarquía:

    1.- Estilos en línea y/o atributos. Los estilos en línea son los que se definen con style="css" y los atributos son, por ejemplo, width o height de un elemento img.
    2.- Los estilos definidos en algún lugar del documento (head, body, etc.).
    3.- Los estilos incluidos por un enlace (<link />).

    Ahora, debes tener en cuenta que los estilos se procesan línea a línea, por ende, un estilo en la primera línea será sobre escrito por una línea mayor. Por ejemplo:

    Código HTML:
    /* Línea 1 */
    #mydiv { width: 350px; }
    
    /* Más estilos */
    
    /* Línea 20 */
    #mydiv { width: 500px; }
    De esta forma, #mydiv tendrá un ancho de 500 y no de 350.

  8. #8
    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
    Hola Skaparate. Lo que decía es que jQuery hace aparecer en la página las fotos grandes aunque no están en el html, sólo constan las miniaturas (class thumbnail).

    Gracias, un saludo.

  9. #9
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,045
    Poder de Reputación
    21
    Lo que hace es simplemente reemplazar el atributo src de #bigImg por el de la miniatura clickeada. Algo así:

    1.- Captura el clic sobre la miniatura: $('img.thumbnail').click(function() {}) - al hacer clic sobre cualquier img que contenga la clase thumbnail, haz lo que está dentro de function.
    2.- En el clic, hace lo siguiente:
    2.a. Reemplaza en el atributo src de la miniatura clickeada el 85 por 550: $(this).attr('src').replace('85', '550').
    2.b. Asigna lo reemplazado en el atributo src de la imagen grande: $('#bigImg').attr('src', $(this).attr('src').replace('85', '550')).

    Y dentro de la carpeta cuisine deben existir pares de imágenes 85 y 550: mer85px(N).jpg y mer550px(N).jpg.

    Código:
    $('img.thumbnail').click(function(e) {
      console.log("Thumbnail clicked!");
      var thumbSrc = $(this).attr('src').replace('85', '550');
      console.log("Thumbnail src: " + thumbSrc);
      var $bigImg = $('#bigImg');
      var bigSrc = $bigImg.attr('src');
      console.log("Big src: " + bigSrc);
      $bigImg.attr('src', thumbSrc);
    });
    Utiliza ese código para que veas, en la consola (Google Chrome = F12 - en los demás parece que es la misma tecla, ya no lo recuerdo), lo que va pasando al "cambiar" las imágenes.

  10. #10
    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
    Cita Iniciado por skaparate Ver Mensaje
    ...Y dentro de la carpeta cuisine deben existir pares de imágenes 85 y 550: mer85px(N).jpg y mer550px(N).jpg.
    Pues eso digo: aparecen imágenes que no están en el index.html No sabía que eso fuera posible.

    ¡Gracias, un saludo!

Temas Similares

  1. Ayuda para script jQuery (agrandar fotos)
    Por Lombardo en el foro Foro General
    Respuestas: 0
    Último Mensaje: 18/01/2013, 16:19
  2. Respuestas: 0
    Último Mensaje: 27/02/2009, 14:38
  3. Necesito Scrpts, para eliminar el click derecho
    Por *Blaizer* en el foro Scripts
    Respuestas: 0
    Último Mensaje: 22/09/2007, 18:41

Permisos de Publicación

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