JQuery set img src a seconda di dove si sceglie

Question

ho usato javascript per il caricamento di una foto sul mio sito web a seconda di quale foto "piccoli" in ul hai cliccato ... ho avuto qualcosa di simile:

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

e in html semplice: cose del genere:

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

in modo da vedere, ho potuto, a seconda di quale piccole foto nella lista non ordinata si è fatto clic, caricare alcune foto particolari, passando la stringa src in discussione al mio viewImage function ...

ma ho deciso di utilizzare Jquery per ottenere un effetto di dissolvenza. Ma non riesco a trovare un modo per passare un argomento che avrebbe detto la mia funzione JQuery quale foto caricare a seconda di dove ho cliccato ...

bloccati qui:

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

Non voglio il 11.jpg per essere hardcoded, ho bisogno di passare attraverso argomenti quando clicco su un elemento speciale Li nel mio ul elemento id #ulPhotos ...

Spero di essere abbastanza chiaro scusa!

Answer 1

karim79 fornisce una soluzione corretta, ma in realtà non spiega il problema.

Si allega il gestore di clic all'elenco stesso anziché direttamente alle immagini. Quando viene attivato un richiamo del comportamento jQuery collegato, this è l'elemento su cui è stato fatto clic, che si desidera sia un collegamento che circonda le immagini. Nel tuo caso attuale this sarà la lista stessa.

Non è necessario aggiungere una classe alle miniature. $('#ulPhotos a') ti porterà a loro altrettanto facilmente. Sono d'accordo con il suggerimento di utilizzare un attributo data- su selezionabile per sapere quale grande immagine si desidera mostrare.

Inoltre, se sta intenzione di aggiungere il comportamento del clic secondario agli elementi a, probabilmente si vuole evitare che il comportamento predefinito accada, in modo da qualcosa come:

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

Answer 2

Una soluzione abbastanza semplice sarebbe quella di assegnare una classe comune (pollice o qualsiasi altra cosa) per tutte le piccole immagini, e memorizzare il nome del file delle immagini più grandi all'interno delle loro attributi rel, ad esempio:

<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 è un altro meccanismo di archiviazione che potresti prendere in considerazione.

È anche abbastanza comune (e semplice) per seguire una particolare convenzione e 'montare' il nome del file un'immagine più grande base alla src del cliccato più piccola, per esempio:

<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")); 
}); 

Ciò presuppone che tutte le tue immagini a grandezza naturale sono precedute da 'big_', quindi si tratta semplicemente di aggiungere 'big_' allo src della miniatura cliccata.

Answer 3

grazie a tutti e due , il mio sito web funziona, fornisco il codice finale per principianti come me che potrebbero avere gli stessi bisogni ...

ecco la funzione:

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

qui sono gli elementi 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> 

ho usato l'attributo alt per aggiungere le leggende, in modo da essere in grado di aggiungere alcuni tag HTML come < em > perché il titolo appare quando si passa il mouse sulle miniature, e non volevo che le persone vedessero per loro strani tag ...

volte, è un po 'lento quando si clicca molto velocemente si può rimanere sulla foto precedente per un po' di tempo al primo tentativo, forse perché non ho usato un CDN per inserire la versione minificata di jquery (ho letto un consiglio del genere), non lo so, io sono veramente un principiante, ma è niente di grave comunque ...

tra l'altro, la pagina è qui .. http://www.marion-baglan.net/photos.htm