Tema: Script para alternar imágenes pulsando en thumbnails
Ver Mensaje Individual
  #8 (permalink)  
Antiguo 25/03/2014, 13:54
Avatar de Linton
Linton
 
Fecha de Ingreso: diciembre-2011
Ubicación: Viena
Mensajes: 1.213
Antigüedad: 13 años
Puntos: 55
Respuesta: Script para alternar imágenes pulsando en thumbnails
¡Gracias! Pero sigue sin funcionar... Así está ahora:

Código HTML: 
Ver original
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <title>  </title>
  5. <link rel="stylesheet" href="estilos.css" type="text/css" media="all" />
  6. <link href="css/lightbox.css" rel="stylesheet" />
  7. <script src="js/jquery-1.10.2.min.js"></script>
  8. <script src="js/lightbox-2.6.min.js"></script>
  9. </head>
  10.  <body>
  11.  <script>
  12.     $(function(){
  13.         $('img.thumbnail').click(function() {
  14.               $('#bigImg').attr('src', $(this).attr('src').replace(/\.jpg/, 'Big.jpg'));
  15.               // Change name and show
  16.         }).first().click(); // And activate the first one
  17.     });
  18.     </script>
  19.     <div class="contenedor">
  20.     <div class="ficha">
  21.         <div class="grande" width="510" height="380">
  22.         <a href="cuisine/gr(1).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(1).jpg"></a>
  23.         <a href="cuisine/gr(2).jpg" data-lightbox="foto"><img src="cuisine/500px(2).jpg"></a>
  24.         <a href="cuisine/gr(3).jpg" data-lightbox="foto"><img src="cuisine/500px(3).jpg"></a>
  25.         <a href="cuisine/gr(4).jpg" data-lightbox="foto"><img src="cuisine/500px(4).jpg"></a>
  26.         <a href="cuisine/gr(5).jpg" data-lightbox="foto"><img src="cuisine/500px(5).jpg"></a>
  27.         <a href="cuisine/gr(6).jpg" data-lightbox="foto"><img src="cuisine/500px(6).jpg"></a>
  28.         <a href="cuisine/gr(7).jpg" data-lightbox="foto"><img src="cuisine/500px(7).jpg"></a>
  29.         <a href="cuisine/gr(8).jpg" data-lightbox="foto"><img src="cuisine/500px(8).jpg"></a>
  30.         <a href="cuisine/gr(9).jpg" data-lightbox="foto"><img src="cuisine/500px(9).jpg"></a>
  31.         <a href="cuisine/gr(10).jpg" data-lightbox="foto"><img src="cuisine/500px(10).jpg"></a>
  32.         <a href="cuisine/gr(11).jpg" data-lightbox="foto"><img src="cuisine/500px(11).jpg"></a>
  33.         <a href="cuisine/gr(12).jpg" data-lightbox="foto"><img src="cuisine/500px(12).jpg"></a>
  34.         </div>
  35.         <div class="sellos">
  36.         <a href="#"><img class="thumbnail" src="cuisine/120px(1).jpg"></a>
  37.         <a href="#"><img class="thumbnail" src="cuisine/120px(2).jpg"></a>
  38.         <a href="#"><img class="thumbnail" src="cuisine/120px(3).jpg"></a>
  39.         <a href="#"><img class="thumbnail" src="cuisine/120px(4).jpg"></a>
  40.         <a href="#"><img class="thumbnail" src="cuisine/120px(5).jpg"></a>
  41.         <a href="#"><img class="thumbnail" src="cuisine/120px(6).jpg"></a>
  42.         <a href="#"><img class="thumbnail" src="cuisine/120px(7).jpg"></a>
  43.         <a href="#"><img class="thumbnail" src="cuisine/120px(8).jpg"></a>
  44.         <a href="#"><img class="thumbnail" src="cuisine/120px(9).jpg"></a>
  45.         <a href="#"><img class="thumbnail" src="cuisine/120px(10).jpg"></a>
  46.         <a href="#"><img class="thumbnail" src="cuisine/120px(11).jpg"></a>
  47.         <a href="#"><img class="thumbnail" src="cuisine/120px(12).jpg"></a>
  48.         </div>
  49.     </div>
  50. </body>
  51. </html>