jQuery establecer img src dependiendo de donde se hace clic

Question

Solía ​​Javascript para cargar una foto en mi sitio web dependiendo de qué fotos "pequeños" en el que hizo clic ul ... tuve algo así:

<script type="text/javascript"> 
    function viewImage(src, legende) { 
     document.getElementById("imageBig").src = "images/photos/"+src; 
     document.getElementById("legend").innerHTML = legende; 
    } 
</script> 

y en html simplemente: cosas por el estilo:

<ul id="ulPhotos"> 
<li> 
    <a href="#centre" onclick="javascript:viewImage('flute.jpg','La Reine de la Nuit au Comedia')"> 
     <img src="images/photos/carre-09.jpg" alt="" /> 
    </a> 
    <a href="#centre" onclick="javascript:viewImage('perichole.jpg','Manuelita - <em>La P&eacute;richole</em> &agrave; l&#8217;Op&eacute;ra Comique')"> 
     <img src="images/photos/carre-03.jpg" alt="" /> 
    </a> 
</li> 
<li> 
    <a href="#centre" onclick="javascript:viewImage('12.png','R&eacute;cital &agrave; Carnac, septembre 2008')"> 
     <img src="images/photos/carre-12.jpg" alt="Marion Baglan Carnac R&eacute;" /> 
    </a> 
    <a href="#centre" onclick="javascript:viewImage('01.jpg','')"> 
     <img src="images/photos/carre-01.jpg" alt="" /> 
    </a> 
</li> 
</ul> 

por lo que ver, podría, dependiendo de que las pequeñas fotos en la lista desordenada que ha hecho clic, cargar algunas fotos particulares, pasando la cadena src en el argumento a mi Función viewImage ...

pero decidí usar Jquery para obtener un efecto de fundido de entrada. Pero no puedo encontrar una manera de pasar un argumento que decirle a mi función de jQuery qué foto para cargar dependiendo de donde hice clic ...

atrapados aquí:

$(document).ready(function(){ 
    $('#ulPhotos').click(function() { 
     var newSrc = $('#imageBig').attr("src", "images/photos/11.jpg"); 
    }); 
}); 

no quiero la 11.jpg para ser codificado, necesito pasarlo por argumento cuando hago clic en un elemento li especial en mi elemento ul de id #ulPhotos ...

Espero que lo tenga lo suficientemente claro!

Answer 1

karim79 da una solución correcta, pero en realidad no explica su problema.

Está adjuntando el manejador de clics a la lista en lugar de directamente a las imágenes. Cuando se activa una devolución de llamada de comportamiento jQuery adjunta, this es el elemento al que se hizo clic, que desea que sean los enlaces que rodean las imágenes. En su caso actual, this será la lista en sí.

No es necesario que agregue una clase a las miniaturas. $('#ulPhotos a') te llevará a ellos con la misma facilidad. Estoy de acuerdo con la sugerencia de utilizar un atributo data- en el que se puede hacer clic para saber qué imagen grande quieres mostrar.

Además, si está va a agregar comportamiento de la pulsación secundaria a los elementos A, es probable que desee evitar que el comportamiento por defecto suceda, así que algo como:

$('#ulPhotos a').click(function (event) { 
    $('#imageBig').attr('src', $(this).attr('data-big-image')); 
    event.preventDefault(); 
}); 

Answer 2

Una solución bastante sencillo sería asignar una clase común (pulgar o lo que sea) a todas las pequeñas imágenes y almacenar el nombre de archivo de las imágenes más grandes dentro de sus atributos rel, por ejemplo:

<img src="something.jpg" rel="something_big.jpg" class="thumb"/> 
<img src="somethingElse.jpg" rel="somethingElse_big.jpg" class="thumb"/> 
<img id="bigImage" src="something_big.jpg"/> 

$(".thumb").click(function() { 
    $("#bigImage").attr('src', $(this).attr("rel")); 
}); 

data es otro mecanismo de almacenamiento que podría considerar.

También es bastante común (y simple) para seguir una convención particular y 'montar' el nombre de archivo de la imagen más grande basado en el src de la más pequeña hace clic en uno, por ejemplo:

<img src="something.jpg" class="thumb"/> 
<img src="somethingElse.jpg" class="thumb"/> 
<img id="bigImage" src="big_something.jpg"/> 

$(".thumb").click(function() { 
    $("#bigImage").attr('src', 'big_' + $(this).attr("src")); 
}); 

que asume que todas sus imágenes de tamaño completo tengan el prefijo 'big_', por lo que es una simple cuestión de agregar 'big_' al código de la miniatura clicada.

Answer 3

gracias a los dos , mi sitio web funciona, doy el código final para principiantes como yo que podrían tener las mismas necesidades ...

aquí es la función:

<script type="text/javascript"> 
    $(document).ready(function(){ 

$('#ulPhotos a').click(function() { 
    var newSrc= $(this).find('img').attr('src').split("/"); 
    bigPictureName = 'big'+newSrc[2]; 
    $('#imageBig').attr("src", "images/photos/"+bigPictureName).hide(); 
    $('#imageBig').fadeIn('fast'); 

    var alt = $(this).find('img').attr('alt'); 
    $('#legend').html(alt); 
    }); 
    }); 

</script> 

aquí son los elementos HTML:

<ul id="ulPhotos"> 
     <li><a href="#centre"><img src="images/photos/09.jpg" title="La Reine de la Nuit au Comedia" alt="<em>La Reine de la Nuit</em> au Comedia"/></a> 
    <a href="#centre"><img src="images/photos/03.jpg" title="Manuelita, La Périchole à l&rsquo;Opéra Comique" alt="Manuelita, <em>La Périchole</em> à l&#8217;Opéra Comique" /></a></li> 
    <li><a href="#centre" ><img src="images/photos/12.png" title="" alt="Marion Baglan Carnac Ré" /></a> 

He utilizado el atributo alt para anexar las leyendas con el fin de ser capaz de añadir algunas etiquetas HTML como < em > porque el título aparece cuando coloca el mouse sobre las miniaturas, y no quería que las personas vean etiquetas extrañas para ellos ...

algunos veces, es un poco lento cuando hace clic muy rápido, puede permanecer en la foto anterior por un momento al primer intento, tal vez porque no usé un CDN para poner la versión minimada de jquery (leí tal consejo), no sé, estoy realmente un principiante, pero no es nada serio de todos modos ...

por cierto, la página está aquí .. http://www.marion-baglan.net/photos.htm