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

**Lombardo** · 20/03/2014, 18:50

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.

**Lombardo** · 25/03/2014, 12:41

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

**Doodleo** · 25/03/2014, 13:37

Código HTML:

<img src="imagen.jpg" class="thumbnail" />

Prueba con esto a ver

**Lombardo** · 25/03/2014, 13:49

¡Gracias, voy a comprobarlo!

**Lombardo** · 25/03/2014, 19:35

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>

**Lombardo** · 26/03/2014, 19:19

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.

**skaparate** · 08/04/2014, 03:33

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.

**Lombardo** · 08/04/2014, 06:21

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.

**skaparate** · 08/04/2014, 22:41

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.

**Lombardo** · 09/04/2014, 05:04

Iniciado por skaparate

...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!

**samir10** · 22/07/2018, 22:10

Iniciado por Lombardo

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.

Yo tenía la misma duda aquí pero gracias a todos ustedes he podido comprenderlo mejor...

Saludos!