Tema: Script para alternar imágenes pulsando en thumbnails
Ver Mensaje Individual
  #10 (permalink)  
Antiguo 25/03/2014, 16:17
Avatar de enlinea777
enlinea777
 
Fecha de Ingreso: mayo-2008
Ubicación: frente al pc
Mensajes: 1.830
Antigüedad: 16 años, 6 meses
Puntos: 127
Respuesta: Script para alternar imágenes pulsando en thumbnails
Lee bien el codigo

Código Javascript: 
Ver original
  1. <script>
  2.     $(function(){ // para que se ejecute despues de cargartodo
  3.         $('img.thumbnail').click(function() { //selecciona y aplica la funciona a la etiqueta <img que tenga como clase thumbnail
  4.               $('#bigImg').attr('src', $(this).attr('src').replace(/\.jpg/, 'Big.jpg')); // aqui lo que hace es reemplasar ejeplo:  imajen.jpg por  imajenBig.jpg, asiq ue tu imagen grande se debera llamar imajenBig.jpg ejemplo tengo 3imagenes imajen1.jpg, imajen2.jpg, imajen3.jpg al clikearlas el recuadro grande llamara a   imajen1Big.jpg, imajen2Big.jpg, imajen3Big.jpg respectivamente
  5.               // Change name and show
  6.         }).first().click(); // And activate the first one
  7.     });
  8.     </script>

Siendo sincero deberias aprender jquery y javascript primero


aqui el codigo
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('120', '500'));
  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.         <img id="bigImg" src="cuisine/500px(1).jpg">
  23.         </div>
  24.         <div class="sellos">
  25.         <img class="thumbnail" src="cuisine/120px(1).jpg">
  26.         <img class="thumbnail" src="cuisine/120px(2).jpg">
  27.         <img class="thumbnail" src="cuisine/120px(3).jpg">
  28.         <img class="thumbnail" src="cuisine/120px(4).jpg">
  29.         <img class="thumbnail" src="cuisine/120px(5).jpg">
  30.         <img class="thumbnail" src="cuisine/120px(6).jpg">
  31.         <img class="thumbnail" src="cuisine/120px(7).jpg">
  32.         <img class="thumbnail" src="cuisine/120px(8).jpg">
  33.         <img class="thumbnail" src="cuisine/120px(9).jpg">
  34.         <img class="thumbnail" src="cuisine/120px(10).jpg">
  35.         <img class="thumbnail" src="cuisine/120px(11).jpg">
  36.         <img class="thumbnail" src="cuisine/120px(12).jpg">
  37.         </div>
  38.     </div>
  39. </body>
  40. </html>

con eso deberia funcionar si o si