Foros del Web » Programando para Internet » Jquery »

Script para alternar imágenes pulsando en thumbnails

 Estas en el tema de Script para alternar imágenes pulsando en thumbnails en el foro de Jquery en Foros del Web. Me han pasado este script de jQuery, para cambiar la foto grande pulsando en las miniaturas: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original $ ( ...
  #1 (permalink)  
Antiguo 25/03/2014, 05:28
Avatar de Linton  
Fecha de Ingreso: diciembre-2011
Ubicación: Viena
Mensajes: 1.213
Antigüedad: 13 años
Puntos: 55
Script para alternar imágenes pulsando en thumbnails
Me han pasado este script de jQuery, para cambiar la foto grande pulsando en las miniaturas:

Código Javascript: 
Ver original
  1. $('img.thumbnail').click(function() {
  2.       $('#bigImg').attr('src', $(this).attr('src').replace(/\.jpg/, 'Big.jpg'));
  3.       // Change name and show
  4. }).first().click(); // And activate the first one

...pero apenas conozco jQuery, y no sé cómo debe ir el html. ¡Gracias de antemano por la ayuda!
  #2 (permalink)  
Antiguo 25/03/2014, 07:53
Avatar de 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
el codigo lo colocas en el header
asi
Código Javascript: 
Ver original
  1. <script>
  2. $(function(){
  3.     $('img.thumbnail').click(function() {
  4.           $('#bigImg').attr('src', $(this).attr('src').replace(/\.jpg/, 'Big.jpg'));
  5.           // Change name and show
  6.     }).first().click(); // And activate the first one
  7. });
  8. </script>
y en el html colocas tdas las imagenes asi:
Código HTML: 
Ver original
  1. <img class="thumbnail" src="tuimagen" />
  #3 (permalink)  
Antiguo 25/03/2014, 09:27
Avatar de 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
¡Muchas gracias por tu ayuda!

¿Ese código va en todas las imágenes, tanto las miniaturas de 90px como las de 500px?
  #4 (permalink)  
Antiguo 25/03/2014, 11:27
Avatar de 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
esto tienes que agregarlo a la miniaturas

Código PHP:
<img class="thumbnail" src="tuimagen" /> 
y este a la grande
Código PHP:
<img id="bigImg" src="tuimagen" /> 
  #5 (permalink)  
Antiguo 25/03/2014, 13:23
Avatar de 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
Hum, todavía le falta algo ¿Hay que dar display:none a todas las fotos menos la primra, o cómo? Aquí está el código completo, he quitado muchas fotos para abreviarlo:

Código PHP: 
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.     <script>
  10.     $(function(){
  11.         $('img.thumbnail').click(function() {
  12.               $('#bigImg').attr('src', $(this).attr('src').replace(/\.jpg/, 'Big.jpg'));
  13.               // Change name and show
  14.         }).first().click(); // And activate the first one
  15.     });
  16.     </script>
  17.  
  18. </head>
  19. <body>
  20.     <div class="contenedor">
  21.     <div class="ficha">
  22.         <div class="grande" width="510" height="380">
  23.         <a href="cuisine/gr(1).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(1).jpg"></a>
  24.         <a href="cuisine/gr(2).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(2).jpg"></a>
  25.         <a href="cuisine/gr(3).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(3).jpg"></a>
  26.         <a href="cuisine/gr(4).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(4).jpg"></a>
  27.         <a href="cuisine/gr(5).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(5).jpg"></a>
  28.         <a href="cuisine/gr(6).jpg" data-lightbox="foto"><img id="bigImg" src="cuisine/500px(6).jpg"></a>
  29.         </div>
  30.         <div class="sellos">
  31.         <a href="#"><img class="thumbnail" src="cuisine/120px(1).jpg"></a>
  32.         <a href="#"><img class="thumbnail" src="cuisine/120px(2).jpg"></a>
  33.         <a href="#"><img class="thumbnail" src="cuisine/120px(3).jpg"></a>
  34.         <a href="#"><img class="thumbnail" src="cuisine/120px(4).jpg"></a>
  35.         <a href="#"><img class="thumbnail" src="cuisine/120px(5).jpg"></a>
  36.         <a href="#"><img class="thumbnail" src="cuisine/120px(6).jpg"></a>
  37.         </div>
  38.     </div>
  39. </body>
  40. </html>
  #6 (permalink)  
Antiguo 25/03/2014, 13:35
Avatar de andresgarciadev  
Fecha de Ingreso: junio-2013
Mensajes: 218
Antigüedad: 11 años, 5 meses
Puntos: 32
Respuesta: Script para alternar imágenes pulsando en thumbnails
no no, los que tienen id bigImg quitalos... solo deja 1.. la cual sera remplazada cuando de click a un thumbnail por el jquery... y porcierto... el jquery deberia ir abajo... no se por que te dijo enlinea que lo coloques en el header ... pero bueno....
lo importante es que hagasl o primero que te digo, quitar los bigimg y solo dejar uno
  #7 (permalink)  
Antiguo 25/03/2014, 13:44
Avatar de 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
Cita:
Iniciado por andresgarciadev Ver Mensaje
el jquery deberia ir abajo... no se por que te dijo enlinea que lo coloques en el header ... pero bueno....
lo importante es que hagasl o primero que te digo, quitar los bigimg y solo dejar uno
Por ORDEN se coloca todo el javascript en el principio antes del body.
para eso lo deje dentro de
$(function(){}); //es para ejecutar cuando la pagina este cargada
asi sabras donde esta el codigo
  #8 (permalink)  
Antiguo 25/03/2014, 13:54
Avatar de 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>
  #9 (permalink)  
Antiguo 25/03/2014, 13:56
Avatar de 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
No puedo escribir, cada vez me pide que confirme el captcha
  #10 (permalink)  
Antiguo 25/03/2014, 16:17
Avatar de 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
  #11 (permalink)  
Antiguo 26/03/2014, 00:19
Avatar de 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
¡Muchas gracias! Efectivamente funciona, pero no lo entiendo: ¿¿dónde diablos está el html de las fotos grandes??
Desde luego que necesito aprender jQuery, tengo varios manuales pero como de costumbre voy saltando de uno a otro sin avanzar.

Gracias de nuevo, un saludo.
Última edición por Linton; 26/03/2014 a las 00:48
  #12 (permalink)  
Antiguo 26/03/2014, 06:07
Avatar de 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
Si quieres te puedo dar una clase gratis por skype.
  #13 (permalink)  
Antiguo 26/03/2014, 06:58
Avatar de 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
¿En serio? El problema es que estoy sin micro, o sea que sólo puedes leer lo que yo escriba, como en un chat.

Si necesitas ayuda en temas de fotografía dímelo

Etiquetas: thumbnails
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 01:04.